<template>
<div id="total-handle" class="block h100">
  <div class="black-title">办件情况</div>
  <div class="handle_content">
    <div class="title_total">
      <div class="total_left"></div>
      <div class="total_middle">
<!--        <span class="middle_img"></span>-->
        <span class="middle_font">近一年</span>
      </div>
      <div class="total_right"></div>
    </div>
    <div class="title_number" @click="showTypeAnalysis('')">
      <div class="c">
        <div class="box-item">
          <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
              v-for="(item,index) in orderNumAll"
              :key="index">
              <span v-if="!isNaN(item)">
                <i ref="numberItem">0123456789</i>
              </span>
            <span class="comma" v-else>{{item}}</span>
          </li>
        </div>
      </div>
    </div>
    <div class="devide_content">

      <div class="title_number_single">
        <div class="title_single">
          <span class="single_font">网办</span>
        </div>
        <div class="c" @click="showTypeAnalysis('1')">
          <div class="box-item">
            <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
                v-for="(item,index) in orderNumWb"
                :key="index">
              <span v-if="!isNaN(item)">
                <i ref="numberItemWb">0123456789</i>
              </span>
              <span class="comma" v-else>{{item}}</span>
            </li>
          </div>
        </div>
      </div>
      <div class="title_number_single">
        <div class="title_single">
          <span class="single_font">全程网办</span>
        </div>
        <div class="c"  @click="showTypeAnalysis('4')">
          <div class="box-item">
            <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
                v-for="(item,index) in orderNumQcwb"
                :key="index">
              <span v-if="!isNaN(item)">
                <i ref="numberItemQcwb">0123456789</i>
              </span>
              <span class="comma" v-else>{{item}}</span>
            </li>
          </div>
        </div>
      </div>
      <div class="title_number_single">
        <div class="title_single">
          <span class="single_font">好办</span>
        </div>
        <div class="c"  @click="showTypeAnalysis('2')">
          <div class="box-item">
            <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
                v-for="(item,index) in orderNumHb"
                :key="index">
              <span v-if="!isNaN(item)">
                <i ref="numberItemHb">0123456789</i>
              </span>
              <span class="comma" v-else>{{item}}</span>
            </li>
          </div>
        </div>
      </div>
      <div class="title_number_single">
        <div class="title_single">
          <span class="single_font">快办</span>
        </div>
        <div class="c"  @click="showTypeAnalysis('3')">
          <div class="box-item">
            <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
                v-for="(item,index) in orderNumKb"
                :key="index">
              <span v-if="!isNaN(item)">
                <i ref="numberItemKb">0123456789</i>
              </span>
              <span class="comma" v-else>{{item}}</span>
            </li>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
</template>

<script>
//import {setEventStaOption} from "../../echarts/option";

import {mapMutations} from "vuex";

