<template>
 <div id="review-and-edit">
   <common-three-block title="回复及整改情况">
     <template #bottom>
       <div  v-loading="loading" class="review-and-edit-load" element-loading-text="数据加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(3, 30, 57, 0.8)">
         <div key="1" class="list-area list-area1" v-if="evaThirdLevel!=''">
           <div class="left">
             <div class="item" v-for="item in itemLeftList" :key="item">
               <span class="t">{{ item.name }}:</span>
               <span class="v">{{item.value}}</span>
             </div>
           </div>
           <div class="right">
             <div class="item" v-for="item in itemRightList" :key="item">
               <span class="t">{{item.SITUATION.length>8?item.SITUATION.substr(0,8)+"...":item.SITUATION}}:</span>
               <span class="v">{{item.OPERATION_TIME1}}</span>
             </div>
           </div>
           <div class="split-l">

           </div>
         </div>
         <div  key="2"  class="list-area list-area2" v-if="evaThirdLevel==''">
           <div class="left">
             <div class="item" v-for="(item,index) in basicLeftList" :key="index">
               <span class="t">{{ item.name }}:</span>
               <span class="v">{{item.value}}</span>
             </div>
           </div>
           <div class="right">
             <div class="top zg">
               <div class="top-l  left-icon">

               </div>
               <div class="intro">
                 <div>
                   <span class="roboto">{{SHOULD_BE_RECTIFIED}}</span>
                   <span>次</span>
                 </div>
                 <div>需整改事项</div>
               </div>
             </div>
             <div class="bottom wzg">
               <div class="top-l  left-icon">

               </div>
               <div class="intro">
                 <div>
                   <span class="roboto">{{ NOT_RECTIFIED }}</span>
                   <span>次</span>
                 </div>
                 <div>未整改事项</div>
               </div>
             </div>
           </div>
           <div class="split-l">

           </div>
         </div>
       </div>
     </template>
   </common-three-block>

 </div>
</template>

<script>
import CommonThreeBlock from "../../components/common/CommonThreeBlock";
import {mapEvaluateMutations, mapEvaluateState} from "@/units/map-units";

