<template>
  <div class="h100" id="evaluate-card">
    <div class="black-title">电子证照</div>
    <div class="detail_content">
      <div class="single_part" v-for="(item,index) in list" @click="showCommit(item.code)" :key="index" >
        <div :class="item.class">

        </div>
        <div class="single_right">
          <span class="single_title">{{item.name}}</span>
          <span class="single_num">{{item.value}}</span>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapEletricCardMutations} from "@/units/map-units";

export default {
  name: "EvaluateCard",
  data() {
    return {
      list:[
        {
          code:'ALL_YZ_NUM',
          name:'近一年用证次数',
          value:'0',
          class:'single_left1'
        },
        {
          code:'ALL_ZZ_NUM',
          name:'近一年制证次数',
          value:'0',
          class:'single_left2'
        },
        {
          code:'SEVEN_YZ_NUM',
          name:'7日用证次数',
          value:'0',
          class:'single_left3'
        },
        {
          code:'SEVEN_ZZ_NUM',
          name:'7日制证次数',
          value:'0',
          class:'single_left4'
        },
      ]
    }
  },
  mounted(){
    this.$request({
      url:'/ywtb/selectYwtbLicenseStatisticeHomePage',
      method:'post',
      data:{
      }
    }).then(response => {
      var dataArr = response.data.msg[0].Rows[0];
      for(let obj in dataArr){
        for(let i=0;i<this.list.length;i++){
          if(obj == this.list[i].code){
            this.list[i].value =dataArr[obj];
          }
        }
      }
    })
  },
  methods:{
    showCommit(code){
      if(code=='ALL_YZ_NUM'){
        this.$router.push('/origion/electricCard');
        this.$nextTick(() => {
          this.eletricCardCurrentId('4')
        })
      }else if(code=='ALL_ZZ_NUM'){
        this.$router.push('/origion/electricCard');
        this.$nextTick(() => {
          this.eletricCardCurrentId('5')
        })
      }else if(code=='SEVEN_ZZ_NUM'){
        this.$router.push('/origion/electricCard');
        this.$nextTick(() => {
          this.eletricCardCurrentId('1')
        })
      }else{
        this.$router.push('/origion/electricCard');
        this.$nextTick(() => {
          this.eletricCardCurrentId('2')
        })

      }
    },
    ...mapEletricCardMutations(['eletricCardCurrentId'])
  }
}
</script>

<style scoped lang="scss">
#evaluate-card{
  display: flex;
  overflow: hidden;
  flex-direction: column;
  .detail_content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .single_part{
      width: 50%;
      height: 50%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .single_left1{
        width: 76px;
        height: 82px;
        background: url("../../assets/imgs/累计用证次数.png") no-repeat;
        background-size: 100%;
      }
      .single_left2{
        width: 76px;
        height: 82px;
        background: url("../../assets/imgs/累计制证次数.png") no-repeat;
        background-size: 100%;
      }
      .single_left3{
        width: 76px;
        height: 82px;
        background: url("../../assets/imgs/累计用证次数.png") no-repeat;
        background-size: 100%;
      }
      .single_left4{
        width: 76px;
        height: 82px;
        background: url("../../assets/imgs/累计制证次数.png") no-repeat;
        background-size: 100%;
      }
      .single_right{
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .single_num{
          color: #fff;
          font-size: 40px;
          font-weight: bold;
        }
        .single_title{
          color: #fff;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
