<template>
  <div id="dgNotice" class="dg-notice" @mouseenter="stopSwiper" @mouseleave="moveSwiper">
    <img width="16px" height="16px" class="noticeImg" src="../assets/images/notice.png" />
    <swiper v-if="noticeData.length" id="mySwiper1" ref="mySwiper" class="swiper-wrap" :options="swiperOption">
      <swiper-slide v-for="(item, index) in noticeData" :key="index" class="swiperNotice">
        <span>{{ item.TITLE }}</span>
        <!-- <span>{{ item.BODY }}</span> -->
      </swiper-slide>
    </swiper>
    <div v-if="showContent" class="showContent1">
      <!-- <p>{{noticeData[arrLen].remark}}</p> -->
      <p>{{ noticeData[arrLen].BODY }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DgNotice',
  data() {
    return {
      noticeData: [],
      activeIndex: 0,
      swiperOption: {
        notNextTick: true,
        initialSlide: 0,
        loop: true,
        // speed: 50000,
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        autoplay: {
          delay: 2000,
          stopOnLastSlide: false,
          disableOnlnteraction: true,
        },
        freeModel: true,
        grabCursor: false,
        setWrapperSize: true,
        autoHeight: true,
        mousewhellControl: false,
        on: {
          transitionEnd: function () {
            // 根据实际内容宽度不同自定义速度
            let mySpeed = this.slidesSizesGrid[this.realIndex] * 20
            this.params.speed = mySpeed
          },
        },
      },
      showContent: false,
      arrLen: 0,
      len: '',
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
    getColor() {
      return function (index) {
        switch (index) {
          case 0:
            return 'danger'
          case 1:
            return 'success'
          case 2:
            return 'warning'
          default:
            return 'info'
        }
      }
    },
    getHeight() {
      return document.body.clientHeight - 100
    },
  },
  created() {
    this.getNoticeList()
  },
  methods: {
    stopSwiper() {
      this.swiper.autoplay.stop()
      // this.getStyle()
      let arrLen = this.swiper.realIndex
      if (this.swiper.animating) {
        arrLen = this.swiper.realIndex - 1
        if (arrLen < 0) {
          arrLen = this.swiper.loopedSlides - 1
        }
        this.swiper.slideToLoop(arrLen, 1)
      }
      this.arrLen = arrLen
      console.log(this.swiper.realIndex, arrLen, this.swiper.animating, this.swiper)
      this.showContent = true
    },
    // getStyle () {
    //   this.$nextTick(() => {
    //     let style = document.getElementById('mySwiper1').children[0].style.transform
    //     let val = style.slice(style.indexOf('(') + 2, style.indexOf(',') - 2)
    //     let swiperNoticeWidth = document.getElementsByClassName('swiperNotice')[0].offsetWidth
    //     this.arrLen = (val / swiperNoticeWidth) - 1
    //     if (this.len == this.arrLen) {
    //       this.arrLen = 0
    //     }
    //   })
    // },
    moveSwiper() {
      this.showContent = false
      this.swiper.autoplay.start()
    },
    // 获取公告列表
    async getNoticeList() {
      // 默认最多取前5
      try {
        const res = await this.$api.DgJsonStore({
          apiCode: 'sysNotice',
          params: `command=init&limit=-1&start=0&state=ONLINE`,
        })
        let data = res.root
        this.noticeData = data
        this.len = data.length
        // const res = await sysNotice()
        // const res = {
        //   data: {
        //     status: 0,
        //     data: [
        //       {title: '公告1：',  publishDate: '111内容内容内容'},
        //       {title: '公告2：',  publishDate: '222内容内容内容'},
        //       {title: '公告3：',  publishDate: '333内容内容内容'}
        //     ]
        //   }
        // }
        // if (res.data.status == '0') {
        //   let data = res.data.data
        //   // this.noticeData = data.length > 5 ? data.slice(4) : data
        //   this.noticeData = data
        //   this.len = data.length
        // } else {
        //   throw new Error('获取数据失败')
        // }
      } catch (e) {
        console.log(e)
      }
    },
  },
}
</script>
