<template>
  <div id="echarts-units">

          <div class="main_Content">
            <div class="countInfo">
              <span class="table_info">共有{{totalCount}}条记录</span>
            </div>
            <div class="table_Content">
              <common-three-block :title="commitName">
                <template #bottom>
                  <div  v-loading="loadingFirst" class="echarts-area-load" element-loading-text="数据加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(3, 30, 57, 0.8)">
                  <el-table  ref="unitsTable"  :fit='true'  :border="false" :row-class-name="tableRowClassName" @row-click="selectItem"  highlight-current-row @cell-mouse-enter="mouseEnter"    @cell-mouse-leave="mouseLeave" :data="tableData" :height="tableHeight">

                    <el-table-column prop="UNIT_NAME" label="单位名称">
                      <template slot-scope="scope">
                        <span>{{scope.row.UNIT_NAME.length>15?scope.row.UNIT_NAME.substr(0,15)+"...":scope.row.UNIT_NAME}}</span>
                        <!--               <span v-if="!scope.row.CHOSEN">{{scope.row.NAME.length>15?scope.row.NAME.substr(0,15)+"...":scope.row.NAME}}</span>-->
                        <!--               <span class="wb_button" v-if="(scope.row.WB==1)">网办</span>-->
                        <!--               <span class="qcwb_button" v-if="(scope.row.QCWB==1)">全程网办</span>-->
                        <!--               <span class="hb_button" v-if="(scope.row.HB==1)">好办</span>-->
                        <!--               <span class="kb_button" v-if="(scope.row.KB==1)">快办</span>-->
                      </template>
                    </el-table-column>
                    <el-table-column prop="NUM" :label="commitNameTitle" width="80">
                      <template slot-scope="scope">
                        <span>{{scope.row.NUM}}</span>
                        <!--               <span v-if="!scope.row.CHOSEN">{{scope.row.PL_CP_NUM}}</span>-->
                      </template>
                    </el-table-column>
                    <el-table-column prop="BFB" :label="interestName" width="80">
                      <template slot-scope="scope">
                        <span>{{scope.row.BFB}}</span>
                        <!--               <span v-if="!scope.row.CHOSEN">{{scope.row.CPL}}</span>-->
                      </template>
                    </el-table-column>
                  </el-table>
                  </div>
                </template>
              </common-three-block>
              </div>
            <div class="echarts_Content">

              <common-three-block :title="commitNameChart">
                <template #bottom>
                  <div  v-loading="loading" class="echarts-area-load" element-loading-text="数据加载中"
                        element-loading-spinner="el-icon-loading"
                        element-loading-background="rgba(3, 30, 57, 0.8)">
                  <div class="right-echarts" ref="echarts">

                  </div>
                  </div>
                </template>
              </common-three-block>
              </div>
          </div>



  </div>
</template>

