<template>
  <div id="table-units">
    <common-three-block :title="commitName">
      <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="echarts_Content">
            <div class="echarts-arr" ref="scroll-list">
              <div class="echarts" v-for="item in chartList" :key="item.rn" :ref="item.rn"></div>
            </div>
          </div>
        </div>
      </template>
    </common-three-block>

  </div>
</template>

<script>
import CommonThreeBlock from "@/components/common/CommonThreeBlock";
import {setDepartmentAreaEcharts} from "@/echarts/option";
import {rescrollFun, scrollWidthFun} from "@/scroll";
import {mapEvaluateMutations, mapEvaluateState} from "@/units/map-units";
export default {
  name: "TableUnits",
  components: {CommonThreeBlock},
  data(){
    return{
      loading: true,
      chartList:[
      ],
      getMonth:[],
    }
  },
  computed:{
    ...mapEvaluateState({
      evaFirstLevel:'evaluateFirstLevel',
      evaSecondLevel:'evaluateSecondLevel',
      evaThirdLevel:'evaluateThirdLevel',
      evaTimer:'evaluateTimer',
      commitName:function (){
        if(this.evaSecondLevel =='1'){
          return '各部门好评情况';
        }else{
          return '各部门差评情况'
        }
      }
    }),
  },
  mounted() {
    this.showData()
  },
  methods:{
    showData(){
      this.loading=true;
      this.getmonth();
      this.$request({
        url:'/ywtb/selectEvaluateChartByUnitCodun',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.chartList = [];
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].UNIT_NAME!=undefined){
              let Arr = {
                rn:(i+1).toString(),
                unit:dataArr[i].UNIT_NAME,
                chartData:dataArr[i].DATALIST
              }
              this.chartList.push(Arr);
            }
          }

          this.$nextTick(() => {
            this.loading=false;
            for(let j=0;j<this.chartList.length;j++){
              setDepartmentAreaEcharts(this.$refs[this.chartList[j].rn][0],this.chartList[j].unit,this.chartList[j].chartData);
            }
            this.stopTimer();
            if(this.chartList.length > 0){
              this.startTimer()
            }
          })
        }else{
          this.chartList = [];
        }
      })
    },
    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;
    },
    startTimer(){
      if(this.$refs['scroll-list'].clientWidth * 1 > this.$refs['scroll-list'].parentElement.clientWidth * 1) {
        scrollWidthFun(this.$refs['scroll-list'], 'left', -this.$refs['scroll-list'].clientWidth + this.$refs['scroll-list'].parentElement.clientWidth)
      }
    },
    stopTimer(){
      if(this.$refs['scroll-list']!=undefined)
        rescrollFun(this.$refs['scroll-list'],'left')
    },
    ...mapEvaluateMutations(['evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer'])
  },
  watch: {
    evaFirstLevel(){
      this.showData()
    },
    evaSecondLevel(){
      this.showData();
    },
    evaThirdLevel(){
      this.showData();
    },
    evaTimer(){
      this.showData()
    },
  }
}
</script>

<style scoped lang="scss">
#table-units{
  height: 100%;
  .echarts-area-load{
    width: 100%;
    height: 100%;
  }
  .echarts_Content{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  .echarts-arr{
    height: 100%;
    //width: 100%;
    position: absolute;
    display: flex;
    overflow: hidden;
  }
  .echarts{
    height: 100%;
    width: 300px;
  }
}
</style>
