<template>
 <div id="event-sta" class="h100 block">
   <div class="black-title">
     事项统计
   </div>
   <div class="show_content">
     <div class="echarts flex1" ref="echarts">

     </div>
     <div class="e_table">
       <div class="list flex3 list_table">
         <ul ref="scroll-list">
           <li class="item">
             <span class="circle_width"></span>
             <span class="nameStatus_title">事项类型</span>
             <span class="fr-countStatus">事项总数</span>
             <span class="fr-countStatus">网办</span>
             <span class="fr-countStatus">全程网办</span>
             <span class="fr-countStatus">好办</span>
             <span class="fr-countStatus">快办</span>
           </li>
           <li v-for="(item,index) in itemList.slice(0,itemList.length -1)" :key="index"  class="item item_pointer">
             <span class="circle_width" :class="item.color"></span>
             <span class="nameStatus" @click="showMatterGuidance(item.name,'')">{{item.name}}</span>
             <span class="fr-countStatus" @click="showMatterGuidance(item.name,'')">{{item.total_number}}</span>
             <span class="fr-countStatus" @click="showMatterGuidance(item.name,'1')">{{item.wb_number}}</span>
             <span class="fr-countStatus" @click="showMatterGuidance(item.name,'4')">{{item.qcwb_number}}</span>
             <span class="fr-countStatus" @click="showMatterGuidance(item.name,'2')">{{item.hb_number}}</span>
             <span class="fr-countStatus" @click="showMatterGuidance(item.name,'3')">{{item.kb_number}}</span>
           </li>
           <li v-for="(item,index) in itemList.slice(itemList.length -1,itemList.length)" :key="index" class="item item_pointer">
             <span class="circle_width" :class="item.color"></span>
             <span class="nameStatus_title"  @click="showMatterGuidance('','')">{{item.name}}</span>
             <span class="fr-countStatus"  @click="showMatterGuidance('','')">{{item.total_number}}</span>
             <span class="fr-countStatus"  @click="showMatterGuidance('','1')">{{item.wb_number}}</span>
             <span class="fr-countStatus"  @click="showMatterGuidance('','4')">{{item.qcwb_number}}</span>
             <span class="fr-countStatus"  @click="showMatterGuidance('','2')">{{item.hb_number}}</span>
             <span class="fr-countStatus"  @click="showMatterGuidance('','3')">{{item.kb_number}}</span>
           </li>
         </ul>
       </div>
     </div>
   </div>

 </div>
</template>

<script>
import {setEventStaOption} from "../../echarts/option";
import {mapMutations} from "vuex";

export default {
  name: "EventSta",
   data(){
    return{
      EventStaData:[
      ],
      itemList:[
        {
          name:'行政许可',
          code:'01',
          color:'circle_1',
          total_number:'0',
          wb_number:'0',
          qcwb_number:'0',
          hb_number:'0',
          kb_number:'0'
        },
        {
          name:'行政征收',
          code:'08',
          color:'circle_2',
          total_number:'0',
          wb_number:'0',
          qcwb_number:'0',
          hb_number:'0',
          kb_number:'0'
        },
        {
          name:'行政确认',
          code:'07',
          color:'circle_3',
          total_number:'0',
          wb_number:'0',
          qcwb_number:'0',
          hb_number:'0',
          kb_number:'0'
        },
        {
          name:'行政奖励',
          code:'06',
          color:'circle_4',
          total_number:'0',
          wb_number:'0',
          qcwb_number:'0',
          hb_number:'0',
          kb_number:'0'
        },
        {
          name:'其他权利',
          code:'49',
          color:'circle_5',
          total_number:'0',
          wb_number:'0',
          qcwb_number:'0',
          hb_number:'0',
          kb_number:'0'
        },
        {
          name:'公共服务',
          code:'58',
          color:'circle_6',
          total_number:'0',
          wb_number:'0',
          qcwb_number:'0',
          hb_number:'0',
          kb_number:'0'
        },
        {
          name:'合计',
          code:'',
          total_number:'0',
          wb_number:'0',
          qcwb_number:'0',
          hb_number:'0',
          kb_number:'0'
        },
      ]
    }

   },
  mounted() {
    let ele = this.$refs.echarts
    this.$nextTick(() => {
      setEventStaOption(this.$refs.echarts,this.EventStaData)
    })

    this.$request({
      url:'/YWTBApi/queryMatterStatistics',
      method:'post',
      data:{
      }
    }).then(response => {
      let dataArr = response.data.msg[0].Rows;
     for(let j=0;j<dataArr.length;j++){
       for(let i=0;i<this.itemList.length;i++){
         if(this.itemList[i].name == dataArr[j].TYPE){
           this.itemList[i].hb_number =dataArr[j].HB;
           this.itemList[i].kb_number  =dataArr[j].KB;
           this.itemList[i].wb_number =dataArr[j].WB;
           this.itemList[i].qcwb_number =dataArr[j].QCWB;
           this.itemList[i].total_number  =dataArr[j].DATA_COUNT;
         }
       }
     }
     for(let i=0;i<this.itemList.length;i++){
       if(this.itemList[i].name !='合计'){
         let tempdata = {
           value:this.itemList[i].total_number,
           name:this.itemList[i].name
         }
         this.EventStaData.push(tempdata);
       }
     }

      console.log(this.EventStaData);
      setEventStaOption(ele,this.EventStaData)
    })
  },
  methods:{
    showMatterGuidance(code,type){
      this.$router.push('/origion/mattersGuidance/mainBody');
      this.matterGuidanceRefresh(false);
      this.$nextTick(()=>{
        this.matterGuidanceSingleChange([
          {
            name:'matterGuidanceFirstLevel',
            value:''
          },
          {
            name:'matterGuidanceSecondLevel',
            value:code
          },
          {
            name:'matterGuidanceThirdLevel',
            value:type
          },
        ])
      })
    },
    ...mapMutations(['matterGuidanceRefresh','matterGuidance','matterGuidanceSingleChange'])
  }
}
</script>

<style scoped lang="scss">
#event-sta{
  .show_content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .echarts{
      width: 35%;
    }
    .e_table{
      width: 65%;
      height: 95%;
      display: flex;
      flex-direction: column;
      .list_table{
        display: flex;
        justify-content: center;
        align-items: center;
        .item_pointer{
          cursor: pointer;
        }
      }
    }

  }
  ul{
    width: 100%;
    position: absolute;

    li{

      padding-left: 10px;
      padding-right: 10px;
      color: #fff;
      font-size: 13px;
      height: 30px;
      line-height: 30px;
      .nameStatus{
        width: 21%;
        float: left;
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .nameStatus_title{
        width: 21%;
        float: left;
        margin-right: 8px;
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .fr-countStatus{
        width: 15%;
        float: left;
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .name{
        margin-right: 6px;
      }
      &:nth-child(2n+1){
        background:linear-gradient(to right,#093972, #093972);
      }
    }
  }
  .circle_1{
    background-color: #eca378;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .circle_2{
    background-color: #b5d571;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .circle_3{
    background-color: #7ec6f6;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .circle_4{
    background-color: #e60114;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .circle_5{
    background-color: #e3620a;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .circle_6{
    background-color: #f9fc01;
    width: 8px;
    height: 8px;
    border-radius: 4px;
  }
  .circle_width{
    float:left;
    margin-top: 12px;
  }
}
</style>
