<template>
  <el-dialog
    top="50px"
    width="80%"
    append-to-body
    :visible.sync="newsReadVisible"
    :close-on-click-modal="false"
  >
    <div class="container">
      <div class="news-header">
        <div class="news-header__title">
          <h4>{{ newsDetail.title }}</h4>
          <h5 v-if="newsDetail.titleDescription">
            {{ newsDetail.titleDescription }}
          </h5>
        </div>
        <div class="news-header__info">
          <span v-if="newsDetail.drafter">
            拟稿人：{{ newsDetail.drafter }}
          </span>
          <span v-if="newsDetail.createTime">
            创建时间：{{ newsDetail.createTime | dateTimeFormat }}
          </span>
          <span v-if="newsDetail.endTime">
            下架时间：{{ newsDetail.endTime | dateTimeFormat }}
          </span>
        </div>
      </div>

      <div class="news-content">
        <div v-if="newsDetail.isUrl === 'true'">
          <iframe
            ref="iframe"
            frameborder="0"
            :src="newsDetail.url"
            :height="newsDetail.pageHeight + 'px'"
            style="width: 100%"
          ></iframe>
        </div>
        <div v-else v-html="newsDetail.content"></div>
      </div>
      <div>
        <div v-for="(item, index) in fileJson" :key="'new-file-' + index">
          <el-tag @click="download(item)">
            <i class="el-icon-files"></i>
            {{ item.name }}
          </el-tag>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  import { getNewsDetailById } from '@/api/portal'
  export default {
    name: 'HomeNewsRead',
    filters: {
      dateTimeFormat(val) {
        const moment = require('moment')
        return val ? moment(val).format('YYYY-MM-DD HH:mm') : ''
      },
    },
    props: {
      newsId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        newsDetail: {},
        newsReadVisible: false,
        fileJson: [],
      }
    },
    watch: {
      newsId: {
        handler(val) {
          this.newsDetail = {}
          val && this.getNewsDetail(val)
        },
        immediate: true,
      },
    },
    methods: {
      setFile(fileJson) {
        let files = JSON.parse(fileJson)
        let result = files.map((item) => {
          return {
            ...item,
            fileId: item.id,
            response: {
              fileId: item.id,
              fileName: item.name,
            },
          }
        })
        this.fileJson = result
      },
      showDialog() {
        this.newsReadVisible = true
      },
      getNewsDetail(id) {
        getNewsDetailById(id).then((data) => {
          this.newsDetail = data ? data : {}
          if (this.newsDetail.file) {
            this.setFile(this.newsDetail.file)
          }
        })
      },
      previewFile(file) {
        this.$preview(file)
      },
      download(file) {
        if (this.$requestConfig.download) {
          this.$requestConfig
            .download(file.response.fileId)
            .then(({ data, headers }) => {
              if (data && headers) {
                // 附件下载
                const fileName = decodeURIComponent(
                  headers['content-disposition']
                    .split(';')[1]
                    .split('filename=')[1]
                )
                const blob = new Blob([data])
                saveAs(blob, fileName)
              }
            })
            .catch((err) => {
              this.$message.error(`附件下载失败：${err}`)
            })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    margin-top: 15px;
    .news-header {
      padding: 0 10px 20px 10px;
      border: 1px solid $base-border-color;
      .news-header__title {
        h4,
        h5 {
          text-align: center;
          margin: 15px 0;
        }
      }
      .news-header__info {
        display: flex;
        justify-content: flex-end;
        span {
          margin-left: 15px;
          font-size: $base-font-size-small;
        }
      }
    }
  }
  ::v-deep .el-dialog__header {
    height: 0;
    padding: 0;
  }
</style>
