<template>
  <!-- 工作台 -->
  <div id="workbench-wrap">
    <div class="left">
      <ul class="topList">
        <li v-for="(item, index) in topData" :key="index" @click="topFun(item.title)">
          <div class="nums">
            <div>{{ item.num }}</div>
            <h2>{{ item.title }}</h2>
          </div>
          <img :src="item.imgUrl" alt="">
        </li>
      </ul>
      <div class="left-bottom" id="left-bottom">
        <Title :title="'主数据维护看板'" />
        <div class="main">
          <div v-if="!echartsVisible" id="echarts-noData">
            <div>
              <div class="imgIcon"></div>
              <h2>暂无相关数据</h2>
            </div>
          </div>
          <div v-if="echartsVisible" class="left-chart">
            <div v-if="echartsVisible" class="btn-list">
              <button
                :class="{ active: isActiveMonth }"
                @click="echartsDataChange('month')">
                本月
              </button>
              <button
                :class="{ active: isActiveYear }"
                @click="echartsDataChange('year')">
                本年
              </button>
            </div>
            <LeftEcharts
              ref="leftEcharts"
              id="LeftEcharts"
              :containerSize="{width:'100%',height:'100%'}"
              :dataSource="leftDataSource" />
          </div>
          <div v-if="echartsVisible" class="right-chart">
            <RightEcharts
              ref="rightEcharts"
              id="RightEcharts"
              :containerSize="{width:'100%',height:'100%'}"
              :dataSource="rightDataSource" />
          </div>
        </div>

      </div>
    </div>
    <div class="right">
      <Title :title="'快捷入口'" />
      <RightCollapse />
    </div>

    <a-modal
      class="popupBox"
      :width="1000"
      v-model="modalVisible"
      :title="modalTitle"
      :footer="null"
      :destroyOnClose="true"
      @ok="handleOk">
      <ApprovalPend
        v-if="modalTitle==='审批待办'"
        ref="approvalModel"
        @handleOk="handleOk"
      />
      <NoticeInfor
        v-if="modalTitle==='通知提醒'"
        ref="noticeModel"
        @handleOk="handleOk"
      />
    </a-modal>

  </div>
</template>

<script type="text/ecmascript-6">
import LeftEcharts from './components/LeftEcharts'
import RightEcharts from './components/RightEcharts'
import Title from './components/Title'
import ApprovalPend from './components/ApprovalPend'
import NoticeInfor from './components/NoticeInfor'
import RightCollapse from './components/RightCollapse'

import { getStatistics, getMdSummary } from '@/api/index/index'
export default {
  components: {
    LeftEcharts,
    RightEcharts,
    Title,
    ApprovalPend,
    NoticeInfor,
    RightCollapse
  },
  data() {
    return {
      modalTitle: '',
			modalVisible: false,
      isActiveMonth: true,
      isActiveYear: false,
      topData: [
        {
          title: '审批待办', // toApproveNum
          status: 'toApproveNum',
          num: '',
          imgUrl: require('../assets/images/index/icon1.png')
        },
        {
          title: '通知提醒', // noticeNum
          status: 'noticeNum',
          num: '',
          imgUrl: require('../assets/images/index/icon2.png')
        },
        {
          title: '数据标准', // standardFileNum
          status: 'standardFileNum',
          num: '',
          imgUrl: require('../assets/images/index/icon3.png')
        }
      ],
      leftDataSource: {},
      rightDataSource: [
        {
          value: '',
          name: '通过率',
          title: { offsetCenter: ['8%', '158%'] },
          detail: { offsetCenter: ['8%', '125%'] }
        }
      ],
      echartsVisible: true

    }
  },

  mounted() {
    this.getTopList()
    this.getMdSummary('month')
  },
  methods: {
    topFun(i) {
      if (i === '审批待办') {
        this.modalVisible = true
        this.modalTitle = '审批待办'
      } else if (i === '通知提醒') {
        this.modalVisible = true
        this.modalTitle = '通知提醒'
      } else if (i === '数据标准') {
        this.$router.push({
          path: '/standard/index'
        })
      }
    },
    handleOk() {
			this.modalVisible = false
		},
    echartsDataChange(e) {
      if (e === 'month') {
        this.isActiveMonth = true
        this.isActiveYear = false
        this.getMdSummary('month')
      } else if (e === 'year') {
        this.getMdSummary('year')
        this.isActiveMonth = false
        this.isActiveYear = true
      }
    },
    getMdSummary(type) {
      const { leftDataSource, rightDataSource } = this
      getMdSummary({ flag: type }).then((res) => {
        leftDataSource.xData = res.modelNameStr
        leftDataSource.addData = res.add
        leftDataSource.approveData = res.approve
        leftDataSource.editData = res.edit
        // console.log('this.leftDataSource', type, res.add)

        const addDataBool = res.add.length
        const approveDataBool = res.approve.length
        const editDataBool = res.edit.length
        if (addDataBool > 0 && approveDataBool > 0 && editDataBool > 0) {
          this.echartsVisible = true
        } else {
          this.echartsVisible = false
        }

        this.$set(this.$data, 'leftDataSource', leftDataSource)
				this.$refs.leftEcharts.initEchartsData()

        rightDataSource[0].value = res.passPercent
				this.$refs.rightEcharts.initEchartsData()
      })
    },
    getTopList() {
      getStatistics().then((res) => {
        if (res.code === 200) {
          const resData = res.data
          this.topData.forEach((item) => {
             switch (item.status) {
              case 'toApproveNum':
                item.num = resData.toApproveNum
                break
              case 'noticeNum':
                item.num = resData.noticeNum
                break
              case 'standardFileNum':
                item.num = resData.standardFileNum
                break
            }
          })
          // console.log('.........', res.data)
        }
      })
    }

  },

  watch: {
    activeKey(key) {
      console.log(key)
    }

  }
}
</script>

