<template>
  <div id="itemMenu">
    <div class="menu_title">
      <span class="single_button" :class="[item.chosen?'single_button_active':'']" v-for="item in menuList" :key="item.id" @click="changeType(item.name)">
        {{item.name}}
      </span>
    </div>
    <div class="menu_content">
      <div class="search_info">
        <el-input
            v-model="searchContent"
            @focus="checkStart"
            @blur="checkEnd"
            placeholder="请输入搜索内容"
            size="medium"
        ></el-input>

        <span class="table_info">共有{{totalCount}}条记录</span>
      </div>
      <el-table  ref="AnalysisTable"  :fit='true'  :empty-text="loadInfo"  :border="false" :row-class-name="tableRowClassName" @row-click="selectItem"
                @cell-mouse-enter="mouseEnter"
                @cell-mouse-leave="mouseLeave"
                :data="filterData(DataMain)" :height="tableHeight">
        <el-table-column prop="NAME" label="事项名称" width="380">
          <template slot-scope="scope">
            <span class="success-row-chosen" v-if="scope.row.CHOSEN">{{scope.row.NAME.length>20?scope.row.NAME.substr(0,20)+"...":scope.row.NAME}}</span>
            <span v-if="!scope.row.CHOSEN">{{scope.row.NAME.length>20?scope.row.NAME.substr(0,20)+"...":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="TONGBI" label="同比" width="100">
          <template slot-scope="scope">
            <img src="../../assets/imgs/箭头上.png" class="up_button" v-if="showUpIcon(scope.row.TONGBI)">
            <img src="../../assets/imgs/箭头下.png" class="down_button" v-if="showDownIcon(scope.row.TONGBI)">
            <span class="success-row-chosen" v-if="scope.row.CHOSEN">{{scope.row.TONGBI}}</span>
            <span v-if="!scope.row.CHOSEN">{{scope.row.TONGBI}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="HUANGBI" label="环比" >
          <template slot-scope="scope">
          <img src="../../assets/imgs/箭头上.png" class="up_button" v-if="showUpIcon(scope.row.HUANGBI)">
          <img src="../../assets/imgs/箭头下.png" class="down_button" v-if="showDownIcon(scope.row.HUANGBI)">
          <span class="success-row-chosen" v-if="scope.row.CHOSEN">{{scope.row.HUANGBI}}</span>
          <span v-if="!scope.row.CHOSEN">{{scope.row.HUANGBI}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
//import {autoChange, autoRoll} from "@/scroll";
import{mapMutations,mapState} from 'vuex';
let Analysisrolltimer = ""; // 自动滚动的定时任务
let Analysischangetimer = ""; // 自动切换的定时任务
export default {
  name: "ItemMenu",
  computed:{
    ...mapState({
      analysisObject:'analysis',
      reFresh:'analysisRefresh'
      // firstLevel:'analysisFirstLevel',
      // secondLevel:'analysisSecondLevel',
      // thirdLevel:'analysisThirdLevel',
      // forthLevel:'analysisForthLevel',
      // dayCount:'analysisTimer',
      // anaUnit:'analysisUnit'
    })
  },
  data(){
    return{
      totalCount:0,
      getIndex:null,
      searchContent:'',
      menuList:[
        {
          id:'1',
          code:'行政许可',
          name:'行政许可',
          chosen:false
        },
        {
          id:'2',
          code:'行政确认',
          name:'行政确认',
          chosen:false
        },
        {
          id:'3',
          code:'行政奖励',
          name:'行政奖励',
          chosen:false
        },
        {
          id:'4',
          code:'行政征收',
          name:'行政征收',
          chosen:false
        },
        {
          id:'5',
          code:'其他权利',
          name:'其他权利',
          chosen:false
        },
        {
          id:'6',
          code:'公共服务',
          name:'公共服务',
          chosen:false
        },
      ],
      DataMain:[],
      tableHeight: 0,
      rollPx:1,
      refreshTime:5,
      rollTime:5,
      autoPlay:true,
      loadInfo:'',
    }
  },
  mounted(){

    if(this.reFresh){
      this.onSubmit();
      this.autoRoll();
      this.autoChange();
    }
    this.$nextTick(function () {
      this.tableHeight = window.innerHeight - this.$refs.AnalysisTable.$el.offsetTop - 65;
      // 监听窗口大小变化
      let ZJWself = this;
      window.onresize = function() {
        ZJWself.tableHeight = window.innerHeight - self.$refs.AnalysisTable.$el.offsetTop - 65;
      }
    });
  },
  methods:{
    filterData(data) {
      var input = this.searchContent && this.searchContent.toLowerCase();
      //var input = searchContent.toLowerCase()
      var items = data;
      var items1;
      if (input) {
        items1 = items.filter(function(item) {
          return Object.keys(item).some(function(key1) {
            return String(item[key1])
                .toLowerCase()
                .indexOf(input) > -1;
          });
        });
      } else {
        items1 = items;
      }
      return items1;
    },
    checkChinese(){
      //this.searchContent = this.searchContent.replace(/\([^)]*\)/g,"");
    },
    checkStart(){
      this.checkInterval = setInterval(this.checkChinese,100)
    },
    checkEnd(){
      clearInterval(this.checkInterval)
    },
    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;
      }
    },
    onSubmit(){
      this.DataMain = [];
      this.loadInfo ='数据加载中';
      this.$request({
        url:'/YWTBApi/queryMatterList',
        method:'post',
        data:{
          "TYPE":this.analysisObject['analysisThirdLevel'],
          "DATA_TYPE":this.analysisObject['analysisFirstLevel'],
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
          "UNIT_NAME":this.analysisObject['analysisUnit'],
        }
      }).then(response => {
        let useData= []
        this.loadInfo ='';
        let dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
          let tempdata = {
            NAME: dataArr[i].NAME,
            QCWB: dataArr[i].QCWB,
            HB:  dataArr[i].HB,
            KB:  dataArr[i].KB,
            WB: dataArr[i].WB,
            BASE_CODE: dataArr[i].BASE_CODE,
            HUANGBI:  dataArr[i].MONTHONMONTH_PER==undefined?'':dataArr[i].MONTHONMONTH_PER,
            TONGBI:   dataArr[i].YEARONYEAR_PER==undefined?'':dataArr[i].YEARONYEAR_PER,
            CHOSEN: false
          }
          useData.push(tempdata);
        }
        this.DataMain = useData;
        this.totalCount =response.data.msg[0].TotalRowCount;


      })
    },
    onSubmitOrigion(){
      this.searchContent = '';
      this.DataMain = [];
      this.loadInfo ='数据加载中';
      this.$request({
        url:'/YWTBApi/queryMatterList',
        method:'post',
        data:{
          "TYPE":this.analysisObject['analysisThirdLevel'],
          "DATA_TYPE":this.analysisObject['analysisFirstLevel'],
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
          "UNIT_NAME":this.analysisObject['analysisUnit'],
        }
      }).then(response => {
        let useData= []
        this.loadInfo ='';
        let dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
          let tempdata = {
            NAME: dataArr[i].NAME,
            QCWB: dataArr[i].QCWB,
            HB:  dataArr[i].HB,
            KB:  dataArr[i].KB,
            WB: dataArr[i].WB,
            BASE_CODE: dataArr[i].BASE_CODE,
            HUANGBI:  dataArr[i].MONTHONMONTH_PER==undefined?'':dataArr[i].MONTHONMONTH_PER,
            TONGBI:   dataArr[i].YEARONYEAR_PER==undefined?'':dataArr[i].YEARONYEAR_PER,
            CHOSEN: false
          }
          useData.push(tempdata);
        }
        this.DataMain = useData;
        this.totalCount =response.data.msg[0].TotalRowCount;
        if(this.analysisObject['analysisForthLevel'] !=''){
          this.selectItemOrigion(this.analysisObject['analysisForthLevel']);
        }
      })
    },
    changeType(name){
      for(let i=0;i<this.menuList.length;i++){
        if(name ==this.menuList[i].name){

          // this.analysisThirdLevel(this.menuList[i].name)
          // this.analysisForthLevel('')
          this.analysisSingleChange([
            {
              name:'analysisThirdLevel',
              value:this.menuList[i].name
            },
            {
              name:'analysisForthLevel',
              value:''
            },
          ])
          this.menuList[i].chosen = true;
        }else{
          this.menuList[i].chosen = false;
        }
      }
    },
    changeTypeOrigion(name){
      for(let i=0;i<this.menuList.length;i++){
        if(name ==this.menuList[i].name){
          this.menuList[i].chosen = true;
        }else{
          this.menuList[i].chosen = false;
        }
      }
    },

    mouseEnter() {
      if(this.analysisObject['analysisForthLevel'] !=''){
        return
      }else{
        // 鼠标进入停止滚动和切换的定时任务
        // console.log("jinlailai");
        this.autoRoll(true);
        this.autoChange(true);
      }
    },
    // 鼠标离开
    mouseLeave() {
      if(this.analysisObject['analysisForthLevel'] !=''){
        return
      }else {
        // 开启
        this.autoRoll();
        this.autoChange();
      }
    },
    tableRowClassName({row,rowIndex}){
      console.log(row);
      if(rowIndex%2!==1){
        return 'success-row'
      }else{
        return 'error_row'
      }
    },
    // 设置自动滚动
    autoRoll(stop) {
      if (stop) {
        clearInterval(Analysisrolltimer);
        return;
      }
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.AnalysisTable;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果
      Analysisrolltimer = setInterval(() => {
        // 元素自增距离顶部像素
        divData.scrollTop += this.rollPx;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }, this.rollTime * 10);
    },
    stopHight(index) {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.AnalysisTable;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      // 拿到元素后，对元素进行增加距离顶部距离，实现滚动效果
        // 元素自增距离顶部像素
        // divData.scrollTop += this.rollPx;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      this.$nextTick(() => {
        divData.scrollTop = (index) * 42.13;
      })
    },
