<template>
 <div id="evaluate-percent">
   <common-three-block title="评估对象占比">
     <template #bottom>
       <div  v-loading="loading" class="evaluate-percent-load" element-loading-text="数据加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(3, 30, 57, 0.8)">
         <div class="echarts" ref="echarts"></div>
       </div>
     </template>
   </common-three-block>
 </div>
</template>

<script>
import CommonThreeBlock from "../../components/common/CommonThreeBlock";
import {setEvaluatePercentEcharts} from "@/echarts/option";
import {mapEvaluateMutations, mapEvaluateState} from "@/units/map-units";
export default {
  name: "EvaluatePercent",
  components: {CommonThreeBlock},
  computed:{
    ...mapEvaluateState({
      evaFirstLevel:'evaluateFirstLevel',
      evaSecondLevel:'evaluateSecondLevel',
      evaThirdLevel:'evaluateThirdLevel',
      evaTimer:'evaluateTimer',
      commitName:function (){
        if(this.evaSecondLevel =='1'){
          return '好评数量';
        }else{
          return '差评数量'
        }
      }
    }),
  },
  data(){
    return{
      loading: true,
      chartData:[],
      dataX:'',
      dataY_count:'',
      dataY_interest:'',
    }
  },
  mounted() {
    this.showData();
  },
  methods:{
    showData(){
      this.loading=true;
      this.$request({
        url:'/ywtb/selectEvaluationObjectNum',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
          "MATTER_CODE":this.evaThirdLevel,
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.dataX = [];
          this.dataY = [];
          this.chartData = [];
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].EVALUATION_OBJECT!=undefined){
              let arr={
                name:dataArr[i].EVALUATION_OBJECT,
                value:dataArr[i].NUM,
              }
              this.chartData.push(arr)
            }
          }
        }else{
          this.chartData = [];
        }
        this.$nextTick(() => {
          this.loading=false;
          setEvaluatePercentEcharts(this.$refs.echarts,this.chartData)
        })
      })
    },
    ...mapEvaluateMutations(['evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer'])
  },
  watch: {
    evaFirstLevel(){
      this.showData()
    },
    evaSecondLevel(){
      this.showData();
    },
    evaThirdLevel(){
      this.showData();
    },
    evaTimer(){
      this.showData()
    },
  }
}
</script>

<style scoped lang="scss">
 #evaluate-percent{
   .evaluate-percent-load{
     width:100%;
     height: 100%;
   }
   .echarts{
     height: 100%;
   }
 }
</style>
