<template>
  <div class="panel handleNumber">
    <div class="panel-tit">巡更信息</div>

    <div class="section1">
      <div style="width:100%; display:flex;">
        <div class="sion1_div">
          <div class="sion1_title">巡更点</div>
          <div class="sion1_cont xgd">{{pointNum}}</div>
        </div>
        <div class="sion1_div">
          <div class="sion1_title">巡更路线</div>
          <div class="sion1_cont xglx">{{lineNum}}</div>
        </div>
        <div class="sion1_div">
          <div class="sion1_title">巡更计划</div>
          <div class="sion1_cont xgjh">{{planNum}}</div>
        </div>
      </div>
    </div>
    <div class="section2">
      <div class="tit">巡更异常信息</div>
      <table class="alarm-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>时间</th>
            <th>事件</th>
          </tr>
        </thead>
      </table>
      <div class="scroll" style="height: 9.5rem;overflow: hidden;">
        <table class="alarm-table">
          <tbody id="scroll-box1">
            <tr @click="abnormal('')" v-for="item in arrayList" :key="item.id">
              <td>{{ item.id }}</td>
              <td class="online">{{ item.ecreatetime }}</td>
              <td>{{ item.eplanstate }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="panel-footer"></div>
  </div>
</template>
<script>
import api from "@/api/handleNumber"
export default {
  name: "handleNumber",
  data(){
    return {
      arrayList: [],
      pointNum:0,//巡更点
      lineNum:0,//巡更路线数量
      planNum:0,//巡更计划数量
    }
  },
  mounted() {
    var that = this
    // 初始化
    that.scroll_ber();
    api.queryPatrolling().then((response)=>{
      for(let i = 0;i<response.data.length;i++){
        var data = response.data[i]
        that.pointNum = data.pointNum
        that.lineNum  = data.lineNum
        that.planNum  = data.planNum
      }
    })

    api.queryPatrollingPlanStatus({ePlanState:"未到",pageNo:1,pageSize:10000}).then((response)=>{
      if(response.status == "SUCCESS"){
        if(response.data.pageList.length>0){
          this.arrayList = response.data.pageList
        }
      }
    })




  },
  methods: {
    scroll_ber() {
      if (this.arrayList.length > 3) {
        const dom = document.getElementById("scroll-box1");
        const that = this;
        let timer = null;
        const animationEndHandler = (evt) => {
          const dom = document.getElementById("scroll-box1");
          dom.style.cssText = "transform:translate(0,0)";
          dom.appendChild(dom.children[0]); //把第一个DOM添加到最后一个去
        };
        const mouseEnterHander = (evt) => {
          clearInterval(timer);
        };
        const initInterval = () => {
          timer = setInterval(() => {
            if (dom.children[0]) {
              let scrollHeight = dom.children[0].offsetHeight;
              scrollHeight = parseInt(scrollHeight);
              dom.style.cssText = `transform:translate(0px,-${
                scrollHeight
              }px);transition:all 1s ease;`;
            }
          }, 3000);
        };
        const mouseLeaveHandler = () => {
          initInterval();
        };
        dom.addEventListener("mouseenter", mouseEnterHander);
        dom.addEventListener("mouseleave", mouseLeaveHandler);
        dom.removeEventListener("transitionend", animationEndHandler);
        dom.addEventListener("transitionend", animationEndHandler); //只要监听到translate就会执行,这样就能一直动了
        initInterval();
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.panel.handleNumber {
  margin-top:2rem;
  box-sizing: border-box;
  padding: 0 1.2rem;
  .section1 {
    height: 11rem;
    width: 100%;
    margin: 2rem 0;
    .sion1_div{
      width:33.33%;
      margin:0 1.6rem;
    }
    .sion1_title{
      text-align:center;
      font-size:1.4rem;
      padding:1rem;
      background-color: #2d4fa8;
      white-space: nowrap;  //强制不换行
      // text-overflow:ellipsis; //省略号显示
      // overflow:hidden; //超出隐藏
      // overflow: auto; //出现滚动条
    }
    .sion1_cont{
      background-color: rgba(45,79, 168, 0.5);
      font-size: 2.3rem;
      text-align:center;
      padding:2rem 1rem;
      font-weight: 800;
    }
    .xgd{
      border-bottom:2px #e8512e solid;
      color:#e8512e;
      text-shadow: 2px 2px 20px #e8512e;
    }
    .xglx{
      border-bottom:2px #FFC659 solid;
      color:#FFC659;
      text-shadow: 2px 2px 20px #FFC659;
    }
    .xgjh{
      border-bottom:2px #00C0FF solid;
      color:#00C0FF;
      text-shadow: 2px 2px 20px #00C0FF;
    }
    > div {
      float: left;
    }
    .pie-chart {
      height: 100%;
      width: 60%;
    }
    .pie-textList {
      height: 100%;
      width: 40%;
      // background: pink;
      li {
        width: 100%;
        // border: 1px solid red;
        line-height: 4.2rem;
        display: inline-block;
        font-size: 1.4rem;
        background: url(../../../assets/handlelist-bg.png);
        text-align: center;
        padding-right: 1rem;



        > div {
          display: inline-block;
          vertical-align: center;
        }
        .num-no {
          font-size: 2rem;
          // color: #04f9ab;
          font-family: "impact";
          margin-left: 2rem;
          position: relative;
          top: 0.3rem;
        }

      }
      @media(max-width:1200px){
          li  .num-tit{
            font-size:1.2rem;
          }
          li .num-no{
            margin-left:.5rem;
          }
        }
    }
  }
  .section2 {
    box-sizing: border-box;
    .tit{
      background: linear-gradient(to right, #021132 0%, #18306d 50%, #021132 100%);
      padding: 1rem;
      color: #fff;
      text-align: center;
      font-size: 1.6rem;
      font-family: "impact";
    }
    table {
      padding: 0 1rem;
      border-spacing: 0;
    }
    tr td,
    tr th {
      font-size: 1.4rem;
      line-height: 3rem;
      text-align: left;
      padding: 0;
      margin: 0;
      border-bottom: 1px solid #1c5899;
    }
    .alarm-table tr td:first-child,
    .alarm-table tr th:first-child {
      width: 15%;
    }
    .alarm-table tr td:nth-child(2),
    .alarm-table tr th:nth-child(2) {
      width: 60%;
    }
    .alarm-table tr td:nth-child(3),
    .alarm-table tr th:nth-child(3) {
      width: 100px;
    }
    margin-bottom: 1rem;
  }
}
</style>
<style lang="scss">
</style>