<style lang='less' scoped>
#workbench-wrap {
  padding: 20px 20px;
  display: grid;
  grid-template-columns: 3fr 1.3fr;
  grid-gap: 0 15px;
  height: calc(100vh - 175px);
  box-sizing: border-box;
  overflow: hidden;

  .left {
    width: 100%;
    height: 100%;
    .topList {
      display: flex;
      padding: 0;
      justify-content: space-between;
      align-items: center;
      & > li {
        width: 32.33%;
        height: 170px;
        background: #ffffff;
        box-sizing: border-box;
        padding: 25px 60px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: url('../assets/images/index/1.png') no-repeat center center;
        background-size: 100% 100%;
        cursor: pointer;
        & > img {
          width: 65px;
        }
        & > .nums {
          text-align: center;
          & > h2 {
            font-size: 20px;
            color: #ffffff;
            opacity: 0.9;
          }
          & > div {
            font-size: 40px;
            color: #ffffff;
            font-weight: bold;
          }
        }
      }
      & > li:nth-child(2) {
        background: url('../assets/images/index/2.png') no-repeat center center;
        background-size: 100% 100%;
      }
      & > li:nth-child(3) {
        background: url('../assets/images/index/3.png') no-repeat center center;
        background-size: 100% 100%;
      }
    }
    .left-bottom {
      width: 100%;
      height: calc(100% - 190px);
      margin-top: 20px;
      background: #ffffff;
      border-radius: 5px;
      box-sizing: border-box;
      padding: 25px 0;
      box-shadow: 0 0 10px 0 rgba(17, 32, 65, 0.08);

      .title {
        font-family: SourceHanSansCN-Medium;
        font-size: 18px;
        color: #171d33;
        margin-bottom: 20px;
        border-left: 4px solid #3b75f5;
        padding-left: 20px;
        margin-bottom: 50px;
      }

      .main {
        padding: 0 40px 0;
        height: calc(100% - 90px);
        display: flex;
        align-items: center;
        justify-content: space-between;

        #echarts-noData{
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          & > div{
            .imgIcon{
              width: 180px;
              height: 180px;
              background: url('../assets/images/index/no.png') no-repeat center center;
              background-size: 100% 100%;
              margin: -100px auto 15px;
              opacity: 0.4;
            }
            h2{
              text-align: center;
              font-weight: normal;
              font-size: 18px;
              color: #999;
              opacity: 0.4;
            }

          }

        }

        .left-chart {
          width: 58%;
          height: 100%;
          position: relative;
          .btn-list {
            text-align: center;
            position: absolute;
            width: 100%;
            top: -20px;

            & > button {
              width: 60px;
              height: 26px;
              line-height: 22px;
              text-align: center;
              font-size: 16px;
              color: #666;
              border-radius: 13px;
              background: #fff;
              margin: 0 15px;
              border: solid 1px #bdbdbd;
              &:hover,
              &.active {
                color: #239ef7;
                border: solid 1px #239ef7;
              }
            }
          }
        }
        .right-chart {
          width: 36%;
          height: 100%;
        }
      }
    }
  }
  .right {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0 rgba(17, 32, 65, 0.08);
    border-radius: 5px;
    padding: 25px 0 0;
    .title {
      margin-bottom: 20px;
    }

  }

}
</style>
