<template>
  <div class="notice-marquee_wrapper">
    <marquee ref="mar" hspace="0" direction="left" width="100%" @mouseout="start()" @mouseover="stop()">
      <!-- <i class="el-icon-message-solid" /> -->
      <svg-icon v-if="noticeList.length > 0" icon-class="speaker" />
      <span v-for="item in noticeList" :key="item.Id" style="cursor:pointer;" @click="showDetail(item)">
        {{ item.Content }}
      </span>
    </marquee>
  </div>
</template>
<script>
import { setSystemNoticeHaveRead } from '@/api/global'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
export default {
  name: 'NoticeMarquee',
  data() {
    return {
      noteType: []
    }
  },
  computed: {
    noticeList() {
      return this.$store.state.global.noticeList || []
    }
  },
  mounted() {
    this.getDicData()
  },
  methods: {
    start() {
      this.$refs['mar'].start()
    },
    stop() {
      this.$refs['mar'].stop()
    },
    showDetail(item) {
      var currentNoticeType = ''
      const i = this.noteType.findIndex(note => note.Code * 1 === item.NoticeTypeEnum)
      if (i > -1) {
        currentNoticeType = this.noteType[i].Value
      }
      const h = this.$createElement
      this.$msgbox({
        title: currentNoticeType,
        message: h('span', null, item.Content),
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            setSystemNoticeHaveRead(item.Id).then(async res => {
              if (res.IsSuccess) {
                await this.$store.dispatch('global/getNoticeList')
              }
              instance.confirmButtonLoading = false
              done()
            }).catch(() => { instance.confirmButtonLoading = false })
          } else {
            done()
          }
        }
      })
    },
    getDicData() {
      getBasicDataSelects(['NoteType']).then(res => {
        this.noteType = res.Result.NoteType
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.notice-marquee_wrapper{
  width: 100%;
  /deep/ .el-dialog__header{
    padding: 10px;
  }
  /deep/ .el-dialog__body{
    padding: 10px 20px;
    line-height: 25px;
  }
}
</style>
