<template>
  <div id="analysis-total-handle"  class="block h100">
    <div class="black-title">办件趋势</div>
    <div  v-loading="loading"  element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(3, 30, 57, 0.8)">
      <div   class="flex3 echarts" ref="echarts"></div>
<!--      <div v-if="$store.state.analysisThirdLevel!=''&&$store.state.analysisForthLevel==''" :key="2" class="flex3 echarts" ref="echarts"></div>-->

<!--      <div v-if="$store.state.analysisForthLevel!=''&&$store.state.analysisFifthLevel==''" :key="3" class="flex3 echarts" ref="echarts"></div>-->
<!--      <div v-if="$store.state.analysisFifthLevel==''" :key="4" class="flex3 echarts" ref="echarts"></div>-->
    </div>
  </div>
</template>

<script>
import {setAnalysisTotalHandle} from "@/echarts/option";
import {mapMutations, mapState} from 'vuex';
import * as echarts from "echarts";
export default {
  name: "AnalysisTotalHandle",
  computed:{
    ...mapState({
      analysisObject:'analysis',
      reFresh:'analysisRefresh',
    })
  },
  data(){
    return{
      loading: true,
      basicList:[],
      dataX:[],
      dataY_COUNT:[],
      dataY_MONTH:[],
      dataY_YEAR:[],
      itemList:[],
      situationList:[],
    }
  },
  mounted() {
    this.typeShow()
  },
  methods:{
    typeShow(){
      if(this.analysisObject['analysisThirdLevel']==''&& this.analysisObject['analysisForthLevel']==''){
       this.basicShow()
      }else if(this.analysisObject['analysisThirdLevel']!=''&&this.analysisObject['analysisForthLevel']==''){
        this.basicShow()
      }else if(this.analysisObject['analysisForthLevel']!=''&&this.analysisObject['analysisFifthLevel']==''){
        this.itemShow();
      }else if(this.analysisObject['analysisFifthLevel']!=''){
        this.situationShow();
      }
    },
    basicShow(){
      this.loading=true;
      let timeUrl ='';
      if(this.analysisObject['analysisTimer'] =='30'){
        timeUrl = '/YWTBApi/queryBanjianTrendInfoDay';
      }else{
        timeUrl = '/YWTBApi/queryBanjianTrendInfo';
      }
      this.$request({
        url:timeUrl,
        method:'post',
        data:{
          'TYPE':this.analysisObject['analysisThirdLevel'],
          "DATA_TYPE":this.analysisObject['analysisFirstLevel'],
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
          // "TYPE":this.thirdLevel,
          // "DATA_TYPE":this.firstLevel,
          // "ORGANIZATION":this.secondLevel,
          // "TYPE":this.thirdLevel,
          // "ORGANIZATION":this.secondLevel,
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        this.basicList = dataArr;
        this.dataX= [];
        this.dataY_COUNT = [];
        this.dataY_MONTH=[];
        this.dataY_YEAR= [];
        for(let i=0;i<this.basicList.length;i++){
          if(this.analysisObject['analysisTimer'] =='30'){
            if(this.basicList[i].DATA_TIME.length ==8){
              this.dataX.push(this.basicList[i].DATA_TIME.substring(0,4) +'-'+this.basicList[i].DATA_TIME.substring(4,6)+'-'+this.basicList[i].DATA_TIME.substring(6,8));
            }else{
              this.dataX.push(this.basicList[i].DATA_TIME);
            }
            this.dataY_COUNT.push(this.basicList[i].DATA_COUNT);
            this.dataY_MONTH.push(this.basicList[i].DAYONDAY_PER.replace("%",""));
            this.dataY_YEAR.push(this.basicList[i].YEARONYEAR_PER.replace("%",""));

          }else{
            if(this.basicList[i].OPERATION_TIME1.length == 6){
              this.dataX.push(this.basicList[i].OPERATION_TIME1.substring(0,4) +'-'+this.basicList[i].OPERATION_TIME1.substring(4,6));
            }else{
              this.dataX.push(this.basicList[i].OPERATION_TIME1);
            }
            this.dataY_COUNT.push(this.basicList[i].DATA_COUNT);
            this.dataY_MONTH.push(this.basicList[i].MONTHONMONTH.replace("%",""));
            this.dataY_YEAR.push(this.basicList[i].YEARONYEAR.replace("%",""));
          }
        }
        this.$nextTick(() => {
          this.loading=false;
          let ele = this.$refs.echarts
          setAnalysisTotalHandle(ele,this.dataX,this.dataY_COUNT,this.dataY_MONTH,this.dataY_YEAR)
          echarts.init(ele).on('click',(params)=> {
            console.log(params.dataIndex)
            this.$router.push('/origion/handleSituation');
            this.analysisRefresh(true);
          })
        })
      })
    },

    itemShow(){
      let timeUrl ='';
      if(this.analysisObject['analysisTimer']=='30'){
        timeUrl = '/YWTBApi/queryBanjianTrendInfoDay';
      }else{
        timeUrl = '/YWTBApi/queryBanjianTrendInfo';
      }
      this.loading=true;
      this.$request({
        url:timeUrl,
        method:'post',
        data:{
          'TYPE':this.analysisObject['analysisThirdLevel'],
          "DATA_TYPE":this.analysisObject['analysisFirstLevel'],
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
           "MATTER_CODE":this.analysisObject['analysisForthLevel'],
          // "ORGANIZATION":this.secondLevel,
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        this.basicList = dataArr;
        this.dataX= [];
        this.dataY_COUNT = [];
        this.dataY_MONTH=[];
        this.dataY_YEAR= [];
        for(let i=0;i<this.basicList.length;i++){
          if(this.analysisObject['analysisTimer']=='30'){
            if(this.basicList[i].DATA_TIME.length ==8){
              this.dataX.push(this.basicList[i].DATA_TIME.substring(0,4) +'-'+this.basicList[i].DATA_TIME.substring(4,6)+'-'+this.basicList[i].DATA_TIME.substring(6,8));
            }else{
              this.dataX.push(this.basicList[i].DATA_TIME);
            }
            this.dataY_COUNT.push(this.basicList[i].DATA_COUNT);
            this.dataY_MONTH.push(this.basicList[i].DAYONDAY_PER.replace("%",""));
            this.dataY_YEAR.push(this.basicList[i].YEARONYEAR_PER.replace("%",""));
          }else{
            if(this.basicList[i].OPERATION_TIME1.length == 6){
              this.dataX.push(this.basicList[i].OPERATION_TIME1.substring(0,4) +'-'+this.basicList[i].OPERATION_TIME1.substring(4,6));
            }else{
              this.dataX.push(this.basicList[i].OPERATION_TIME1);
            }
            this.dataY_COUNT.push(this.basicList[i].DATA_COUNT);
            this.dataY_MONTH.push(this.basicList[i].MONTHONMONTH.replace("%",""));
            this.dataY_YEAR.push(this.basicList[i].YEARONYEAR.replace("%",""));
          }

        }
        this.$nextTick(() => {
          this.loading=false;
          let ele = this.$refs.echarts
          setAnalysisTotalHandle(ele,this.dataX,this.dataY_COUNT,this.dataY_MONTH,this.dataY_YEAR)
          echarts.init(ele).on('click',(params)=> {
            console.log(params.dataIndex)
            this.$router.push('/origion/handleSituation');
            this.analysisRefresh(true);
          })
        })
      })
    },
    situationShow(){
      let timeUrl ='';
      if(this.analysisObject['analysisTimer']=='30'){
        timeUrl = '/YWTBApi/queryBanjianTrendInfoDay';
      }else{
        timeUrl = '/YWTBApi/queryBanjianTrendInfo';
      }
      this.loading=true;
      this.$request({
        url:timeUrl,
        method:'post',
        data:{
          'TYPE':this.analysisObject['analysisThirdLevel'],
          "DATA_TYPE":this.analysisObject['analysisFirstLevel'],
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
          "SITUATION_CODE":this.analysisObject['analysisFifthLevel'],
          // "TYPE":this.thirdLevel,
          // "DATA_TYPE":this.firstLevel,
          // "ORGANIZATION":this.secondLevel,
          // "SITUATION_CODE":this.fifthLevel,
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows;
        this.basicList = dataArr;
        this.dataX= [];
        this.dataY_COUNT = [];
        this.dataY_MONTH=[];
        this.dataY_YEAR= [];
        for(let i=0;i<this.basicList.length;i++){
          if(this.analysisObject['analysisTimer']=='30'){
            this.dataX.push(this.basicList[i].DATA_TIME);
            this.dataY_COUNT.push(this.basicList[i].DATA_COUNT);
            this.dataY_MONTH.push(this.basicList[i].DAYONDAY_PER.replace("%",""));
            this.dataY_YEAR.push(this.basicList[i].YEARONYEAR_PER.replace("%",""));
          }else{
            this.dataX.push(this.basicList[i].OPERATION_TIME1);
            this.dataY_COUNT.push(this.basicList[i].DATA_COUNT);
            this.dataY_MONTH.push(this.basicList[i].MONTHONMONTH.replace("%",""));
            this.dataY_YEAR.push(this.basicList[i].YEARONYEAR.replace("%",""));
          }
        }
        this.$nextTick(() => {
          this.loading=false;
          let ele = this.$refs.echarts
          setAnalysisTotalHandle(ele,this.dataX,this.dataY_COUNT,this.dataY_MONTH,this.dataY_YEAR)
          echarts.init(ele).on('click',(params)=> {
            console.log(params.dataIndex)
            this.$router.push('/origion/handleSituation');
            this.analysisRefresh(true);
          })
        })
      })
    },
    ...mapMutations(['analysis','analysisRefresh','analysisSingleChange'])
  },
  watch: {
    analysisObject(){
      this.typeShow()
    },
  }
}
</script>

<style scoped lang="scss">
#analysis-total-handle{
  .black-title{
    height: 32px;
    display: flex;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    justify-content: center;
    align-items: center;

  }
}

</style>
