<template>
  <sh-dialog :title="title" :visible.sync="dialogVisible" :fullscreen.sync="fullscreen" :close-on-click-modal="false" center width="780px" class="notice" top="13vh" height="665px">
    <p class="title">{{ form.title }}
      <!-- <el-tag type="danger" class="tag">重要通告</el-tag> -->
    </p>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="正文" name="first">
        <sh-form>
          <sh-form-item labelWidth="0px">
            <div class="container-text w-e-text-container" :style="{height: fullscreen ? 'calc(100vh - 260px)' : 'calc(90vh - 440px)'}">
              <div class="w-e-text" v-html="form.contents"></div>
            </div>
          </sh-form-item>
        </sh-form>
      </el-tab-pane>
      <el-tab-pane label="附件" name="second">
        <sh-table ref="tableFile" :data.sync="form.listFile" :showPage="false" :empty="false" :defaultLoad="false">
          <sh-table-column type="index" label="序号" width="60"> </sh-table-column>
          <sh-table-column prop="fileName" label="附件名称" min-width="80" align="left"> </sh-table-column>
          <sh-table-column prop="fileName" label="上传时间" min-width="80">
            <template slot-scope="scope">
              <span>{{scope.row.uploadTime && $dayjs(scope.row.uploadTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
            </template>
          </sh-table-column>
          <sh-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button @click="viewPdf(scope.row)" type="text" v-if="scope.row.fileName.indexOf('.pdf') != -1">预览附件</el-button>
              <sh-view-image v-else-if="scope.row.fileName.indexOf('.png') != -1 || scope.row.fileName.indexOf('.jpg') != -1|| scope.row.fileName.indexOf('.jpeg') != -1" :api="downloadApi" :param="{id: scope.row.id}">预览附件</sh-view-image>
              <el-button @click="downLoad(scope.row)" v-if="!scope.row.canDownLoad" type="text">下载附件</el-button>
            </template>
          </sh-table-column>
        </sh-table>
      </el-tab-pane>
      <el-tab-pane label="阅读情况" name="read">
        <div style="text-align:right;line-height: 40px;padding-right:10px">
          <el-radio-group v-model.number="radio">
            <el-radio @click.native.prevent="clickRaido(1)" :label="1"> 已读：{{formData.read}}</el-radio>
            <el-radio @click.native.prevent="clickRaido(0)" :label="0"> 未读：{{formData.unread}}</el-radio>
          </el-radio-group>
        </div>
        <sh-table ref="table" :data="formData.list" :count="count" :page.sync="page" :limit.sync="limit" @loadList="getPerson()" height="335px">
          <sh-table-column type="index" label="序号" width="50"> </sh-table-column>
          <sh-table-column prop="realName" label="姓名" min-width="80" align="left"> </sh-table-column>
          <sh-table-column prop="managementName" label="部门" min-width="80" align="left"> </sh-table-column>
          <sh-table-column prop="isRead" label="阅读状态" min-width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.isRead == 0" style="color: red;">未阅读</span>
              <span v-else style="color: green;">已阅读</span>
            </template>
          </sh-table-column>
        </sh-table>
      </el-tab-pane>
    </el-tabs>

    <div slot="footer" class="dialog-footer">
      <el-button class="close-btn" :disabled="disabledClose" @click="handleRead(form)">{{closetText}}</el-button>
    </div>
    <sh-pdf-diglog :dialogVisible.sync="dialogVisiblePdf" :param="{id: pdfId}" title="附件预览" />

  </sh-dialog>
</template>

<script>
import { LIST_MAJOR_ONE, ANNEX_DOWNLOAD, GET_NOTICE_PERSON_LIST, READ_STATE_SAVE } from '@/apis/notice'
import { ShPdfDiglog } from '@/components'
export default {
  components: { ShPdfDiglog },
  data() {
    return {
      dialogVisible: false,
      dialogVisiblePdf: false,
      title: '通告',
      downloadApi: '',
      activeName: 'first',
      pdfId: '',
      form: {
        // contents: "<p style=\"text-align:center;\"><img src=\"https://m.jianxiecloud.com/system/sysFileInfo/showImgStream?id=9199db1b36014ef8a8bb0f9305f482fc\" style=\"max-width:100%;\" width=\"70%\"><br></p>",
        // title: '12123'
      },
      formData: {},
      closetText: '我知道了(15)',
      timer: null,
      disabledClose: true,
      fullscreen: false,
      page: 1,
      limit: 10,
      count: 100,
      radio: ''
    }
  },
  mounted() {
    this.getUrgentNotice()
  },
  beforeDestroy() {
    if (this.timer) {
      this.clear()
    }
  },
  methods: {
    getUrgentNotice() {
      this.$post(LIST_MAJOR_ONE, {}, data => {
        if (data.data && data.data.id) {
          this.form = data.data
          this.open()
        }
      })
    },
    // 处理已读
    handleRead(item) {
      this.$post(
        READ_STATE_SAVE,
        { id: item.id },
        data => {
          item.isread = '1';
          // this.getPerson()
          this.$emit('hasRead')
          this.dialogVisible = false
        }
      )
    },
    // 获取阅读情况
    getPerson() {
      this.$post(
        GET_NOTICE_PERSON_LIST,
        {
          id: this.form.id,
          page: this.page,
          limit: this.limit,
          type: this.radio
        },
        data => {
          this.formData = data.data
          this.count = data.data.total;
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    },
    clickRaido(e) {
      e === this.radio ? this.radio = '' : this.radio = e
      this.page = 1;
      this.getPerson()
    },
    clear() {
      this.disabledClose = true
      clearInterval(this.timer)
      this.timer = null
      this.closetText = '我知道了(15)'
    },
    open() {
      this.dialogVisible = true
      this.setClosetText()
      this.getPerson()
    },
    setClosetText() { // 验证码计时器
      let i = 15
      this.timer = setInterval(() => {
        i--
        this.closetText = `我知道了(${i})`
        if (i <= 0) {
          clearInterval(this.timer)
          this.closetText = '我知道了'
          this.disabledClose = false
          // this.handleRead(this.form)
        }
      }, 1000)
    },
    viewPdf(row) {
      this.pdfId = row.id
      this.dialogVisiblePdf = true
    },
    downLoad(row) {
      this.$downloadFile(ANNEX_DOWNLOAD, { id: row.id }, row.fileName.substring(0, row.fileName.lastIndexOf('.')))
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep.notice {
  .title {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    display: flex;
    align-items: center;
    .tag {
      margin-left: 8px;
    }
  }
  .container-text {
    border: 1px solid #c9d8db;
    padding: 20px;
    overflow: auto;
  }
  .el-dialog__headerbtn .el-dialog__close {
    display: none;
  }
  .icon-full {
    margin-right: 12px;
  }
  .el-dialog__header {
    background: #f1f6fe;
    color: #515e78;
    font-weight: bold;
    font-size: 16px;
    text-align: left;
  }
  .close-btn {
    border: 1px solid #4a86ff;
    color: #4a86ff;
  }
}
</style>