<script>
import CommonThreeBlock from "@/components/common/CommonThreeBlock";
import {mapEvaluateMutations, mapEvaluateState} from "@/units/map-units";
import {setUnitsCommentEcharts} from "@/echarts/option";
let echartsunitrollertimer = ""; // 自动滚动的定时任务
let echartsunitchangetimer = ""; // 自动切换的定时任务
export default {
  name: "EchartsUnits",
  components: {CommonThreeBlock},
  data(){
    return{
      loading: true,
      loadingFirst:true,
      chartList:[
      ],
      getMonth:[],
      tableData:[],
      tableHeight: 0,
      totalCount:0,
      rollPx:1,
      refreshTime:5,
      rollTime:5,
      autoPlay:true,
      intervalId:null,
      chosenUnitId:''
    }
  },
  computed:{
    ...mapEvaluateState({
      evaFirstLevel:'evaluateFirstLevel',
      evaSecondLevel:'evaluateSecondLevel',
      evaThirdLevel:'evaluateThirdLevel',
      evaTimer:'evaluateTimer',
      evaUnit:'evaluateUnit',
      commitName:function (){
        if(this.evaSecondLevel =='1'){
          return '单位好评情况';
        }else{
          return '单位差评情况'
        }
      },
      commitNameChart:function (){
        if(this.evaSecondLevel =='1'){
          return '单位好评趋势';
        }else{
          return '单位差评趋势'
        }
      },
      commitNameTitle:function (){
        if(this.evaSecondLevel =='1'){
          return '好评数量';
        }else{
          return '差评数量'
        }
      },
      interestName:function (){
        if(this.evaSecondLevel =='1'){
          return '好评率';
        }else{
          return '差评率'
        }
      }
    }),
  },
  mounted() {
    this.showData();
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - this.$refs.unitsTable.$el.offsetTop - 65;
      // 监听窗口大小变化
      let ZJWself = this;
      window.onresize = function() {
        ZJWself.tableHeight = window.innerHeight - self.$refs.unitsTable.$el.offsetTop - 65;
      }
    });
    //this.autoRoll(); 默认不滚动
  },
  methods:{
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      let i=0;
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        if(this.tableData.length >0){
          if(i<this.tableData.length){
            i++
          }else{
            i=1
          }
          console.log("刷新" + new Date());
          this.showChartData(this.tableData[i-1].UNIT_CODE); //加载数据函数
        }else{
          this.showChartData(''); //加载数据函数
        }

      }, 5000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },
    selectItem(row){
      let rowIndex = row.UNIT_CODE;
      for(let i=0;i<this.tableData.length;i++){
        if(rowIndex == this.tableData[i].UNIT_CODE){
          this.tableData[i].CHOSEN = true;
          this.stopHight(i);
          this.evaluateUnit(row.UNIT_CODE)
        }else{
          this.tableData[i].CHOSEN = false;
        }
      }
     // this.evaluateThirdLevel(row.MATTER_CODE)
    },
    tableRowClassName({row,rowIndex}){
      console.log(row);
      if(rowIndex%2!==1){
        return 'success-row'
      }else{
        return 'error_row'
      }
    },
    mouseEnter() {
      // if(this.chosenUnitId !=''){
      //   return
      // }else{
      //   // 鼠标进入停止滚动和切换的定时任务
      //   // console.log("jinlailai");
      //   this.autoRoll(true);
      //   this.autoChange(true);
      // }

    },
    // 鼠标离开
    mouseLeave() {
      // if(this.chosenUnitId !=''){
      //   return
      // }else{
      //   // 开启
      //   this.autoRoll();
      //   this.autoChange();
      //   //this.autoChange();
      // }
    },
    showData(){
      this.loading=true;
      this.loadingFirst = true;
      this.$request({
        url:'/ywtb/selectUnitEvaluate',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
        }
      }).then(response => {
        this.loadingFirst = false;
        let dataArr = response.data.msg[0].Rows;
        if(dataArr.length >0){
          for(let i=0;i<dataArr.length;i++){
            dataArr[i].CHOSEN = false;
          }
          this.tableData = dataArr;
          this.totalCount=response.data.msg[0].TotalRowCount;
          this.dataRefreh()
        }else{
          this.loadingFirst=false;
          this.tableData = [];
          this.totalCount=0;
          this.dataRefreh()
        }
      })
    },
    showChartData(CODE){
      let unitName = '';
      if(CODE ==''){
        this.loading=false;
        let dataArr = [];
        unitName = '';
        setUnitsCommentEcharts(this.$refs.echarts,dataArr,unitName)
        return
      }

      for(let i=0;i<this.tableData.length;i++){
        if(CODE ==this.tableData[i].UNIT_CODE){
          unitName = this.tableData[i].UNIT_NAME;
        }
      }
      this.$request({
        url:'/ywtb/selectUnitTrendChartByUnitCount',
        method:'post',
        data:{
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
          "UNIT_CODE":CODE,
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        if(dataArr.length >0){
            this.loading=false;
            setUnitsCommentEcharts(this.$refs.echarts,dataArr,unitName)
        }else{
          this.loading=false;
          let dataArr = [];
          unitName = '';
          setUnitsCommentEcharts(this.$refs.echarts,dataArr,unitName)
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    getmonth(){
      let dataArr = [];
      let data = new Date();
      data.setMonth(data.getMonth()+1, 1)//获取到当前月份,设置月份
      for (let i = 0; i < 12; i++) {
        data.setMonth(data.getMonth() - 1);//每次循环一次 月份值减1
        let m = data.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        dataArr.push(data.getFullYear() + "" + (m))
      }
      this.getMonth = dataArr;
    },
    stopHight(index) {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.unitsTable;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行增加距离顶部距离，实现滚动效果
      // 元素自增距离顶部像素
      // divData.scrollTop += this.rollPx;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      this.$nextTick(() => {
        divData.scrollTop = (index) * 46.94;
      })
    },
    // 设置自动滚动
    autoRoll(stop) {
      if (stop) {
        clearInterval(echartsunitrollertimer);
        return;
      }
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.unitsTable;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
      echartsunitrollertimer = setInterval(() => {
        // 元素自增距离顶部像素
        divData.scrollTop += this.rollPx;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, this.rollTime * 10);
    },
// 设置自动切换
    autoChange(stop) {
      if (stop) {
        clearInterval(echartsunitchangetimer);
        return;
      }
      echartsunitchangetimer = setInterval(() => {
        this.autoPlay = !this.autoPlay;
        this.autoRoll(true); // 先清除定时器
        this.autoRoll(); // 再开启定时器
      }, this.refreshTime * 1000);
    },
    ...mapEvaluateMutations(['evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer','evaluateUnit'])
  },
  watch: {
    evaFirstLevel(){
      this.clear()
      this.evaluateUnit('');
      this.showData()
    },
    evaSecondLevel(){
      this.clear()
      this.evaluateUnit('');
      this.showData();
    },
    evaUnit(val){
      this.clear();
      this.showChartData(val)
    },
    evaTimer(){
      this.clear()
      this.evaluateUnit('');
      this.showData()
    },
  }
}
</script>

<style scoped lang="scss">
#echarts-units{
  width: 100%;
  height: 100%;
.echarts-area-load{
  width: 100%;
  height: 100%;
}
.main_Content{
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  .countInfo{
    position: absolute;
    top:10px;
    right:51%;

    color: #fff;
    font-size: 14px;
    font-weight: normal;
  }
  .table_Content{
    width: 48%;
    padding-left: 1%;
    padding-right: 1%;
    height: 100%;
  }
  .echarts_Content{
    width: 48%;
    padding-left: 1%;
    padding-right: 1%;
    height: 100%;
    .right-echarts{
      height: 100%;
      flex: 1 1  0;
      overflow: hidden;
    }
  }
}

.echarts{
  height: 100%;
  width: 100%;
}
  .el-table{
    border:none;
    ::v-deep{
      .el-table__body tr.current-row>td{
        background: #0e6b9e !important;
        color: #fdbf00;
      }
      .el-table__body tr.el-table__row:hover>td {
        cursor: pointer;
        background: #0e6b9e !important
      }
      .el-table__body tr.el-table__row--striped{
        //background: rgba(0, 77, 153, 0.1) !important;
        background: url("../../../assets/imgs/间隔.png") no-repeat !important;
        background-size:100% 100% !important;
      }
      //.el-table__body td.el-table__cell{
      //  background: transparent !important;
      //}

      td.el-table__cell, th.el-table__cell.is-leaf{
        border: none;
      }
      .el-table__row.el-table__row--striped .td.el-table__cel{
        background: red;
      }
    }
    height: 100% !important;

  }
}
</style>
