<template>
  <div id="bad-evaluate-situation">
    <common-three-block :title="bigTitle">
      <template #bottom>
        <div  v-loading="loading"  element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(3, 30, 57, 0.8)">
        <div class="my-a">
          <common-icon-title :title="showTitle"></common-icon-title>
          <div class="main-c">
            <div class="left-content">
               <div class="my-k" >

                 <div class="reat-c">
                   <div class="count category">{{ cps_title }}</div>
                   <div class="value vlaue_choose" ref="number"  @click="changeStepColor('number')">{{ CPS }}</div>
                 </div>
                 <div class="split-line"></div>
               </div>
               <div class="my-k">

                 <div class="reat-c">
                   <div class="percent category">{{ cpl_title }}</div>
                   <div class="value vlaue_choose"  ref="interest" @click="changeStepColor('interest')">{{ CPL }}</div>
                 </div>
                 <div class="split-line"></div>
               </div>
            </div>
            <div class="compare-situation">
              <Compare text="同比" :value="TB">
                <template>
                  <span><img src="../../../assets/imgs/evaluate/箭头上.png" v-if="showUpIcon(TB)" alt=""></span>
                  <span><img src="../../../assets/imgs/evaluate/箭头下.png" v-if="showDownIcon(TB)" alt=""></span>
                </template>
              </Compare>
              <Compare text="环比" :value="HB">
                <template>
                  <span><img src="../../../assets/imgs/evaluate/箭头上.png" v-if="showUpIcon(HB)" alt=""></span>
                  <span><img src="../../../assets/imgs/evaluate/箭头下.png" v-if="showDownIcon(HB)" alt=""></span>
                </template>
              </Compare>
              <Compare :text="all_title" :value="CPS_ALL">

              </Compare>
            </div>
            <div class="right-echarts" ref="echarts">

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

