<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>
    <notice-detail-dialog
      :visible.sync="detailDialog.visible"
      :title="detailDialog.title"
      :content="detailDialog.content"
      :published-time="detailDialog.publishedTime"
      :file-name="detailDialog.fileName"
      :file-path="detailDialog.filePath"
      :show-confirm-button="detailDialog.showConfirmButton"
      :confirm-loading="detailDialog.confirmLoading"
      @confirm="handleDetailConfirm"
      @open-file="downLoadFile"
      @closed="handleDetailClosed"
    />
  </div>
</template>
<script>
import { setSystemNoticeHaveRead } from '@/api/global'
import { getBasicDataSelects } from '@/api/dictionary/dictionary'
import NoticeDetailDialog from '@/views/trials/components/NoticeDetailDialog'
const detailDialogDefault = () => {
  return {
    visible: false,
    title: '',
    content: '',
    publishedTime: '',
    fileName: '',
    filePath: '',
    showConfirmButton: false,
    confirmLoading: false,
    noticeId: null
  }
}
export default {
  name: 'NoticeMarquee',
  components: { NoticeDetailDialog },
  data() {
    return {
      noteType: [],
      detailDialog: detailDialogDefault()
    }
  },
  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
      }
      this.detailDialog = {
        visible: true,
        title: currentNoticeType,
        content: item.Content || '',
        publishedTime: item.PublishedTime || '',
        fileName: item.FileName || '',
        filePath: item.Path || '',
        showConfirmButton: true,
        confirmLoading: false,
        noticeId: item.Id
      }
    },
    async handleDetailConfirm() {
      if (!this.detailDialog.noticeId) {
        return
      }
      this.detailDialog.confirmLoading = true
      try {
        const res = await setSystemNoticeHaveRead(this.detailDialog.noticeId)
        if (res.IsSuccess) {
          await this.$store.dispatch('global/getNoticeList')
          this.detailDialog.visible = false
        }
      } catch (err) {
        console.log(err)
      } finally {
        this.detailDialog.confirmLoading = false
      }
    },
    handleDetailClosed() {
      this.detailDialog = detailDialogDefault()
    },
    downLoadFile(filePath) {
      if (!filePath) return
      window.open(this.OSSclientConfig.basePath + filePath, '_blank')
    },
    getDicData() {
      getBasicDataSelects(['NoteType']).then(res => {
        this.noteType = res.Result.NoteType
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.notice-marquee_wrapper{
  width: 100%;
  display: flex;
  align-items: center;
  ::v-deep .el-dialog__header{
    padding: 10px;
  }
  ::v-deep .el-dialog__body{
    padding: 10px 20px;
    line-height: 25px;
  }
}
</style>