export default {
  name: "TotalHandle",
  data() {
    return {
      numTotal:'',
      numWb:'',
      numKb:'',
      numHb:'',
      numQcwb:'',
      orderNumAll: [ '0', '0', ',', '0', '0', '0', ',', '0','0','0'],
      orderNumWb: ['0', '0', '0' ,'0', '0', '0'],
      orderNumQcwb: [ '0','0', '0' ,'0', '0', '0'],
      orderNumHb: [ '0','0', '0' ,'0', '0', '0'],
      orderNumKb: [ '0','0', '0' ,'0', '0', '0'],
    }
  },
  mounted() {
    this.timer = setInterval(this.updatetransferqk, 15000);
    this.remindSearch();
  },
  methods:{
    remindSearch(){
      this.$request({
        url:'/YWTBApi/getBanjianDataCount',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
            this.numTotal = dataArr[i].dataCount;
            this.toOrderNum(dataArr[i].dataCount) // 这里输入数字即可调用
            this.setNumberTransform();
            this.numWb = dataArr[i].wbCount;
            this.toOrderNumWb(dataArr[i].wbCount) // 这里输入数字即可调用
            this.setNumberTransformWb();
            this.numKb = dataArr[i].kbCount;
            this.toOrderNumKb(dataArr[i].kbCount) // 这里输入数字即可调用
            this.setNumberTransformQcwb();
            this.numHb = dataArr[i].hbCount;
            this.toOrderNumHb(dataArr[i].hbCount) // 这里输入数字即可调用
            this.setNumberTransformHb();
            this.numQcwb = dataArr[i].qcwbCount;
            this.toOrderNumQcwb(dataArr[i].qcwbCount) // 这里输入数字即可调用
            this.setNumberTransformKb();
        }

      })
    },
    setNumberTransform () {
      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
    setNumberTransformHb () {
      const numberItems = this.$refs.numberItemHb // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNumHb.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
    setNumberTransformWb() {
      const numberItems = this.$refs.numberItemWb // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNumWb.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
    setNumberTransformKb () {
      const numberItems = this.$refs.numberItemKb // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNumKb.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
    setNumberTransformQcwb () {
      const numberItems = this.$refs.numberItemQcwb // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNumQcwb.filter(item => !isNaN(item))
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
      }
    },
    toOrderNum(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 8) {
        num = '0' + num // 如未满八位数，添加"0"补位
        this.toOrderNum(num) // 递归添加"0"补位
      } else if (num.length === 8) {
        this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning('总量数字过大，显示异常')
      }
    },
    toOrderNumHb(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 6) {
        num = '0' + num // 如未满八位数，添加"0"补位
        this.toOrderNumHb(num) // 递归添加"0"补位
      } else if (num.length === 6) {
        this.orderNumHb = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning('总量数字过大，显示异常')
      }
    },
    toOrderNumKb(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 6) {
        num = '0' + num // 如未满八位数，添加"0"补位
        this.toOrderNumKb(num) // 递归添加"0"补位
      } else if (num.length === 6) {
        this.orderNumKb = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning('总量数字过大，显示异常')
      }
    },
    toOrderNumWb(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 6) {
        num = '0' + num // 如未满八位数，添加"0"补位
        this.toOrderNumWb(num) // 递归添加"0"补位
      } else if (num.length === 6) {
        this.orderNumWb = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning('总量数字过大，显示异常')
      }
    },
    toOrderNumQcwb(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 6) {
        num = '0' + num // 如未满八位数，添加"0"补位
        this.toOrderNumQcwb(num) // 递归添加"0"补位
      } else if (num.length === 6) {
        this.orderNumQcwb = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning('总量数字过大，显示异常')
      }
    },
    firstNum(num){
      this.toOrderNum(num);
      this.setNumberTransform()
    },
    firstNumHb(num){
      this.toOrderNumHb(num);
      this.setNumberTransformHb()
    },
    firstNumKb(num){
      this.toOrderNumKb(num);
      this.setNumberTransformKb()
    }, firstNumWb(num){
      this.toOrderNumWb(num);
      this.setNumberTransformWb()
    }, firstNumQcwb(num){
      this.toOrderNumQcwb(num);
      this.setNumberTransformQcwb()
    },
    updateToParent(){
      const secounds = 15
      let num = 0
      const timer = setInterval(() => {
        if(num < secounds) {
          num++
        }else {
          clearInterval(timer);
          this.updateAll();
        }
      }, 100)

    },
    updateAll(){
      this.$request({
        url:'/YWTBApi/getBanjianDataCount',
        method:'post',
        data:{
        }
      }).then(response => {
        var dataArr = response.data.msg[0].Rows;
        for(let i=0;i<dataArr.length;i++){
            this.numTotal = dataArr[i].dataCount;
            this.firstNum(dataArr[i].dataCount) // 这里输入数字即可调用
            this.numWb = dataArr[i].wbCount;
            this.firstNumWb(dataArr[i].wbCount) // 这里输入数字即可调用
            this.numKb = dataArr[i].kbCount;
            this.firstNumKb(dataArr[i].kbCount) // 这里输入数字即可调用
            this.numHb = dataArr[i].hbCount;
            this.firstNumHb(dataArr[i].hbCount) // 这里输入数字即可调用
            this.numQcwb = dataArr[i].qcwbCount;
            this.firstNumQcwb(dataArr[i].qcwbCount) // 这里输入数字即可调用
        }
      })
    },
    updateToZero(){
      this.firstNum('00000000');
      this.firstNumHb('00000');
      this.firstNumKb('00000');
      this.firstNumWb('00000');
      this.firstNumQcwb('00000');
    },
    updatetransferqk(){
      this.updateToZero();
      this.updateToParent();
    },
    showTypeAnalysis(index){
      this.$router.push('/origion/handleAnalysis');
      this.analysisRefresh(false);
      this.$nextTick(() => {
        //this.analysisTimer('365');
        // this.analysisUrgeType('SL_TX');
        // this.analysisFirstLevel(index);
        this.analysisSingleChange([
          {
            name:'analysisFirstLevel',
            value:index
          },
          {
            name:'analysisTimer',
            value:'365'
          },
          {
            name:'analysisUrgeType',
            value:'SL_TX'
          },
        ])
      })

    },
    ...mapMutations(['analysis','analysisRefresh','analysisSingleChange'])
  },
}
</script>

