<template>
  <div id="analysis-three-type" class="block h100">
    <div class="black-title">
      <span class="header_info">办件情况</span>
      <span class="table_info">共有{{totalCount}}条记录</span>
    </div>
    <div  v-loading="loading"  element-loading-text="数据加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(3, 30, 57, 0.8)">
      <div class="time_content">
      <div v-if="analysisObject['analysisForthLevel']!=''" class="first_list" :key="1">
        <div v-if="situationList.length >0" ref="situation_list" class="list flex1">
<!--          <div v-if="situationList.length >0" class="list flex1" @mouseenter="pauseTimer" @mouseleave="continueTimer">-->
          <ul ref="scroll-list">
            <li v-for="(item,index) in situationList" :key="index" class="item" :class="[item.chosen?'item_choose':'']" @click="chooseStep(item.SITUATION_CODE)">
              <span class="nameStatus">{{item.SITUATION}}</span>
              <span class="fr-countStatus">{{item.DATA_COUNT}}</span>
            </li>
          </ul>
        </div>
        <div v-else class="else_div">
          <span>暂无数据</span>
        </div>
      </div>

      <div v-if="analysisObject['analysisForthLevel']==''" class="first_list" :key="2">
        <div v-if="basicList.length >0" class="list flex1">
          <ul ref="scroll-list">
            <li v-for="item in basicList" :key="item.RN" class="item" :class="[item.chosen?'item_choose':'']" @click="chooseBasicStep(item.MATTER_CODE)">
              <span class="nameStatus">{{item.NAME}}</span>
              <span class="fr-countStatus">{{item.DATA_COUNT}}</span>
            </li>
          </ul>
        </div>
        <div v-else class="else_div">
          <span>暂无数据</span>
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import {continueScroll, rescrollFun, scrollFun, stopScroll} from "@/scroll";
import{mapState,mapMutations} from 'vuex';
export default {
  name: "AnalysisThreeType",
  data(){
    return{
      totalCount:0,
      loading: true,
      itemList:[],
      situationList:[],
      basicList:[]
    }
  },
  computed:{
    ...mapState({
      analysisObject:'analysis',
      reFresh:'analysisRefresh',
    })
  },
  mounted() {
    this.typeShow();
  },
  filters:{
    stateType(state){
      let obj = {
        '1':'网上申报',
        '2':'网上预审',
        '3':'收件',
        '4':'补正',
        '5':'受理',
        '6':'特别程序',
        '7':'决定',
        '8':'制发证',
        '9':'审查',
      }
      return obj[state]
    }
  },
  methods:{
    chooseStep(index){
      for(let i=0;i<this.situationList.length;i++){
        if(index  == this.situationList[i].SITUATION_CODE){
          this.situationList[i].chosen = true;
        }else{
          this.situationList[i].chosen = false;
        }
      }
      this.analysisSingleChange([
        {
          name:'analysisFifthLevel',
          value:index
        },
      ])
      //this.analysisFifthLevel(index);
    },
    chooseBasicStep(index){
      for(let i=0;i<this.basicList.length;i++){
        if(index  == this.basicList[i].MATTER_CODE){
          this.basicList[i].chosen = true;
        }else{
          this.basicList[i].chosen = false;
        }
      }
      this.analysisSingleChange([
        {
          name:'analysisForthLevel',
          value:index
        },
        {
          name:'analysisFifthLevel',
          value:''
        },
      ])
    },
    chooseStepOrigion(index){
      for(let i=0;i<this.situationList.length;i++){
        if(index  == this.situationList[i].SITUATION_CODE){
          this.stopHight(i);
          this.situationList[i].chosen = true;
        }else{
          this.situationList[i].chosen = false;
        }
      }
      //this.analysisFifthLevel(index);
    },

    typeShow(){
      if(this.analysisObject['analysisForthLevel']==''){
        this.baiscShow();
      }else if(this.analysisObject['analysisForthLevel']!=''){
        this.situationShow();
      }
    },
    baiscShow(){
      this.loading=true;
      this.$request({
        url:'/YWTBApi/getBanjianCountGroupType',
        method:'post',
        data:{
          "DATA_TYPE":this.analysisObject['analysisFirstLevel'],
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
          'TYPE':this.analysisObject['analysisThirdLevel'],
          'DAY_COUNT':this.analysisObject['analysisTimer'],
          "UNIT_NAME":this.analysisObject['analysisUnit'],
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.basicList = [];
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].NAME!=undefined){
              dataArr[i].chosen = false;
              this.basicList.push(dataArr[i]);
            }
          }
          this.totalCount = response.data.msg[0].TotalRowCount;
        }else{
          this.basicList = [];
          this.totalCount =0;
        }
        this.$nextTick(() => {
          this.loading=false;
          // this.stopTimer();
          // if(this.basicList.length > 0){
          //   this.startTimer()
          // }
        })
      })
    },
    itemShow(){
      this.loading=true;
      this.$request({
        url:'/YWTBApi/queryBanjianListGroupMatterCode',
        //url:'/YWTBApi/queryBanjianListGroupMatterCode',
        method:'post',
        data:{
          "ORGANIZATION":this.analysisObject['analysisSecondLevel'],
          'TYPE':this.analysisObject['analysisThirdLevel'],
          'MATTER_CODE':this.analysisObject['analysisForthLevel'],
          'DAY_COUNT':this.analysisObject['analysisTimer'],
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.itemList = [];
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].NAME!=undefined){
              this.itemList.push(dataArr[i]);
            }
          }
          this.totalCount = response.data.msg[0].TotalRowCount;
        }else{
          this.itemList = [];
          this.totalCount = 0;
        }
        this.$nextTick(() => {
          this.loading=false;
          // this.stopTimer();
          // if(this.itemList.length > 0){
          //   this.startTimer()
          // }
        })
      })
    },
    situationShow(){
      this.loading=true;
      this.$request({
        url:'/YWTBApi/queryBanjianListGroupSituationCode',
        method:'post',
        data:{
          // 'ORGANIZATION':this.secondLevel,
          // 'TYPE':this.thirdLevel,
          'MATTER_CODE':this.analysisObject['analysisForthLevel'],
          'DAY_COUNT':this.analysisObject['analysisTimer'],
        }
      }).then(response => {
        let dataArr = response.data.msg[0].Rows
        if(dataArr.length > 0){
          this.situationList = [];
          for(let i=0;i<dataArr.length;i++){
            if(dataArr[i].SITUATION!=undefined){
              dataArr[i].chosen = false;
              this.situationList.push(dataArr[i]);
            }
          }
          this.totalCount = response.data.msg[0].TotalRowCount;
        }else{
          this.situationList = [];
          this.totalCount = 0;
        }
        this.$nextTick(() => {
          if(this.analysisObject['analysisFifthLevel']!=''){
            this.chooseStepOrigion(this.analysisObject['analysisFifthLevel']);
          }
          this.loading=false;
          // this.stopTimer();
          // if(this.situationList.length > 0){
          //   this.startTimer()
          // }
        })
      })
    },
    stopHight(index) {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs['situation_list'];
      // 拿到表格中承载数据的div元素
      //const divData = table.clientHeight;
      // 拿到元素后，对元素进行增加距离顶部距离，实现滚动效果
      // 元素自增距离顶部像素
      // divData.scrollTop += this.rollPx;
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      this.$nextTick(() => {
        table.scrollTop = (index) * 36;
      })
    },
    startTimer(){
      if(this.$refs['scroll-list'].clientHeight * 1 > this.$refs['scroll-list'].parentElement.clientHeight * 1) {
        scrollFun(this.$refs['scroll-list'], 'top', -this.$refs['scroll-list'].clientHeight + this.$refs['scroll-list'].parentElement.clientHeight)
      }
    },
    stopTimer(){
      if(this.$refs['scroll-list']!=undefined)
        rescrollFun(this.$refs['scroll-list'],'top')
    },
    pauseTimer(){
      if(this.$refs['scroll-list']!=undefined)
        stopScroll(this.$refs['scroll-list'].timer)
    },
    continueTimer(){
      if(this.$refs['scroll-list'].clientHeight * 1 > this.$refs['scroll-list'].parentElement.clientHeight * 1) {
        continueScroll(this.$refs['scroll-list'], 'top', -this.$refs['scroll-list'].clientHeight + this.$refs['scroll-list'].parentElement.clientHeight)
      }
    },
    ...mapMutations(['analysis','analysisRefresh','analysisSingleChange'])
  },
  watch: {
    analysisObject(){
      this.typeShow()
      //this.chooseStepOrigion(val['analysisFifthLevel']);
    },
  }
}
</script>

