<template>
  <sh-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body center width="500px" height="480px" class="notice" :modal="false">
    <p class="title">{{ form.title }}</p>
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="正文" name="first">
        
      </el-tab-pane> -->
    <!-- <el-tab-pane label="附件" name="second" v-if="type != 'news'">
        <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" :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-tabs> -->
    <sh-form>
      <sh-form-item labelWidth="0px">
        <div class="container-text w-e-text-container" :style="{height: fullscreen ? 'calc(100vh - 260px)' : 'calc(90vh - 562px)'}">
          <div class="w-e-text" v-html="form.contents"></div>
        </div>
      </sh-form-item>
    </sh-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="onSign(true)">标为已读</el-button>
      <el-button class="close-btn" @click="onDetail">查看全文</el-button>
    </div>
    <sh-pdf-diglog :dialogVisible.sync="dialogVisiblePdf" :param="{id: pdfId}" title="附件预览" />
    <NoticeDialog ref="noticeDialog" />
  </sh-dialog>
</template>

<script>
import { LIST_MAJOR_ONE, ANNEX_DOWNLOAD, READ_STATE_SAVE } from '@/apis/notice'
import { ShPdfDiglog } from '@/components'
import NoticeDialog from './noticeView'
export default {
  components: { ShPdfDiglog, NoticeDialog },
  data() {
    return {
      dialogVisible: false,
      dialogVisiblePdf: false,
      title: '重要通告',
      downloadApi: '',
      pdfId: '',
      form: {},
      disabledClose: true,
      fullscreen: false
    }
  },
  mounted() {
    this.getNotice()
  },

  methods: {
    onDetail() {
      this.onSign(false)  // 查看全文时标记为已读
      this.$refs.noticeDialog.init(this.form, '详情')
    },
    onSign(isDetail = false) {
      this.$post(
        READ_STATE_SAVE,
        { id: this.form.id },
        data => {
          this.form.isread = '1';
          if (isDetail) {
            this.dialogVisible = false
            this.$message.success(data.msg)
          }
        }
      )
    },
    getNotice() {
      this.$post(LIST_MAJOR_ONE, {}, data => {
        if (data.data && data.data.id) {
          this.form = data.data
          this.dialogVisible = true
        }
      })
    },

    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 {
  position: fixed;
  right: 40px !important;
  left: auto !important;
  top: 46vh !important;
  width: 520px;
  height: 480px;
  .el-dialog__headerbtn .el-icon-rank {
    display: none;
  }
  .title {
    font-size: 20px;
    font-weight: 400;
    color: #000;
  }
  .container-text {
    border: 1px solid #c9d8db;
    padding: 20px;
    overflow: auto;
  }

  .el-dialog {
    // margin-right: 55px;
    // margin-top: 46vh !important;
    margin-top: 0 !important;
  }
  .el-dialog__header {
    background: rgba(74, 134, 255, 0.1);
    color: #202837;
    font-weight: bold;
    font-size: 20px;
  }
  .el-dialog__footer {
    text-align: right;
    padding-right: 50px;
    padding-top: 0;
  }
  .close-btn {
    border: 1px solid #4a86ff;
    color: #4a86ff;
    margin-left: 35px;
  }
}
</style>