<template>
  <div class="h100 block" id="handle-status">
    <div class="black-title">提醒及督办</div>
    <div class="status_content">
      <div class="detail_content">
        <div class="detail_left">
          <div class="left_part" @click="showBasicAnalysis('1.2')">
            <span class="single_title">受理提醒</span>
            <span class="single_title">{{acceptRemind}}</span>
          </div>
          <div class="left_part">
            <span class="single_title" @click="showBasicAnalysis('2.2')">办结提醒</span>
            <span class="single_title">{{endRemind}}</span>
          </div>
        </div>
        <div class="detail_middle">
          <div class="middle_part">
            <span>提醒</span>
          </div>
          <div class="middle_part">
            <span>督办</span>
          </div>
        </div>
        <div class="detail_right">
          <div class="right_part" @click="showBasicAnalysis('1.1')">
            <span class="single_title">受理督办</span>
            <span class="single_title">{{acceptUrge}}</span>
          </div>
          <div class="right_part" @click="showBasicAnalysis('2.1')">
            <span class="single_title">办结督办</span>
            <span class="single_title">{{endUrge}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: "HandleStatus",
  data() {
    return {
      list:[
      ],
      acceptRemind:'0',
      endRemind:'0',
      acceptUrge:'0',
      endUrge:'0',
    }
  },
  mounted(){
    this.$request({
      url:'/YWTBApi/getRemindAllCount',
      method:'post',
      data:{
      }
    }).then(response => {
      var dataArr = response.data.msg[0].Rows;
      for(let i=0;i<dataArr.length;i++){
        if(dataArr[i].BANJIAN_STATE =='1.1'){
          this.acceptUrge = dataArr[i].DATA_COUNT;
        }else if(dataArr[i].BANJIAN_STATE =='1.2'){
          this.acceptRemind = dataArr[i].DATA_COUNT;
        }else if(dataArr[i].BANJIAN_STATE =='2.1'){
          this.endUrge = dataArr[i].DATA_COUNT;
        }else if(dataArr[i].BANJIAN_STATE =='2.2'){
          this.endRemind = dataArr[i].DATA_COUNT;
        }
      }
    })
  },
  filters:{
    stateType(state){
      let obj = {
        '1':'网上申报',
        '2':'网上预审',
        '3':'收件',
        '4':'补正',
        '5':'受理',
        '6':'特别程序',
        '7':'决定',
        '8':'制发证',
        '9':'审查',
      }
      return obj[state]
    }
  },
  methods:{
    showBasicAnalysis(index){
      console.log(index);
      this.$router.push('/origion/handleSituation');
      this.handleSituationRefresh(false);
      this.$nextTick(() => {
        this.handleSituationSingleChange([
          {
            name:'handleSituationOptimize',
            value:index
          },
        ])
      })
    },
    ...mapMutations(['handleSituation','handleSituationRefresh','handleSituationSingleChange'])
  }
}
</script>

<style scoped lang="scss">
#handle-status{
  display: flex;
  overflow: hidden;
  flex-direction: column;
  .status_content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .detail_content{
      width: 513px;
      height: 90%;
      background: url("../../assets/imgs/提醒及督办背景.png") no-repeat ;
      background-size: 100% 100%;
      display: flex;
      .detail_left{
        width: 46.5%;
        height:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .left_part{
          cursor: pointer;
          width: 100%;
          height:50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          >span{
            font-size: 25px;
            color: #fff;
          }

        }
      }
      .detail_middle{
        width: 10%;
        height:100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .middle_part{
          width: 100%;
          height:50%;
          display: flex;
          justify-content: center;
          align-items: center;
          >span{
            width: 100%;
            word-wrap: break-word;
            letter-spacing: 5px;
            font-size: 18px;
            color: #fff;
          }
        }
      }
      .detail_right{
        width: 45%;
        height:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .right_part{
          cursor: pointer;
          width: 100%;
          height:50%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          >span{
            font-size: 25px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