<script>
import CommonThreeBlock from "@/components/common/CommonThreeBlock";
import CommonIconTitle from "@/components/common-icon-title/CommonIconTitle";
import Compare from "@/components/compare/Compare";
import {setDepartmentCommentEcharts} from "@/echarts/option";
import {mapEvaluateState} from "@/units/map-units";
export default {
  name: "BadEvaluateSituation",
  components: {Compare, CommonIconTitle, CommonThreeBlock},
  computed:{
    ...mapEvaluateState({
      evaFirstLevel:'evaluateFirstLevel',
      evaSecondLevel:'evaluateSecondLevel',
      evaThirdLevel:'evaluateThirdLevel',
      evaTimer:'evaluateTimer',
    }),
  },
  data(){
    return{
      loading: true,
      listData:[],
      intervalId:null,

      bigTitle:'',
      showTitle:'',
      cps_title:'',
      cpl_title:'',
      all_title:'',
      CPS:'',
      CPL:'',
      TB:'',
      HB:'',
      CPL_MONTH_ON_MONTH:'',
      CPL_YEAR_ON_YEAR:'',
      MONTH_ON_MONTH:'',
      YEAR_ON_YEAR:'',
      CPS_ALL:'',
      chartData:[],
      CPS_chartData:[],
      CPL_chartData:[],
    }
  },

  methods:{
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return;
      }
      let i=0;
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        if(i<this.listData.length){
          i++
        }else{
          i=1
        }
        console.log("刷新" + new Date());
        this.showData(this.listData[i-1]); //加载数据函数
      }, 5000);
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId); //清除计时器
      this.intervalId = null; //设置为null
    },

    showUpIcon(item){
      if(item!=''&&item.substr(0, 1) != '-'){
        return true;
      }else{
        return false;
      }
    },
    showDownIcon(item){
      if(item!=''&&item.substr(0, 1) == '-'){
        return true;
      }else{
        return false;
      }
    },
    commitName(){
      if(this.evaSecondLevel =='1'){
        this.cps_title = '好评数';
        this.cpl_title = '好评率';
        this.all_title = '总好评数';
        this.bigTitle = '好评情况';
      }else{
        this.cps_title = '差评数';
        this.cpl_title = '差评率';
        this.all_title = '总差评数';
        this.bigTitle = '差评情况';
      }
    },
    getList(){
      this.loading=true;
      this.$request({
        url:'/ywtb/selectMatterEvaluation',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
        }
      }).then(response => {
        let useData= []
        let dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
          useData.push(dataArr[i].MATTER_CODE);
        }
        this.listData = useData;
        this.loading=false;
        this.dataRefreh()
      })
    },
    showData(indexCode){
      this.commitName()
      let matterCode = '';
      if(indexCode!=''){
        matterCode = indexCode
      }else{
        matterCode = this.evaThirdLevel
      }
      this.loading=true;
      this.$request({
        url:'/ywtb/selectAllEvaluateByMatterCode',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
          "MATTER_CODE":matterCode,
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows[0]

        if(dataArr!=undefined){
          this.CPS_chartData = dataArr["CHART_DATE"];
          this.CPL_chartData =  dataArr["CPL_CHART_DATE"];
          this.showTitle= dataArr["NAME"];
          this.CPS= dataArr["DATA_COUNT"];
          this.CPL= dataArr["CPL"];
          this.CPL_MONTH_ON_MONTH= dataArr["CPL_MONTH_ON_MONTH"];
          this.CPL_YEAR_ON_YEAR= dataArr["CPL_YEAR_ON_YEAR"];
          this.MONTH_ON_MONTH= dataArr["MONTH_ON_MONTH"];
          this.YEAR_ON_YEAR= dataArr["YEAR_ON_YEAR"];

          this.CPS_ALL=dataArr["PL_CP_NUM"];
        }else{
          this.CPS_chartData = [];
          this.CPL_chartData = [];
          this.showTitle='';
          this.CPS='';
          this.CPL='';
          this.TB='';
          this.HB='';
          this.CPS_ALL='';
        }
        this.$nextTick(() => {
          this.loading=false;
          this.changeStepColor("interest");
        })
      })
    },
    changeStepColor(item){
      if(item =='interest'){
        this.TB= this.CPL_MONTH_ON_MONTH;
        this.HB= this.CPL_YEAR_ON_YEAR;
        this.chartData = this.CPL_chartData;
        this.$refs[item].style.color = '#fdbf00';
        this.$refs['number'].style.color = '#fff'
        setDepartmentCommentEcharts(this.$refs.echarts,this.chartData)
      }else{
        this.TB= this.MONTH_ON_MONTH;
        this.HB= this.YEAR_ON_YEAR;
        this.chartData = this.CPS_chartData;
        this.$refs[item].style.color = '#fdbf00';
        this.$refs['interest'].style.color = '#fff';
        setDepartmentCommentEcharts(this.$refs.echarts,this.chartData)
      }
    }
  },
  mounted() {
    this.getList()
  },
  destroyed(){
    // 在页面销毁后，清除计时器
    this.clear();
  },
  watch: {
    evaFirstLevel(){
      this.clear();
      this.getList()
    },
    evaSecondLevel(){
      this.clear();
      this.getList()
    },
    evaThirdLevel(){
      this.clear();
      this.showData('');
    },
    evaTimer(){
      this.clear();
      this.getList()
    },
  }
}
</script>

<style scoped lang="scss">
#bad-evaluate-situation{
  .my-a{
    padding: 0 20px;
    margin-top: 10px;
  }
  .main-c{

    .right-echarts{
      flex: 1 1  0;
      overflow: hidden;



    }
    display: flex;
    .compare-situation{
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .my-k{

      height: 72px;
      &:last-child{
        margin-top: 10px;
      }


      .reat-c{
        .value{
          font-weight: 700;
          color: #fff;
          font-size: 24px;
        }
        .vlaue_choose:hover{
          cursor: pointer;
          color: #fdbf00;
        }
        .vlaue_chosen{
          color: #fdbf00;
        }
        .category{
          color: #00eaff;
        }
        display: flex;
        flex-direction: column;


        text-align: center;
        justify-content: center;
        width: 72px;

        background: rgba(26, 243, 253, 0.15);
      }
      display: flex;
    }
    .split-line{
      margin-left: 6px;
      width: 4px;
      background: #1af3fd;


    }
  }
 height: 33%;
}
</style>
