<template>
 <div id="evaluate-home-top">
   <div  v-loading="loading" class="home-top-load" element-loading-text="数据加载中"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(3, 30, 57, 0.8)">
   <img class="bg-img" src="../../../assets/imgs/evaluate/top-bg.png" alt="">
   <div class="my-content">
     <div  v-for="item in dataList" :key="item">
      <div class="my-bg-k">
         <div>
            <div class="top-t">
              <span class="roboto">{{item.id}}</span>
              <span class="text">{{item.name}}</span>
            </div>
         </div>
        <div class="category-content">
          <Compare :text="titleName" :value="item.count" :is-column="true"/>
          <Compare text="同比" :value="item.count_tb" :is-column="true">
            <span>
              <img src="../../../assets/imgs/箭头上.png" v-if="showUpIcon(item.count_tb)" alt="">
              <img src="../../../assets/imgs/箭头下.png" v-if="showDownIcon(item.count_tb)" alt="">
            </span>
          </Compare>
          <Compare text="环比" :value="item.count_hb" :is-column="true">
            <span>
              <img src="../../../assets/imgs/箭头上.png" v-if="showUpIcon(item.count_hb)" alt="">
              <img src="../../../assets/imgs/箭头下.png" v-if="showDownIcon(item.count_hb)" alt="">
            </span>
          </Compare>
          <Compare :text="commitName" :value="item.interest" :is-column="true"/>
          <Compare text="同比" :value="item.interest_tb"  :is-column="true">
            <span>
              <img src="../../../assets/imgs/箭头上.png" v-if="showUpIcon(item.interest_tb)" alt="">
              <img src="../../../assets/imgs/箭头下.png" v-if="showDownIcon(item.interest_tb)" alt="">
            </span>
          </Compare>
          <Compare text="环比" :value="item.interest_hb" :is-column="true">
            <span>
              <img src="../../../assets/imgs/箭头上.png" v-if="showUpIcon(item.interest_hb)" alt="">
              <img src="../../../assets/imgs/箭头下.png" v-if="showDownIcon(item.interest_hb)" alt="">
            </span>
          </Compare>
        </div>
      </div>
     </div>
   </div>
 </div>
 </div>
</template>

<script>
import Compare from "@/components/compare/Compare";
import {mapEvaluateMutations, mapEvaluateState} from "@/units/map-units";
export default {
  name: "TopArea",
  components: {Compare},
  data(){
    return{
      dataList:[],
      loading: true,
    }
  },
  computed:{
    ...mapEvaluateState({
      evaFirstLevel:'evaluateFirstLevel',
      evaSecondLevel:'evaluateSecondLevel',
      evaThirdLevel:'evaluateThirdLevel',
      evaTimer:'evaluateTimer',
      commitName:function (){
        if(this.evaSecondLevel =='1'){
          return '好评率';
        }else{
          return '差评率'
        }
      },
      titleName:function (){
        if(this.evaSecondLevel =='1'){
          return '好评量';
        }else{
          return '差评量'
        }
      }
    }),
  },
  mounted(){
    this.showData();
  },
  methods:{
    showUpIcon(item){
      if(item!=''&&item.substr(0, 1) != '-'){
        return true;
      }else{
        return false;
      }
    },
    showDownIcon(item){
      if(item!=''&&item.substr(0, 1) == '-'){
        return true;
      }else{
        return false;
      }
    },
    showData(){
      this.loading=true;
      this.$request({
        url:'/ywtb/selectAllEvaluateMyByMatterCode',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
         // "MATTER_CODE":this.evaThirdLevel,
          "MATTER_CODE":''
        }
      }).then(response => {
        this.loading=false;
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.dataList = [];
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].MATTER_NAME!=undefined){
              let arr = {
                id: (i+1).toString(),
                name:dataArr[i].MATTER_NAME,
                count:dataArr[i].CPS_DATA_COUNT,
                count_tb:dataArr[i].CPS_YEAR_ON_YEAR,
                count_hb:dataArr[i].CPS_MONTH_ON_MONTH,
                interest:dataArr[i].CPL,
                interest_tb:dataArr[i].CPL_YEAR_ON_YEAR,
                interest_hb:dataArr[i].CPL_MONTH_ON_MONTH,
              }
              this.dataList.push(arr);
            }
          }
        }else{
          this.loading=false;
          this.dataList = [];
        }
      })
    },
    ...mapEvaluateMutations(['evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer'])
  },
  watch: {
    evaFirstLevel(){
      this.showData()
    },
    evaSecondLevel(){
      this.showData();
    },
    // evaThirdLevel(){
    //   this.showData();
    // },
    evaTimer(){
      this.showData()
    },
  }
}

</script>

<style scoped lang="scss">
 #evaluate-home-top{
   height: 100%;

   position: relative;

   .bg-img{

     width: 100%;
     object-fit: contain;
     height: 100%;

   }
   .home-top-load{
     width: 100%;
     height: 100%;
   }
  .my-content{


    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    left: 0;
    align-content: flex-start;
    top: 0;

    >div{
      ::v-deep{
        #compare{
          display: flex;
          align-items: center;
          height: 32px;
        }
      }
      margin: 20px 0;

      &:nth-child(1) {
        .my-bg-k{
          margin: 0 auto;
        }
        width: 100%;
      }
      &:nth-child(1){
        .top-t{
          .roboto{
            color: #ff2a00;
          }
        }
      }
      &:nth-child(2){
        .top-t{
          .roboto{
            color: #ff5500;
          }
        }
      }
      &:nth-child(3){
        .top-t{
          .roboto{
            color: #ff7f00;
          }
        }
      }
      &:nth-child(4){
        .top-t{
          .roboto{
            color: #ffaa00;
          }
        }
      }
      &:nth-child(5){
           .top-t{
             .roboto{
               color: #ffd400;
             }
           }
         }
      .my-bg-k{
        .category-content{
          display: flex;
          flex-wrap: wrap;
          >div{
            width: 33.33%;
          }
        }
        .top-t{
          .text{
            margin-left: 10px;
            color: #fff;
          }
          .roboto{
            font-size: 20px;
            font-style: italic;
            font-weight: 700;
          }
        }




        width: 435px;
        height: 117px;
        box-sizing: border-box;
        padding: 10px 15px;
        background: url("../../../assets/imgs/evaluate/bg-kuang.png") no-repeat;
        background-size: 100% 100%;
      }
    }

  }
 }
</style>
