<template>
  <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    width="80%"
    custom-class="carousel-detail"
    :close-on-click-modal="false"
    :before-close="handleClose"
    top="4vh"
  >
    <div class="detail-container">
      <h3 class="detail-title">{{ detailInfo.title }}</h3>
      <div class="top-info__wrap">
        <div class="top-item">
          <span class="label">发布时间：</span>
          <span class="value">{{ detailInfo.publishTime }}</span>
        </div>
        <div class="top-item">
          <span class="label">发布人：</span>
          <span class="value">{{ detailInfo.createByName }}</span>
        </div>
      </div>
      <div v-if="detailInfo.file" class="file-wrap">
        <ht-file v-model="files" type="list" permission="r" />
      </div>
      <section
        v-if="detailInfo.isUrl == 'false' && detailInfo.content"
        class="detail-content"
        v-html="detailInfo.content"
      ></section>
      <iframe
        v-else
        :src="detailInfo.url"
        frameborder="0"
        :style="{
          width: '100%',
          height:
            Number(detailInfo.pageHeight) &&
            `${Number(detailInfo.pageHeight)}px`,
        }"
      ></iframe>
    </div>
  </el-dialog>
</template>

<script>
  import { getNewsDetailById } from '@/api/portal'
  export default {
    name: 'CarouselDetail',
    data() {
      return {
        dialogVisible: false,
        detailInfo: {},
      }
    },
    computed: {
      files() {
        const list = this.detailInfo.file && JSON.parse(this.detailInfo.file)
        const result = list.map((item) => {
          return {
            ...item,
            response: {
              success: item.status === 'success' ? true : false,
              fileId: item.id,
              fileName: item.name,
              size: item.size,
            },
          }
        })
        return result && JSON.stringify(result)
      },
    },
    methods: {
      handleClose() {
        this.dialogVisible = false
      },
      openDetailDialog(id) {
        this.dialogVisible = true
        this.$nextTick(() => {
          this.getDetailInfoById(id)
        })
      },
      getDetailInfoById(id) {
        getNewsDetailById(id).then((res) => {
          this.detailInfo = res
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .carousel-detail {
    .detail-container {
      .detail-title {
        margin: 0;
        font-size: $base-font-size-large;
        color: $base-dark-title-color;
      }
      .top-info__wrap {
        display: flex;
        border-bottom: 1px solid $base-content-border-color;
        padding: 30px 0;
        .top-item {
          padding-right: 40px;
          span {
            color: #b7b7b7;
          }
        }
      }
      .detail-content {
        text-indent: 20px;
      }
    }
  }
</style>