export default {
  name: "ReviewAndEdit",
  components: { CommonThreeBlock},
  computed:{
    ...mapEvaluateState({
      evaFirstLevel:'evaluateFirstLevel',
      evaSecondLevel:'evaluateSecondLevel',
      evaThirdLevel:'evaluateThirdLevel',
      evaTimer:'evaluateTimer',
      commitName:function (){
        if(this.evaSecondLevel =='1'){
          return '好评数量';
        }else{
          return '差评数量'
        }
      }
    }),
  },
  data() {
    return {
      loading: true,
      basicLeftList:[
        {
          code:'CUMULATIVE_REPLY',
          name:'全部回复数',
          value:'0'
        },
        {
          code:'NO_REPLY',
          name:'未回复数',
          value:'0'
        },
        {
          code:'AVG_TIME',
          name:'平均时间(h)',
          value:'0'
        },
        {
          code:'MAX_TIME',
          name:'最大时间(h)',
          value:'0'
        },
        {
          code:'MIN_TIME',
          name:'最小时间(h)',
          value:'0'
        },
      ],
      SHOULD_BE_RECTIFIED:'0',
      NOT_RECTIFIED:'0',
      itemLeftList:[
        {
          code:'CUMULATIVE_REPLY',
          name:'全部回复数',
          value:'0'
        },
        {
          code:'NO_REPLY',
          name:'未回复数',
          value:'0'
        },
        {
          code:'AVG_TIME',
          name:'平均时间(h)',
          value:'0'
        },
        {
          code:'MAX_TIME',
          name:'最大时间(h)',
          value:'0'
        },
        {
          code:'MIN_TIME',
          name:'最小时间(h)',
          value:'0'
        },
      ],
      itemRightList:[
      ],
      leftArr:[

      ]
    }
  },
  mounted() {
    this.showData()
  },
  methods:{
    showData(){
      if(this.evaThirdLevel==''){
        this.showBasic()
      }else{
        this.showItem()
      }
    },
    showBasic(){
      this.loading=true;
      this.$request({
        url:'/ywtb/seledtReplyAndRectification',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
         // "SATISFACTION":this.evaSecondLevel,
          "SATISFACTION":'0',
          "MATTER_CODE":this.evaThirdLevel,
        }
      }).then(response => {
        this.loading=false;
        let dataArr = response.data.msg[0].Rows[0];
        for(let obj in dataArr){
          if(obj=='SHOULD_BE_RECTIFIED'){
            this.SHOULD_BE_RECTIFIED = dataArr[obj];
          }
          if(obj=='NOT_RECTIFIED'){
            this.NOT_RECTIFIED = dataArr[obj];
          }
          for(let j=0;j<this.basicLeftList.length;j++){
            if(this.basicLeftList[j].code ==obj){
              this.basicLeftList[j].value=dataArr[obj];
            }
          }
        }
      })
    },
    showItem(){
      this.loading=true;
      this.$request({
        url:'/ywtb/seledtReplyAndRectification',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
          "MATTER_CODE":this.evaThirdLevel,
        }
      }).then(response => {
        this.loading=false;
        let dataArr = response.data.msg[0].Rows[0];
        for(let obj in dataArr){
          for(let j=0;j<this.itemLeftList.length;j++){
            if(this.itemLeftList[j].code ==obj){
              this.itemLeftList[j].value=dataArr[obj];
            }
          }
          if(obj=='ATTRIBUTE_TIME'){
            this.itemRightList =dataArr[obj];
          }
        }
      })
    },
    ...mapEvaluateMutations(['evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer'])
  },
  watch: {
    evaFirstLevel(){
      this.showData()
    },
    evaSecondLevel(){
      this.showData();
    },
    evaThirdLevel(){
      this.showData();
    },
    evaTimer(){
      this.showData()
    },
  }
}
</script>

<style scoped lang="scss">
 #review-and-edit{
   .review-and-edit-load{
     width: 100%;
     height: 100%;
   }
   .right{
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   .left-icon{
     margin-right: 10px;
   }
   .top,.bottom{
     .intro{

       font-size: 16px;
     }
     color: #d5e1e1;
     font-size: 14px;
     .roboto{
       font-size: 22px;
       font-weight: 700;
       margin-right: 6px;
     }
     margin: 20px 0;
     display: flex;
     &.zg{
       .roboto{
         color: #30fdff;
       }
       .left-icon{
         background: url("../../assets/imgs/evaluate/应整改次数.png") no-repeat ;
         background-size: 100% 100%;
       }
     }
     &.wzg{
       .roboto{
         color: #ff9b30;
       }
       .left-icon{
         background: url("../../assets/imgs/evaluate/未整改次数.png") no-repeat ;
         background-size: 100% 100%;
       }
     }
     .left-icon{
       width: 60px;
       height: 58px;

     }
   }

  .list-area{
    &.list-area1{
      .item{
        width: 100%;
      }
    }
    &.list-area2{
      .item{
        width: 100%;
      }
    }

    height: 100%;
    box-sizing: border-box;
    position: relative;
    flex-wrap: wrap;
    align-content: space-around;
    align-items: center;
    .item{

      color: #73b9ff;
      height: 30px;
      line-height: 30px;
      display: flex;

      justify-content: center;

      font-size: 14px;

      .t{
        text-align: end;
        width: 60%;
      }
      .v{
        font-size: 20px;
        color: #fff;
        margin-left: 10px;
        width: 38%;
      }

    }

    .split-l{
      position: absolute;
      width: 1px;

      left: 50%;
      top: 20px;
      bottom: 20px;
      background: rgba(0, 90, 179, 0.5);
    }
    padding:  20px 0px;

    display: flex;

    >div{

      width: 50%;


    }
  }
 }
</style>
