<template>
  <div>
    <div :style="{height:height,width:width}" class="text-container">
      <ul class="allNotice" @mouseleave="handleMouseLeave" @mouseover="handleMouseOver">
        <li v-for="(item,index) in noticeList" class="info">
          <span
            style="padding-left: 20px; display: inline-block; width: 30%;color: #000">截止日期：{{
              parseTime(item.deadline, '{yyyy}-{mm}-{dd}')
            }}</span>
          <span style="padding-left: 20px; display: inline-block; width: 60%;color: #000">{{ item.planName }}</span>
          <span style="padding-left: 20px; display: inline-block; width: 10%">
            <el-tag v-if="item.status==0" effect="dark" type="danger">未完成</el-tag>
            <el-tag v-if="item.status==1" effect="dark" type="success">已完成</el-tag>
                      </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {listAllPlan} from "@/api/patrol/patrol/plan";

export default {
  name: "NoticeChart",
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '570px'
    }
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        planQuarter: new Date().getMonth() + 1, planYear: new Date().getFullYear()
      },
      // 公示公告列表
      noticeList: null,
    }
  },
  created() {
    this.listNoticeNoPage();
  },
  methods: {
    handleMouseOver() {
      let elem = document.querySelector('.allNotice');
      elem.style['animation-play-state'] = 'paused';
    },
    handleMouseLeave() {
      let elem = document.querySelector('.allNotice');
      elem.style['animation-play-state'] = 'running';
    },
    listNoticeNoPage() {
      listAllPlan(this.queryParams).then(response => {
        this.noticeList = response.data;
        //判断是否需要滚动
        if (this.noticeList.length > 4) {
          //设置文字滚动一轮时间
          let elem = document.querySelector('.allNotice');
          let state = elem.style['animation'];
          let time = this.noticeList.length * 2
          elem.style['animation'] = 'myMove2 ' + time + 's linear infinite';
          let state1 = elem.style['animation-fill-mode'];
          elem.style['animation-fill-mode'] = 'forwards';
          //设置文字无缝滚动高度
          let param = this.noticeList.length * 50
          let myFirstkeyframes = "@keyframes myMove2{0% {transform: translateY(200px);}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);
        }
      });
    },
  }
}
</script>

<style scoped>
.text-container {
  line-height: 30px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.6);
  padding-top: 10px;
}

.dangao {
  width: 40px !important;
  height: 40px !important;
}

.info {
  //font-weight: bold;
  list-style: none;
  display: flex;
  margin: 10px 0 0 0;
  align-items: center; /* 垂直居中 */
  /*border-radius:5px 5px 5px 5px ;*/
  /*border: 2px solid rgba(41, 107, 155, 0.71);*/
  background-color: transparent;
  border-bottom: 1px dashed #C0C0C0;
}

.allNotice {
  margin: -10px 0 0 0;
  padding: 0 20px 0 20px;
  /*animation: myMove 10s linear infinite;
  animation-fill-mode: forwards;*/
}

/*文字无缝滚动*/
/*@keyframes myMove {
  0% {
    transform: translateY(200px);
  }
  100% {
    transform: translateY(-300px);
  }
}*/

/*文字停顿滚动*/
@keyframes myMove2 {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-30px);
  }
  20% {
    transform: translateY(-30px);
  }
  30% {
    transform: translateY(-60px);
  }
  40% {
    transform: translateY(-60px);
  }
  50% {
    transform: translateY(-90px);
  }
  60% {
    transform: translateY(-90px);
  }
  70% {
    transform: translateY(-120px);
  }
  80% {
    transform: translateY(-120px);
  }
  90% {
    transform: translateY(-150px);
  }
  100% {
    transform: translateY(-150px);
  }
}


</style>
