<template>
  <div class="notice">
    <div>
      <dv-border-box-12>
        <p class="title">通知</p>

        <dv-decoration-1 class="desc" />
      </dv-border-box-12>
    </div>
    <div style="overflow: hidden">
      <dv-border-box-1>
        <div class="pt-5 pr-5 pb-5 pl-5 d-flex ai-center word-container">
          <div class="word-scroll">
            <span v-for="(item, index) in notice" :key="item.id">
              {{index+1}}. {{ item.shifoujinji == 1 ? '收到紧急通知：' : '' }}{{item.content}}【{{item.created_at}}】
            </span>
          </div>
        </div>
      </dv-border-box-1>
    </div>
  </div>
</template>

<script>
import { refreshNoticeTime } from "@/settings"
import { index } from "@/api/system/baseForm";
export default {
  inject: ['showModal'],
  data() {
    return {
      notice: [],
      timer: null,
      forwardRefreshTime: '',
    }
  },
  methods: {
    async getNotice (isFirst = false) {
      if (isFirst) {
        this.forwardRefreshTime = this.$moment()
        const res = await index({
          table_name: "notices",
          page: 1,
          page_size: 999,
          filter: [
            {
              key: "created_at",
              op: "like",
              value: this.$moment().format('YYYY-MM-DD')
            }
          ]
        },false)
        this.notice = res.data;
      } else {
        const res = await index({
          table_name: "notices",
          page: 1,
          page_size: 999,
          filter: [
            {
              key: "created_at",
              op: "range",
              value: `${this.forwardRefreshTime.format('YYYY-MM-DD HH:mm:ss')},${this.$moment().format('YYYY-MM-DD HH:mm:ss')}`
            }
          ]
        },false)
        if (res.data.length > 0) {
          this.notice.push(...res.data)
          res.data.forEach(i => {
            this.showModal(i.shifoujinji,i.content)
          })
        }
        this.forwardRefreshTime = this.$moment()
      }
    }
  },
  computed: {},
  created() {
    this.getNotice(true)
  },
  mounted() {
    this.timer = setInterval(() => {
      this.getNotice()
    },refreshNoticeTime)
  },
  destroyed() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped lang="scss">
.notice {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-gap: 10px;
  height: 120px;
  width: 100%;
  .title {
    color: #000;
    text-shadow: 1px 0 #eee ,1px 1px #eee ,0 1px #eee ,-1px 0 #eee, 0 -1px #eee,-1px -1px #eee;
    line-height: 120px;
    font-size: 30px;
    text-align: center;
    letter-spacing: 10px;
  }
  .desc {
    width: 40px;
    height: 20px;

    position: absolute;
    top: 10%;
    right: 10%;
  }
}

.word-container {
  height: 100%;
  width: 96%;
  overflow: hidden;
  margin: auto;

  &:hover {
    .word-scroll {
      animation-play-state: paused;
    }
  }
}
.word-scroll {
  font-size: 25px;
  word-break: keep-all;
  white-space: nowrap;
  text-shadow: 1px 1px #fff8;
  animation: word-scroll 24s infinite linear;

}
@keyframes word-scroll {
  from {
    transform: translateX(1650px);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>