// 设置自动切换
    autoChange(stop) {
      if (stop) {
        clearInterval(Analysischangetimer);
        return;
      }
      Analysischangetimer = setInterval(() => {
        this.autoPlay = !this.autoPlay;
        this.autoRoll(true); // 先清除定时器
        this.autoRoll(); // 再开启定时器
      }, this.refreshTime * 1000);
    },
    selectItem(row){
      let rowIndex = row.BASE_CODE;
      for(let i=0;i<this.DataMain.length;i++){
        if(rowIndex == this.DataMain[i].BASE_CODE){
          this.DataMain[i].CHOSEN = true;
        }else{
          this.DataMain[i].CHOSEN = false;
        }
      }
      this.analysisSingleChange([
        {
          name:'analysisForthLevel',
          value:row.BASE_CODE
        },
        {
          name:'analysisFifthLevel',
          value:''
        },
      ])
    },
    selectItemOrigion(BASE_CODE){
      let rowIndex = BASE_CODE;
      for(let i=0;i<this.DataMain.length;i++){
        if(rowIndex == this.DataMain[i].BASE_CODE){
          this.stopHight(i);
          this.DataMain[i].CHOSEN = true;
        }else{
          this.DataMain[i].CHOSEN = false;
        }
      }
    },
    ...mapMutations(['analysis','analysisRefresh','analysisSingleChange'])
  },

  beforeDestroy(){  // 组件销毁前调用
    clearInterval(Analysisrolltimer);
    clearInterval(Analysischangetimer);
  },
  watch:{
    analysisObject(val){
      this.onSubmitOrigion()
      this.changeTypeOrigion(val['analysisThirdLevel']);
      if(val['analysisForthLevel'] ==''){
        this.autoRoll(true);
        this.autoChange(true);
        this.autoRoll();
        this.autoChange();
      }else{
        this.autoRoll(true);
        this.autoChange(true);
      }
    },

    // firstLevel(){
    //   this.onSubmit()
    // },
    // secondLevel(){
    //   this.onSubmit()
    // },
    // thirdLevel(val){
    //   this.changeType(val);
    //   this.onSubmit()
    // },
    // forthLevel(val){
    //   if(val==''){
    //     this.autoRoll();
    //     this.autoChange();
    //   }else{
    //     this.autoRoll(true);
    //     this.autoChange(true);
    //   }
    //   //this.onSubmit()
    // },
    // dayCount(){
    //   this.onSubmit()
    // },
    // anaUnit(){
    //   this.onSubmit()
    // },
  }

}
</script>