<style scoped lang="scss">
#total-handle{
  .handle_content{
    padding-top: 5px;
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title_total{
      width: 100%;
      height:10%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .total_left{
        width:93px;
        height:2px ;
        background: url("../../assets/imgs/右.png") no-repeat;
        background-size: 100%;
      }
      .total_middle{
        width: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        .middle_img{
          width: 24px;
          height: 24px;
          background: url("../../assets/imgs/提醒总量.png") no-repeat;
          background-size: 100%;
        }
        .middle_img_bottom{
          width: 24px;
          height: 24px;
          background: url("../../assets/imgs/督办总量.png") no-repeat;
          background-size: 100%;
        }
        .middle_font{
          display: flex;
          align-items: center;
          font-size: 16px;
          color:#fff;
        }
      }
      .total_right{
        width:93px;
        height:2px ;
        background: url("../../assets/imgs/左.png") no-repeat;
        background-size: 100%;
      }
    }
    .title_number{
      cursor: pointer;
      width: 100%;
      height:30%;
      .c{
        width: 100%;
        height:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .box-item {
          width: 100%;
          text-align: center;
          line-height: 30px;
          font-size: 40px;
          //padding: 2% 0;
          position: relative;
          list-style: none;
          writing-mode: vertical-lr;
          text-orientation: upright;
          /*文字禁止编辑*/
          -moz-user-select: none; /*火狐*/
          -webkit-user-select: none; /*webkit浏览器*/
          -ms-user-select: none; /*IE10*/
          -khtml-user-select: none; /*早期浏览器*/
          user-select: none;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: center;
          align-items: center;
        }

        /* 默认逗号设置 */
        .mark-item {
          width: 10px;
          height: 65px;
          margin-right: 5px;
          line-height: 10px;
          font-size: 40px;
          font-weight: bold;
          color: #CCE6FF;
          position: relative;
        }
        .mark-item span {
          position: absolute;
          width: 100%;
          bottom: 0;
          writing-mode: vertical-rl;
          text-orientation: upright;

        }
        /*滚动数字设置*/
        .number-item {
          margin-left: 10%;
          width: 55px;
          height: 65px;
          /*background: #ccc;*/
          list-style: none;
          margin-right: 5px;
          /*background:rgba(250,250,250,1);*/
          border-radius: 4px;
          border: 1px solid #8BC5FF;
          //border: 1px solid rgba(221, 221, 221, 1);
          //background: url('../../assets/imgs/矩形数字.png') center no-repeat;
          //background-size: 100% 100%;
          //border:none;

        }

        .number-item:first-child {
          margin-left: 0;
        }

        .number-item span {
          position: relative;
          display: inline-block;
          margin-right: 10px;
          width: 100%;
          height: 100%;
          writing-mode: vertical-rl;
          text-orientation: upright;
          overflow: hidden;

        }

        .number-item span i {
          font-style: normal;
          position: absolute;
          font-size: 60px;
          font-weight: bold;
          color: #CCE6FF;
          top: -10px;
          left: 50%;
          transform: translate(-50%, 0);
          transition: transform 3s ease-in-out;
          letter-spacing: 10px;
        }

        .number-item:last-child {
          margin-right: 0;
        }

      }
    }
    .devide_content{
      width: 100%;
      height:70%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      .title_number_single{
        width: 40%;
        height:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .title_single{
          width: 100%;
          height: 30%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .single_font{
            font-size: 14px;
            color:#fff;
          }
        }
        .c{
          width: 100%;
          height:70%;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .box-item {
            width: 100%;
            text-align: center;
            line-height: 30px;
            font-size: 40px;
            //padding: 2% 0;
            position: relative;
            list-style: none;
            writing-mode: vertical-lr;
            text-orientation: upright;
            /*文字禁止编辑*/
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
          }

          /* 默认逗号设置 */
          .mark-item {
            width: 10px;
            height: 65px;
            margin-right: 5px;
            line-height: 10px;
            font-size: 40px;
            font-weight: bold;
            color: #CCE6FF;
            position: relative;
          }
          .mark-item span {
            position: absolute;
            width: 100%;
            bottom: 0;
            writing-mode: vertical-rl;
            text-orientation: upright;

          }
          /*滚动数字设置*/
          .number-item {
            margin-left: 10%;
            width: 40px;
            height: 50px;
            /*background: #ccc;*/
            list-style: none;
            margin-right: 5px;
            /*background:rgba(250,250,250,1);*/
            border-radius: 4px;
            border: 1px solid #8BC5FF;
            //border: 1px solid rgba(221, 221, 221, 1);
            //background: url('../../assets/imgs/矩形数字.png') center no-repeat;
            //background-size: 100% 100%;
            //border:none;

          }

          .number-item:first-child {
            margin-left: 0;
          }

          .number-item span {
            position: relative;
            display: inline-block;
            margin-right: 10px;
            width: 100%;
            height: 100%;
            writing-mode: vertical-rl;
            text-orientation: upright;
            overflow: hidden;

          }

          .number-item span i {
            font-style: normal;
            position: absolute;
            font-size: 50px;
            font-weight: bold;
            color: #CCE6FF;
            top: -10px;
            left: 50%;
            transform: translate(-50%, 0);
            transition: transform 3s ease-in-out;
            letter-spacing: 10px;
          }

          .number-item:last-child {
            margin-right: 0;
          }

        }
      }
    }
  }
}
</style>
