<template>
 <div id="evaluate-situation">
   <div class="countInfo">
     <span class="table_info">共有{{totalCount}}条记录</span>
   </div>
   <common-three-block title="事项评价情况">
     <template #bottom>
       <div  v-loading="loading"  class="m-t" element-loading-text="数据加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(3, 30, 57, 0.8)">
         <div class="m-t">

           <el-table  ref="evaluateTable"  :fit='true'  :border="false" :row-class-name="tableRowClassName" @row-click="selectItem"  highlight-current-row @cell-mouse-enter="mouseEnter"    @cell-mouse-leave="mouseLeave" :data="tableData" :height="tableHeight">

             <el-table-column prop="NAME" label="事项名称" width="270">
               <template slot-scope="scope">
                 <span>{{scope.row.NAME.length>15?scope.row.NAME.substr(0,15)+"...":scope.row.NAME}}</span>
                 <!--               <span v-if="!scope.row.CHOSEN">{{scope.row.NAME.length>15?scope.row.NAME.substr(0,15)+"...":scope.row.NAME}}</span>-->
                 <!--               <span class="wb_button" v-if="(scope.row.WB==1)">网办</span>-->
                 <!--               <span class="qcwb_button" v-if="(scope.row.QCWB==1)">全程网办</span>-->
                 <!--               <span class="hb_button" v-if="(scope.row.HB==1)">好办</span>-->
                 <!--               <span class="kb_button" v-if="(scope.row.KB==1)">快办</span>-->
               </template>
             </el-table-column>
             <el-table-column prop="PL_CP_NUM" :label="commitName" width="80">
               <template slot-scope="scope">
                 <span>{{scope.row.PL_CP_NUM}}</span>
                 <!--               <span v-if="!scope.row.CHOSEN">{{scope.row.PL_CP_NUM}}</span>-->
               </template>
             </el-table-column>
             <el-table-column prop="CPL" :label="interestName">
               <template slot-scope="scope">
                 <span>{{scope.row.CPL}}</span>
                 <!--               <span v-if="!scope.row.CHOSEN">{{scope.row.CPL}}</span>-->
               </template>
             </el-table-column>
           </el-table>
         </div>
       </div>
     </template>
   </common-three-block>
 </div>
</template>

