<template>
  <div>
    <sh-dialog :title="title" :fullscreen.sync="fullscreen"  :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="1400px" height="90vh" append-to-body>
      <div class="dialog-body">
        <p class="title">{{ form.title }}</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 - 260px)'}">
                  <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" 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-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"  :pageSizes="[10, 20, 50, 100]" height="464px"  :count="count" :page.sync="page" :limit.sync="limit" @loadList="getPerson()" >
              <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>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关 闭</el-button>
      </div>
    </sh-dialog>
    <sh-pdf-diglog :dialogVisible.sync="dialogVisiblePdf" :param="{id: pdfId}" title="附件预览"/>  
  </div> 
</template>
<script>
import { ShPdfDiglog } from '@/components'
import { ANNEX_DOWNLOAD, GET_NOTICE_PERSON_LIST} from '@/apis/notice'
export default {
  components: {ShPdfDiglog},
  inject: ['lock_state_resource'],
  data () {
    return {
      radio:'',
      downloadApi: ANNEX_DOWNLOAD,
      activeName: 'first',
      form: {},
      dialogFormVisible: false,
      title: '',
      type: '',
      tableData: [],
      dialogVisiblePdf: false,
      pdfId: '',
      fullscreen: false,
      formData: {},
      page: 1,
      limit: 10,
      count: 100,
    }
  },
  methods: {
    clickRaido(e) {
      
      e === this.radio ? this.radio = '' : this.radio = e
      this.page = 1;
      console.info('this.radio', this.radio)
      this.getPerson()

    },

    loadList () {
      this.$nextTick(() => {
        this.$refs.tableFile.loadList()
        this.$refs.table.loadList()
      })
    },
    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;
          }
        )
      
    },
    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('.')))
    },
    init (param, title, type) {
      this.activeName = 'first'
      this.dialogFormVisible = true
      this.title = title
      this.type = type
      this.form = {...param}
      // 新闻动态不显示附件列表
      if (type != 'news') {
        this.loadList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  font-size: 20px;
  font-weight: 400;
  color: #000;
}
.container-text{
  border: 1px solid #c9d8db;
  padding: 20px;
  overflow: auto;
}
</style>