<template>
  <div>
    <div class="text-center" :style="{height:height,width:width}">
      <div class="inner-center">
        <p class="text"
           v-for="(text, index) in arr"
           :key="index"
           v-on:mouseover="changeActive"
           v-on:mouseout="removeActive"
           @click="chooseWarn(text)">
          {{text}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {listUnNotice} from "@/api/system/notice";
  const totalDuration = 2000;

  export default {
    name: "centerChart",
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '1.7rem'
      }
    },
    data() {
      return {
        arr: [],
        number: 0,
        // 查询参数
        queryParams: {},
      }
    },
    computed: {
      text() {
        return {
          id: this.number,
          val: this.arr[this.number]
        }
      }
    },
    created() {
    },
    mounted() {
      // this.startMove()
    },
    methods: {
      /** 查询报警记录管理列表 */
      devCenterData(plantIds ,unitIds) {
        this.loading = true;
        let params = {
          'plantIds': plantIds,
          'unitIds': unitIds
        }
        listUnNotice().then(response => {
          this.arr = []
          for (let i = 0; i < response.length; i++) {
            this.arr.push(response[i].noticeTitle)
          }
          //设置文字滚动一轮时间
          let elem = document.querySelector('.inner-center');
          let state = elem.style['animation'];
          let time = this.arr.length * 1 + 5
          elem.style['animation'] = 'myMove1 ' + time + 's linear infinite';
          //设置文字无缝滚动高度
          let param = this.arr.length * 30 + 5
          let myFirstkeyframes = "@keyframes myMove1 {0% {transform: translateY(100px);}100% {transform: translateY(-" + param +"px);}}";
          let style = document.createElement("style");
          style.setAttribute("type", "text/css");
          document.head.appendChild(style);
          const sheet = style.sheet;
          sheet.insertRule(myFirstkeyframes, 0);
          this.loading = false;
        });
      },
      // 鼠标移入
      changeActive() {
        let elem = document.querySelector('.inner-center');
        let state = elem.style['animationPlayState'];
        elem.style['animationPlayState'] = 'paused';
      },
      // 鼠标移出
      removeActive() {
        let elem = document.querySelector('.inner-center');
        let state = elem.style['animationPlayState'];
        elem.style['animationPlayState'] = 'running';
      },
      //点击事件
      chooseWarn(data) {
        var warnType = data.split("（")
        var type = warnType[0];
        if (type === '安全阀清单') {
          this.$router.push("/reliability/safetyvavle");
        }else if (type === "环保批文清单") {
          this.$router.push("/ehs/environapproval");
        }
      },
      // startMove() {
      //   if (this.remove === true) {
      //     let timer = setTimeout(() => {
      //       if (this.number === 3) {
      //         this.number = 0;
      //       } else {
      //         this.number += 1;
      //       }
      //       this.startMove();
      //     }, totalDuration)
      //   }
      // },
    },
  }
</script>

<style scoped>
  .text-center {
    line-height: 30px;
    /*border: 1px solid cornflowerblue;*/
    overflow: hidden;
  }
  .text {
    margin: 0 0 0 10px;
    cursor: pointer;  /*鼠标悬停变小手*/
    color: #ffffff;
    font-size: 12px;
  }
  p:hover {
    background-color: #296b9bb5;
  }
  .inner-center {
    /*animation: myMove 10s linear infinite;*/
    animation-fill-mode: forwards;
  }
  /*文字无缝滚动*/
  /*@keyframes myMove {
    0% {
      transform: translateY(200px);
    }
    100% {
      transform: translateY(-400px);
    }
  }*/
  /*文字停顿滚动*/
  @keyframes myMove2 {
    0% {
      transform: translateY(0);
    }
    10% {
      transform: translateY(-20px);
    }
    20% {
      transform: translateY(-20px);
    }
    30% {
      transform: translateY(-40px);
    }
    40% {
      transform: translateY(-40px);
    }
    50% {
      transform: translateY(-60px);
    }
    60% {
      transform: translateY(-60px);
    }
    70% {
      transform: translateY(-80px);
    }
    80% {
      transform: translateY(-80px);
    }
    90% {
      transform: translateY(-100px);
    }
    100% {
      transform: translateY(-100px);
    }
  }

</style>
