<template>
  <div id="systemNav">
    <Header />
    <div class="main">
      <div class="row1">
        <ul class="totalbox">
          <li v-for="(v,i) in totalData" :key="i">
            <div>{{ v.title }}</div>
            <h2>{{ v.value }}</h2>
          </li>
        </ul>
        <!-- 常用系统 -->
        <div class="box commonlyUsed" style="height: 180px;">
          <Title :dataSource="systemTitleData" :tagState="'0'" :btnType="'edit'" @systemhandleOk="systemOk" />
          <ul class="list">
            <li v-for="item in systemList" :key="item.joinsysCode">
              <a @click="redrictSystem(item.returnUrl,item.name,item.joinsysCode)">
                {{ item.name }}
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="row2">
        <!-- 个人中心 -->
        <div class="box personal-box">
          <Title :dataSource="personalTitleData" :btnType="'more'" :tagState="'1'" :tagData="personalTagData" @getPerListData="getPerListData" />
          <div class="list-content">
            <List :listData="personalListData_" />
          </div>
        </div>
        <!-- 公司公文 部门公告 -->
        <div class="box companyDoc-box">
          <TitleTab @getCompanyDocData="getCompanyDocData" :dataSource="companyDocTitleData" :btnType="'more'" />
          <div class="list-content">
            <ListTab :listData="companyDocListData_" />
          </div>
        </div>
      </div>
      <div class="row3">
        <!-- 公司新闻 综合信息 -->
        <div class="box news-box">
          <TitleTab @getNewsData="getNewsData" :dataSource="newsTitleData" :btnType="'more'" />
          <div class="list-content">
            <div class="left">
              <a-carousel effect="fade" autoplay>
                <div v-for="(item, index) in newsImgData" :key="index">
                  <img :src="item.imgUrl" alt="">
                </div>
              </a-carousel>
            </div>
            <div class="right">
              <ListTab :listData="newsData_" />
            </div>
          </div>
        </div>
        <!-- 信息推荐 -->
        <div class="box infor-box">
          <Title :dataSource="inforTitleData" :btnType="'changeIt'" :tagState="'0'" />
          <div class="list-content">
            <ListTab :listData="inforListData" />
          </div>
        </div>

      </div>
      <div class="row4">
        <!-- 个人工作台 -->
        <div class="box workbench-box" :class="unfoldState?'work-down':'work-up'">
          <Title :dataSource="workbenchTitleData" :btnType="'edit'" :tagState="'0'" @workhandleOk="workOk" />
          <div class="list-content">
            <ul class="workbench-list">
              <li v-for="(item,index) in workbenchData" :key="index">
                <div>
                  <img :src="item.imgUrl" alt="">
                  <b v-if="item.nums !== null && item.nums !== 0" class="nums">{{ item.nums }}</b>
                </div>
                <h2>{{ item.title }}</h2>
              </li>
            </ul>
          </div>
          <div class="tips">
            <span v-if="workbenchData.length <= 7">
              您可以继续定义自己的工作卡片……
            </span>
            <button v-if="workbenchData.length >= 11" class="unfold-btn" @click="changeUnfoldState" :class="unfoldState?'unfold-focus':''">
            </button>
          </div>
        </div>
      </div>
      <a-modal v-model="workVisible" width="720px" title="常用应用" @ok="workOk">
        <WorkbenchModel :dataSoure="workbenchData" @workhandleOk="workhandleOk" @workHandleCancel="workHandleCancel" />
      </a-modal>
      <a-modal v-model="systemVisible" width="720px" title="常用系统" @ok="systemOk">
        <SystemModel :dataSoure="systemList" @systemhandleOk="systemhandleOk" @systemhandleCancel="systemhandleCancel" />
      </a-modal>

    </div>
    <div class="right-btnlist">
      <button class="feedback">
        <img src="../assets/images/systemNav/feedback.png" alt="">
        <div>请留下您的宝贵意见……</div>
      </button>
      <button class="top" @click="toTop">
        <img src="../assets/images/systemNav/top.png" alt="">
      </button>
    </div>

  </div>
</template>

<script>
import Header from './systemNavComponents/Header1'
import Title from './systemNavComponents/Title'
import List from './systemNavComponents/List'
import TitleTab from './systemNavComponents/TitleTab'
import ListTab from './systemNavComponents/ListTab'
import WorkbenchModel from './systemNavComponents/WorkbenchModel'
import SystemModel from './systemNavComponents/SystemModel'
// import Cookies from 'js-cookie'