<script>
import {mapEvaluateState,mapEvaluateMutations} from "@/units/map-units";
import CommonThreeBlock from "@/components/common/CommonThreeBlock";
let evaluaterolltimer = ""; // 自动滚动的定时任务
let evaluatechangetimer = ""; // 自动切换的定时任务
export default {
  name: "EvaluateSituation",
  components: {CommonThreeBlock},
  computed:{
    ...mapEvaluateState({
      evaFirstLevel:'evaluateFirstLevel',
      evaSecondLevel:'evaluateSecondLevel',
      evaThirdLevel:'evaluateThirdLevel',
      evaTimer:'evaluateTimer',
      commitName:function (){
        if(this.evaSecondLevel =='1'){
          return '好评数量';
        }else{
          return '差评数量'
        }
      },
      interestName:function (){
        if(this.evaSecondLevel =='1'){
          return '好评率';
        }else{
          return '差评率'
        }
      }
    }),
  },
  data() {
    return{
      //comName:'差评数量',
      tableData:[],
      tableHeight: 0,
      rollPx:1,
      refreshTime:5,
      rollTime:5,
      autoPlay:true,
      loading: true,
      totalCount:0
    }
  },
  mounted() {
    this.showData();
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - this.$refs.evaluateTable.$el.offsetTop - 65;
      // 监听窗口大小变化
      let ZJWself = this;
      window.onresize = function() {
        ZJWself.tableHeight = window.innerHeight - self.$refs.evaluateTable.$el.offsetTop - 65;
      }
    });
    this.autoRoll();
    //this.autoChange();
  },
  methods:{
    showData(){
      this.loading=true;
      this.$request({
        url:'/ywtb/selectMatterEvaluation',
        method:'post',
        data:{
          "ORGANIZATION":this.evaFirstLevel,
          "TIME_TYPE":this.evaTimer,
          "SATISFACTION":this.evaSecondLevel,
        }
      }).then(response => {
        this.loading=false;
        let dataArr = response.data.msg[0].Rows;
        if(dataArr.length >0){
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].NAME.length >15){
              dataArr[i].NAME= dataArr[i].NAME.substr(0,15) + "..."
              dataArr[i].CHOSEN = false;
            }
          }
          this.tableData = dataArr;
          this.totalCount=response.data.msg[0].TotalRowCount;
        }else{
          this.loading=false;
          this.tableData = [];
          this.totalCount=0;
        }
      })
    },
    mouseEnter() {
      if(this.evaThirdLevel !=''){
        return
      }else{
        // 鼠标进入停止滚动和切换的定时任务
        // console.log("jinlailai");
        this.autoRoll(true);
        this.autoChange(true);
      }


      // 鼠标进入停止滚动和切换的定时任务
      // console.log("jinlailai");
      //this.autoRoll(true);
      //this.autoChange(true);
    },
    // 鼠标离开
    mouseLeave() {
      if(this.evaThirdLevel !=''){
        return
      }else{
      // 开启
      this.autoRoll();
        this.autoChange();
      //this.autoChange();
      }
    },
    tableRowClassName({row,rowIndex}){
      console.log(row);
      if(rowIndex%2!==1){
        return 'success-row'
      }else{
        return 'error_row'
      }
    },
    // 设置自动滚动
    autoRoll(stop) {
      if (stop) {
        clearInterval(evaluaterolltimer);
        return;
      }
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.evaluateTable;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
      evaluaterolltimer = setInterval(() => {
        // 元素自增距离顶部像素
        divData.scrollTop += this.rollPx;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, this.rollTime * 10);
    },
// 设置自动切换
    autoChange(stop) {
      if (stop) {
        clearInterval(evaluatechangetimer);
        return;
      }
      evaluatechangetimer = setInterval(() => {
        this.autoPlay = !this.autoPlay;
        this.autoRoll(true); // 先清除定时器
        this.autoRoll(); // 再开启定时器
      }, this.refreshTime * 1000);
    },
    selectItem(row){
      let rowIndex = row.MATTER_CODE;
      for(let i=0;i<this.tableData.length;i++){
        if(rowIndex == this.tableData[i].MATTER_CODE){
          this.stopHight(i);
          this.tableData[i].CHOSEN = true;
        }else{
          this.tableData[i].CHOSEN = false;
        }
      }
      this.evaluateThirdLevel(row.MATTER_CODE)
    },
    stopHight(index) {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.evaluateTable;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行增加距离顶部距离，实现滚动效果
      // 元素自增距离顶部像素
      // divData.scrollTop += this.rollPx;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      this.$nextTick(() => {
        divData.scrollTop = (index) * 46.94;
      })
    },
    ...mapEvaluateMutations(['evaluateFirstLevel','evaluateSecondLevel','evaluateThirdLevel','evaluateTimer'])
  },
  watch: {
    evaFirstLevel(){
      this.showData()
    },
    evaSecondLevel(){
      this.showData();
    },
    evaTimer(){
      this.showData()
    },
  }
}
</script>

<style scoped lang="scss">
#evaluate-situation{
  height: 66.66%;
  box-sizing: border-box;
  position: relative;
  display:flex;
  flex-direction:column;
  .countInfo{
    position: absolute;
    top:10px;
    right:0%;

    color: #fff;
    font-size: 14px;
    font-weight: normal;
  }
  .m-t{
    height: 100%;

  }
  ::v-deep{

    .flex-bottom{
      padding: 10px 0;
    }
  }


  .el-table{
    border:none;
    ::v-deep{
      .el-table__body tr.current-row>td{
        background: #0e6b9e !important;
        color: #fdbf00;
      }
      .el-table__body tr.el-table__row:hover>td {
        cursor: pointer;
        background: #0e6b9e !important
      }
      .el-table__body tr.el-table__row--striped{
        //background: rgba(0, 77, 153, 0.1) !important;
        background: url("../../assets/imgs/间隔.png") no-repeat !important;
        background-size:100% 100% !important;
      }
      //.el-table__body td.el-table__cell{
      //  background: transparent !important;
      //}

      td.el-table__cell, th.el-table__cell.is-leaf{
        border: none;
      }
      .el-table__row.el-table__row--striped .td.el-table__cel{
        background: red;
      }
    }
    height: 100% !important;

  }
}
</style>
