<template>
<div id="bad-reason">
  <common-three-block :title="commitName">
    <template #bottom>
      <div  v-loading="loading" class="bad-reason-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 {setHotEcharts} from "@/echarts/option";
import {mapEvaluateMutations, mapEvaluateState} from "@/units/map-units";
export default {
  name: "BadReason",
  components: {CommonThreeBlock},
  computed:{
    ...mapEvaluateState({
      evaFirstLevel:'evaluateFirstLevel',
      evaSecondLevel:'evaluateSecondLevel',
      evaThirdLevel:'evaluateThirdLevel',
      evaTimer:'evaluateTimer',
      commitName:function (){
        if(this.evaSecondLevel =='1'){
          return '好评原因';
        }else{
          return '差评原因'
        }
      }
    }),
  },
  mounted() {
    this.showData()
  },
  data(){
    return{
      loading: true,
      chartData:[]
    }
  },
  methods:{
    showData(){
      this.loading=true;
      this.$request({
        url:'/ywtb/selectReasonsForPoorEvaluation',
        method:'post',
        data:{
           "ORGANIZATION":this.evaFirstLevel,
           "TIME_TYPE":this.evaTimer,
           "SATISFACTION":this.evaSecondLevel,
           "MATTER_CODE":this.evaThirdLevel,
           "pageIndex":'1',
           "pageSize":'10'
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows

        if(dataArr.length > 0){
          this.chartData = [];
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].REASON!=undefined){
              let arr={
                name:dataArr[i].REASON,
                value:dataArr[i].NUM,
              }
              this.chartData.push(arr)
            }
          }
        }else{
          this.chartData = [];
        }
        this.$nextTick(() => {
          this.loading=false;
          setHotEcharts(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">
#bad-reason{
  .bad-reason-load{
    width: 100%;
    height: 100%;
  }
  .echarts{
    height: 100%;
  }
}
</style>