import { cassss, DDLogins, getUserSystemByRole } from '@/api/login'
// import storage from 'store'
// import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getToken, setToken } from '@/utils/auth'
// import storage from 'store'
// import { ACCESS_TOKEN } from '@/store/mutation-types'
// import { setToken } from '@/utils/auth'
export default {
  components: {
    Header,
    Title,
    List,
    TitleTab,
    ListTab,
    WorkbenchModel,
    SystemModel
  },
  data () {
    return {
      totalData: [
        { title: '待办', value: '32' },
        { title: '邮件', value: '21' }
      ],
      // 常用系统
      systemTitleData: {
        title: '常用系统',
        iconUrl: require('../assets/images/systemNav/icon1.png')
      },
      systemList: [],
      // 个人中心
      personalTitleData: {
        iconUrl: require('../assets/images/systemNav/icon2.png'),
        title: '个人中心'
      },
      personalTagData: ['全部', '待办', '已办', '办结', '邮件'],
      // 0'全部', 1'代办', 2'已办', 3'办结', 4'邮件'
      personalListData: [
        {
          type: '1',
          typeTitle: '待办',
          source: '人力资源管理系统',
          content: '员工转正申请',
          readState: 1,
          infor: '请提交转正申请相关材料',
          name: '系统自动发送',
          time: '2022-02-18'
        },
        {
          type: '1',
          typeTitle: '己办',
          source: 'OA系统',
          content: '督办流程',
          readState: 0,
          infor: '成立新天公司数智化建设委员会的报告',
          name: '程晓静',
          time: '2022-01-25'
        },
        {
          type: '2',
          typeTitle: '待办',
          source: 'OA系统',
          content: '内部邮件',
          readState: 1,
          infor: '关于开展2021年度智黄仓评先洗优工作的通知',
          name: '尚一婓',
          time: '2022-01-20'
        },
        {
          type: '3',
          typeTitle: '办结',
          source: 'OA系统',
          content: '新闻发布',
          readState: 0,
          infor: '服务数字新天新发展 启肮数智转型新征程——新天…',
          name: '李少辉',
          time: '2022-01-10'
        },
        {
          type: '4',
          typeTitle: '邮件',
          source: '企业邮箱',
          content: '外部邮件',
          readState: 0,
          infor: '主数据项目周报（第7周）',
          name: 'liyuerui',
          time: '2022-12-25'
        }
      ],
      personalListData_: [],
      // 公司公文 部门公告
      companyDocTitleData: {
        iconUrl: require('../assets/images/systemNav/icon3.png'),
        titleList: ['公司公文', '部门公告']
      },
      companyDocListData_: [],
      companyDocListData: [
        {
          readState: 1,
          infor: '关于进一步加强公司系统企业安全生产标准化建设的通知',
          time: '2022-03-02'
        },
        {
          readState: 1,
          infor: '关于转发《华北能源监管局关于立即组织开展除尘器等…',
          time: '2022-03-02'
        },
        {
          readState: 0,
          infor: '关于印发 《新天绿色能源股份有限公司党组织命名规则…',
          time: '2022-03-02'
        },
        {
          readState: 0,
          infor: '关于印发 《新天绿色能源股份有限公司党组织命名规则…',
          time: '2022-03-02'
        },
        {
          readState: 1,
          infor: '关于转发《省应对新冠肺炎疫情领导小组办公室关于规…',
          time: '2022-03-02'
        }
      ],
      companyDocListData2: [
        {
          readState: 1,
          infor: '关于进一步加强公司系统企业安全生产标准化建设的通知',
          time: '2022-03-02'
        },
        {
          readState: 1,
          infor: '关于转发《华北能源监管局关于立即组织开展除尘器等…',
          time: '2022-03-02'
        }
      ],
      // 公司新闻 综合信息
      newsTitleData: {
        iconUrl: require('../assets/images/systemNav/icon4.png'),
        titleList: ['公司新闻', '综合信息']
      },
      newsData_: [],
      newsData1: [
        {
          readState: 1,
          infor: '新天公司成功发行2022年第一期缘色超短期就咨券',
          time: '2022-03-02'
        },
        {
          readState: 1,
          infor: '新天公司党委组织开展理论学习中心组第四次集中学习',
          time: '2022-03-01'
        },
        {
          readState: 0,
          infor: '政银企密切合作 共创美好发展未来',
          time: '2022-02-28'
        },
        {
          readState: 1,
          infor: '新奥集团董事局副主席张瑾一行到天然气公司座谈交流',
          time: '2022-02-25'
        },
        {
          readState: 0,
          infor: '国务院安委会第十五督导组到天然气公司检查指导安全生产',
          time: '2022-02-23'
        }
      ],
      newsData2: [
        {
          readState: 0,
          infor: '请提交转正申请相关材料',
          time: '2022-02-18'
        },
        {
          readState: 1,
          infor: '请提交转正申请相关材料',
          time: '2022-02-18'
        },
        {
          readState: 0,
          infor: '请提交转正申请相关材料',
          time: '2022-02-18'
        }
      ],
      newsImgData: [
        { imgUrl: require('../assets/images/systemNav/t1.jpg') },
        { imgUrl: require('../assets/images/systemNav/t2.jpg') },
        { imgUrl: require('../assets/images/systemNav/t3.jpg') }
      ],

      // 信息推荐
      inforTitleData: {
        iconUrl: require('../assets/images/systemNav/icon5.png'),
        title: '信息推荐'
      },
      inforListData: [
        {
          readState: 1,
          infor: '新天绿色能源股份有限公司组织召开党…',
          time: '2022-02-23'
        },
        {
          readState: 0,
          infor: '国务院安委会第十五督导组到天然气公…',
          time: '2022-02-18'
        },
        {
          readState: 0,
          infor: '曹妃甸区委统战部携手党外代表人士赴…',
          time: '2022-02-18'
        },
        {
          readState: 0,
          infor: '乘势而上 抢抓机遇以奋进姿态加快推进…',
          time: '2022-01-25'
        },
        {
          readState: 0,
          infor: '新能源公司纪委召开2022年度党风廉政…',
          time: '2022-01-10'
        }
      ],
      // 个人工作台
      unfoldState: false,
      workbenchTitleData: {
        iconUrl: require('../assets/images/systemNav/icon6.png'),
        title: '个人工作台'
      },
      workbenchData: [
        {
          title: '生产经营与科技创新',
          imgUrl: require('../assets/images/systemNav/i1.png'),
          nums: 3
        },
        {
          title: '学习材料',
          imgUrl: require('../assets/images/systemNav/i2.png'),
          nums: 11
        },
        {
          title: '津贴申请',
          imgUrl: require('../assets/images/systemNav/i3.png'),
          nums: null
        },
        {
          title: '项目查询',
          imgUrl: require('../assets/images/systemNav/i4.png'),
          nums: null
        },
        {
          title: '出差申请',
          imgUrl: require('../assets/images/systemNav/i5.png'),
          nums: null
        },
        {
          title: '物料申请',
          imgUrl: require('../assets/images/systemNav/i6.png'),
          nums: null
        },
        {
          title: '培训申请',
          imgUrl: require('../assets/images/systemNav/i7.png'),
          nums: null
        }
      ],
      workVisible: false,
      systemVisible: false
    }
  },
  mounted () {
    // this.getPerListData('0')
    // this.getCompanyDocData(0)
    // this.getNewsData(0)
    // this.systemInit()
    const { code } = this.$route.query
    if (code) {
      // 登录接口
      this.handleCodeLogin(code)
    }
  },
  methods: {
    handleCodeLogin (code) {
      DDLogins(code)
        .then((res) => {
          if (res.token) {
            setToken(res.token)
            this.$router.push({ path: '/user/systemNav' })
          }
        }).catch((err) => {
        console.log(`err`, err)
        this.$router.push({ path: '/user/login' })
      })
    },
    systemInit (key) {
      getUserSystemByRole().then((res) => {
        console.log('hahha: ', res)
        if (res != null && res !== '') {
          console.info(res)
          this.systemList = res
        } else {
          this.systemList = this.ArrImg
        }
      })
    },
    redrictSystem (url, name, code) {
      // const token = storage.get(ACCESS_TOKEN)
      const token = getToken()
      // console.log('url：', url)
      // 如果不是跳转注册系统  就需要带着个人信息跳转
      if (url === '/') {
        window.location.href = '/SSO/'
      } else if (url === '/CAS') {
        // 如果点击的是知识管理系统的话调用接口访问CAS中央服务器
        const username = sessionStorage.getItem('username')
        const password = sessionStorage.getItem('password')
        cassss(username, password, code).then((res) => {
          if (res.code === 200) {
            window.open(res.msg)
          }
        })
      } else {
        const form = document.createElement('form')
        form.action = `${url}?token=${token}`
        form.target = '_blank'
        form.method = 'get'
        form.style.display = 'none'
        const opt = document.createElement('input')
        opt.name = 'token'
        opt.value = token
        form.appendChild(opt)
        document.body.appendChild(form)
        // 提交数据
        form.submit()
      }
    },
    toTop () {
      let top = document.documentElement.scrollTop || document.body.scrollTop
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 10)
    },
    onChange (a, b, c) {
      // console.log(a, b, c)
    },
    // 个人中心
    getPerListData (i) {
      this.personalListData_ = []
      this.personalListData.forEach((item, index) => {
        if (item.type === i.toString()) {
          this.personalListData_.push(item)
        }
        if (i.toString() === '0') {
          this.personalListData_ = this.personalListData
        }
      })
    },
    // 公司公文
    getCompanyDocData (i) {
      this.companyDocListData_ = []
      if (i === 0) {
        this.companyDocListData_ = this.companyDocListData
      } else if (i === 1) {
        this.companyDocListData_ = this.companyDocListData2
      }
      // console.log('i', this.companyDocListData_)
    },
    getNewsData (i) {
      this.newsData_ = []
      if (i === 0) {
        this.newsData_ = this.newsData1
      } else if (i === 1) {
        this.newsData_ = this.newsData2
      }
      // console.log('i', this.newsData_)
    },

    // 个人工作台
    workOk () {
      this.workVisible = !this.workVisible
    },
    workhandleOk (data) {
      this.workVisible = !this.workVisible
      this.workbenchData = data
    },
    workHandleCancel (data) {
      this.workVisible = false
      this.workbenchData = data
    },
    // 展开
    changeUnfoldState () {
      this.unfoldState = !this.unfoldState
    },
    // 常用应用
    systemOk () {
      this.systemVisible = !this.systemVisible
    },
    systemhandleOk (data) {
      this.systemVisible = !this.systemVisible
      this.systemList = data
    },
    systemhandleCancel (data) {
      this.systemVisible = false
      this.systemList = data
    }
  }
}
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
<style lang='less' scoped>
/deep/.ant-modal {
  border-radius: 6px;
  .ant-modal-header {
    display: none;
  }
  .ant-modal-content {
    border-radius: 6px;
    .ant-modal-close {
      display: none;
    }
  }
  .ant-modal-body {
    width: 99%;
    margin: 0 auto;
    &::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background-color: rgba(0, 0, 0, 0.2);
    }
    &::-webkit-scrollbar-corner {
      background-color: rgba(0, 0, 0, 0.1);
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
      background-color: transparent;
      border-radius: 5px;
    }
  }
  .ant-modal-footer {
    display: none;
  }
}
</style>
<style lang='less' scoped>
ol,
ul,
li {
  list-style: none;
}
#systemNav {
  padding-bottom: 30px;

  .main {
    display: grid;
    grid-template-rows: 200px 320px 320px auto;
    grid-column-gap: 20px;
    padding: 0 40px;
    .row1 {
      display: grid;
      grid-template-columns: 43% calc(57% - 20px);
      grid-column-gap: 20px;
      margin-bottom: 20px;
      .totalbox {
        display: flex;
        padding: 0;
        & > li {
          // width: 340px;
          width: 50%;
          height: 180px;
          padding: 40px 50px;
          color: #0f0b0b;
          font-size: 18px;
          border-radius: 5px;
          background: url('../assets/images/systemNav/p1.png') no-repeat center center;
          background-size: 100% 100%;
          box-shadow: 0 0 16px rgba(0, 0, 0, 15%);
          & > h2 {
            color: #009fe2;
            font-size: 52px;
          }
        }
        & > li:nth-child(2) {
          margin-left: 20px;
          background: url('../assets/images/systemNav/p2.png') no-repeat center center;
          background-size: 100% 100%;
          & > h2 {
            color: #3fae4f;
          }
        }
      }
      // 常用系统
      .commonlyUsed {
        .list {
          padding: 15px 40px;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          margin: 0;
          line-height: 42px;
          text-align: center;
          a {
            width: 88%;
            display: block;
            font-size: 18px;
            color: #333333;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            &:hover {
              color: #009fe2;
              text-decoration: underline;
            }
          }
        }
      }
    }

    .box {
      height: 100%;
      border-radius: 6px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(244, 245, 250, 1);
      border-radius: 6px;
      overflow: hidden;
      .list-content {
        padding: 15px 25px;
        height: calc(100% - 61px);
      }
    }
    .row2 {
      display: grid;
      grid-template-columns: calc(65% - 20px) 35%;
      grid-column-gap: 20px;
      margin-bottom: 20px;
      // 个人中心
      .personal-box {
        .list-content {
          padding: 15px 25px;
          height: calc(100% - 61px);
        }
      }
    }
    .row3 {
      display: grid;
      grid-template-columns: calc(65% - 20px) 35%;
      grid-column-gap: 20px;
      margin-bottom: 20px;
      .news-box {
        .list-content {
          display: grid;
          grid-template-columns: 38% calc(62% - 20px);
          .left {
            width: 100%;
            overflow: hidden;
            height: 200px;
            /deep/.slick-slider {
              height: 100%;
            }
            /deep/.ant-carousel {
              height: 100%;
              .slick-slide {
                height: 100%;
              }
              .slick-slide img {
                display: block;
                width: auto;
                height: 200px;
              }
              .slick-dots-bottom {
                bottom: 20px;
                width: auto;
                right: 16px;
                position: absolute;
              }
              .slick-dots {
                & > li {
                  margin: 0 3px;
                  & > button {
                    width: 7px;
                    height: 7px;
                    border-radius: 15px;
                    background: #fff;
                    opacity: 0.1;
                    -webkit-transition: all 0.5s;
                    transition: all 0.5s;
                  }
                }
                li.slick-active button {
                  width: 20px;
                  background: #fff;
                  opacity: 1;
                }
              }
              .slick-slide h3 {
                color: #fff;
                width: 100%;
                height: 48px;
                line-height: 48px;
                font-size: 20px;
                padding: 0 16px;
                text-align: left;
                margin: 0;
                background: rgba(255, 255, 255, 0.3);
                position: absolute;
                bottom: 0;
                left: 0;
                font-weight: normal;
                & > span {
                  display: block;
                  width: 70%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
          .right {
            margin-left: 20px;
          }
        }
      }
    }
    .row4 {
      .workbench-box {
        position: relative;
        // height: 236px;
        // min-height: 236px;
        .workbench-list {
          display: grid;
          margin: 0;
          width: calc(100% - 40px);
          grid-template-columns: repeat(10, 10%);
          & > li {
            margin: 10px 0;
            text-align: center;
            & > div {
              width: 60px;
              height: 60px;
              position: relative;
              margin: 0 auto;
              .nums {
                position: absolute;
                width: 17px;
                height: 17px;
                text-align: center;
                line-height: 17px;
                border-radius: 8.5px;
                color: #ffffff;
                background: rgba(230, 0, 18, 1);
                top: -5px;
                right: -5px;
                font-weight: normal;
                font-size: 12px;
              }
              & > img {
                width: 60px;
                height: auto;
                display: block;
              }
            }

            & > h2 {
              color: #171d33;
              font-size: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin: 15px 0 0;
              font-weight: normal;
            }
          }
          & > li:nth-child(n + 11) {
            display: none;
          }
        }
        .tips {
          display: flex;
          height: 140px;
          justify-content: space-between;
          align-items: center;
          position: absolute;
          top: 61px;
          right: 40px;
          & > span {
            font-size: 18px;
            color: #999999;
            display: inline-block;
            padding-right: 150px;
          }
          .unfold-btn {
            width: 30px;
            height: 30px;
            background: url('../assets/images/systemNav/unfold.png') no-repeat center center;
            background-size: 100% 100%;
            border: none;
            &:hover {
              background: url('../assets/images/systemNav/unfoldhov.png') no-repeat center center;
              background-size: 100% 100%;
              transition-duration: 1s;
            }
            &.unfold-focus {
              transform: rotate(180deg);
              background: url('../assets/images/systemNav/unfold.png') no-repeat center center;
              background-size: 100% 100%;
              transition-duration: 0.5s;
              &.unfold-focus:hover {
                transform: rotate(180deg);
                background: url('../assets/images/systemNav/unfoldhov.png') no-repeat center center;
                background-size: 100% 100%;
                transition-duration: 0.5s;
              }
            }
          }
        }
      }
      .workbench-box.work-down {
        height: auto;
        .workbench-list {
          & > li:nth-child(n + 11) {
            display: block;
          }
        }
      }
      .workbench-box.work-up {
        height: auto;
        .workbench-list {
          & > li:nth-child(n + 11) {
            display: none;
          }
        }
      }
    }
  }
  .right-btnlist {
    position: fixed;
    right: 0;
    bottom: 20%;
    z-index: 99;

    & > button {
      width: 50px;
      height: 50px;
      background: none;
      border: none;
      padding: 0;
      display: block;
      margin-top: 15px;
      position: relative;
      & > img {
        display: block;
        width: 50px;
        height: 50px;
      }
      & > div {
        display: none;
        position: absolute;
        right: 56px;
        top: -14px;
        background: #fff;
        border: 2px solid #efefef;
        font-size: 12px;
        color: #999999;
        padding: 12px 16px;
        border-radius: 5px;
        width: 116px;
        height: 66px;
        text-align: left;
      }
      &.feedback:hover {
        & > div {
          display: block;
        }
      }
    }
  }
}
</style>
