<template>
  <div id="data-sta" class="block h100">
    <div class="black-title">办件情况统计</div>
    <div class="detail_content">
      <div class="top_part">
        <div class="single_part" v-for="(item,index) in topList"  @click="showHandleSituation(item.id)" :key="index">
          <div class="single_num">
            <span>{{item.value}}</span>
          </div>
          <div class="single_icon">
            <span class="single_title">
              {{item.name}}
            </span>
          </div>
        </div>
      </div>
      <div class="bottom_part">
        <div class="single_part" v-for="(item,index) in bottomList.slice(0,3)" @click="showBasicAnalysis(item)" :key="index">
<!--          <div class="single_icon"></div>-->
          <div class="single_content">
            <span class="single_title">{{item.name}}</span>
            <span class="single_num">{{item.value}}</span>
          </div>
          <el-divider  direction="vertical"></el-divider>
        </div>
        <div class="single_part" v-for="(item,index) in bottomList.slice(3,4)" @click="showBasicAnalysis(item)" :key="index">
          <!--          <div class="single_icon"></div>-->
          <div class="single_content">
            <span class="single_title">{{item.name}}</span>
            <span class="single_num">{{item.value}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations} from "vuex";

export default {
  name: "DataSta",
  data(){
     return{
       topList:[
         {
           id:'1',
           code:'Applied',
           name:'已申请',
           value:'0'
         },
         {
           id:'2',
           code:'Pending',
           name:'待受理',
           value:'0'
         },
         {
           id:'3',
           code:'Accepted',
           name:'已受理',
           value:'0'
         },
         {
           id:'4',
           code:'toBeDecided',
           name:'待决定',
           value:'0'
         },
         {
           id:'5',
           code:'Completed',
           name:'已办结',
           value:'0'
         }
       ],
       bottomList:[
         {
           name:'最大办件时间',
           code:'MAX_TIME',
           code_use:'1',
           value:'0'
         },
         {
           name:'平均办件时间',
           code:'AVG_TIME',
           code_use:'1',
           value:'0'
         },
         {
           name:'受理可优化',
           code:'AVG_SL_OPTIMIZATION',
           code_use:'1',
           value:'0'
         },
         {
           name:'办结可优化',
           code:'AVG_BJ_OPTIMIZATION',
           code_use:'2',
           value:'0'
         },

       ]
     }
  },
  mounted() {
    this.$request({
      url:'/YWTBApi/getPhaseNumberList',
      method:'post',
      data:{
      }
    }).then(response => {
      var dataArr = response.data.msg[0].Rows[0];
      for(let obj in dataArr){
        for(let j=0;j<this.topList.length;j++){
          if(this.topList[j].code ==obj){
            this.topList[j].value = dataArr[obj];
          }
        }
      }
    })
    this.$request({
      url:'/YWTBApi/getBanJianTime',
      method:'post',
      data:{
      }
    }).then(response => {
      var dataArr = response.data.msg[0].Rows[0];
      for(let obj in dataArr){
        for(let j=0;j<this.bottomList.length;j++){
          if(this.bottomList[j].code ==obj){
            if(obj=="MAX_TIME"||obj=="AVG_TIME"){
              this.bottomList[j].value = dataArr[obj] +"H";
            }else{
              this.bottomList[j].value = (dataArr[obj] *24).toFixed(2)+"H";
            }

          }
        }
      }
    })
  },
  methods:{
    showBasicAnalysis(item){
      if(item.code=="AVG_TIME"||item.code=="MAX_TIME"){
        this.$router.push('/origion/handleSituation');
        this.handleSituationRefresh(false);
        this.$nextTick(() => {
          this.handleSituationSingleChange([
            {
              name:'handleSituationSortTime',
              value:item.code_use
            },
          ])
        })
      }else{
        this.$router.push('/origion/handleAnalysis');
        this.analysisRefresh(false);
        this.$nextTick(() => {
          this.analysisSingleChange([
            {
              name:'analysisTimer',
              value:'365'
            },
            {
              name:'analysisUrgeType',
              value:'SL_TX'
            },
            {
              name:'analysisOptimizeType',
              value:item.code_use
            },
          ])
        })
      }
    },
    showHandleSituation(index){
        this.$router.push('/origion/handleSituation');
        this.handleSituationRefresh(false);
        this.$nextTick(() => {
          //this.handleSituationThirdLevel(index);
          this.handleSituationSingleChange([
            {
              name:'handleSituationThirdLevel',
              value:index
            },
          ])
        })


    },
    ...mapMutations(['handleSituationRefresh','handleSituation','handleSituationSingleChange',
      'analysis','analysisRefresh','analysisSingleChange'])
  }
}
</script>

<style scoped lang="scss">
#data-sta{
 .detail_content{
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   .top_part{
     width: 100%;
     height: 45%;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     .single_part{
       width: 100px;
       height:100%;
       cursor: pointer;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       .single_num{
         height: 20%;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         >span{
           color: #fff;
           font-size: 22px;
           font-weight: bold;
           background-image:-webkit-linear-gradient(bottom,#1ec2ff,#0f81ff);
           -webkit-background-clip:text;
           -webkit-text-fill-color:transparent;
         }
       }
       .single_icon{
         width: 100%;
         height: 70px;
         background: url("../../assets/imgs/组件.png") no-repeat;
         background-size: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         .single_title{
           font-size: 16px;
           color: #fff;
         }
       }
     }
   }
   .bottom_part{
     width: 100%;
     height: 45%;
     display: flex;
     justify-content: space-evenly;
     align-items: center;
     //.el-divider{
     //  background-color: #00d8ff;
     //  font-weight: bold;
     //}
     .el-divider--vertical{
       height: 60%;
       background: 0 0;
       border-left: 1px dashed #00d8ff;
     }
     .single_part{
       width: 25%;
       height:100%;
       display: flex;
       cursor: pointer;
       align-items: center;
       justify-content: center;
       .single_icon{
         width: 60px;
         height: 60px;
         background: url("../../assets/imgs/办件时间.png") no-repeat;
         background-size: 100%;
       }

       .single_content{
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         line-height: 24px;
         .single_title{
           font-size: 16px;
           color: #fff;
         }
         .single_num{
           font-size: 22px;
           font-weight: bold;
           background-image:-webkit-linear-gradient(bottom,#1ec2ff,#0f81ff);
           -webkit-background-clip:text;
           -webkit-text-fill-color:transparent;
         }
       }
     }
   }
 }
}
</style>