<style scoped lang="scss">
#analysis-three-type{
  .black-title{
    height: 32px;
    display: flex;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    justify-content: flex-end;
    align-items: center;
    .header_info{

      width: 40%;
      display: flex;
      align-items: center;
      justify-content:center;
    }
    .table_info{
      width:30%;
      font-size: 12px;
      font-weight: normal;
      display: flex;
      align-items:flex-end;
      justify-content:flex-end;
    }
  }
  .time_content {
    padding-top: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .time_content_title {
      width: 100%;
      height: 15%;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;

      .table_info {
        padding: 8px 10px 4px;
        color: #fff;
      }
    }
    .first_list{
      width: 100%;
      height: 100%;
    }
  }
  ul{
    width: 100%;
    position: absolute;
    cursor: pointer;
    .item_choose{
      color: #fdbf00;
    }
    li{

      padding-left: 10px;
      padding-right: 10px;
      color: #fff;
      height: 40px;
      line-height: 40px;
      .nameStatus{
        width: 60%;
        float: left;
        margin-right: 30px;
      }
      .fr-typeStatus{
        width: 15%;
        float: right;
        margin-right: 20px;
      }
      .fr-countStatus{
        width: 6%;
        float: right;
        margin-right: 10px;
      }
      .name{
        margin-right: 6px;
      }
      &:nth-child(2n+1){
        background:linear-gradient(to right,#093972, #093972);

      }
    }
    li:hover{
      color: #fdbf00;
    }
  }
  .else_div{
    padding-top: 50px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    span{
      color: #00d8ff;
    }
  }
}

</style>