<style scoped lang="scss">
#itemMenu{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-input{
    width: 60%;
  }
  .wb_button{
    color: rgb(0,128,255);
    margin-left: 4px;
    padding: 0px 8px 1px 8px;
    background: rgb(0,128,255,0.2);
    border: 1px solid #0080ff;
  }
  .qcwb_button{
    color: rgb(255,255,0);
    margin-left: 4px;
    padding: 0px 8px 1px 8px;
    background: rgb(255,255,0,0.2);
    border: 1px solid #ffff00;
  }
  .hb_button{
    color: rgb(255,105,0);
    margin-left: 4px;
    padding: 0px 8px 1px 8px;
    background: rgb(255,105,0,0.2);
    border: 1px solid #ff6900;
  }
  .kb_button{
    color: rgb(0,255,0);
    margin-left: 4px;
    padding: 0px 8px 1px 8px;
    background: rgb(0,255,0,0.2);
    border: 1px solid #00ff00;
  }
  .up_button{
    width: 8px;
    height: 20px;
    padding-right: 2px;
  }
  .down_button{
    width: 8px;
    height: 20px;
    padding-right: 2px;
  }
  .menu_title{
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span{
      background: url("../../assets/imgs/bg_botton.png") no-repeat;
      background-size: 100%;
    }
    .single_button{
      width: 77px;
      height: 33px;
      line-height: 33px;
      text-align: center;
      color: #fff;
      font-size: 18px;
      padding: 4px 5px 4px 5px
    }
    .single_button:hover,.single_button_active{
      color: #fdbf00;
      cursor: pointer;
    }
  }
  .search_info{
    width: 100%;
    display: flex;

    .table_info{
      width:40%;
      color: #fff;
      font-size: 15px;
      font-weight: normal;
      display: flex;
      align-items:center;
      justify-content:flex-end;
    }
  }
  .el-table {
    border:none;

  }
  ::v-deep .el-table td.el-table__cell,::v-deep  .el-table th.el-table__cell.is-leaf{
    border:none !important;
  }
  ::v-deep .el-table thead {
    color: #fff;
    background-color:rgba(0,95,190,0.4);
  }
}

</style>
