<template>
  <a-modal
    centered
    class="noticeDetail-modal"
    :footer="null"
    :maskClosable="false"
    title="公告详情"
    v-model="isShow"
    @cancel="isShow=false"
    width="80%">
    <div>
      <a-descriptions bordered size="small" :column="2">
        <a-descriptions-item label="类别">{{ typeDictValue }}</a-descriptions-item>
        <a-descriptions-item label="可见性">{{ toAppNameDictValue }}</a-descriptions-item>
        <a-descriptions-item label="公告标题">{{ detailsData&&detailsData.title||'--' }}</a-descriptions-item>
        <a-descriptions-item label="发布时间">{{ detailsData&&detailsData.releaseDate||'--' }}</a-descriptions-item>
        <a-descriptions-item label="公告内容" :span="2">
          <div v-if="detailsData&&detailsData.content" v-html="detailsData.content" class="editor-box"></div>
          <span v-else>--</span>
        </a-descriptions-item>
        <a-descriptions-item label="图片" :span="2">
          <div style="display: flex;">
            <p class="pic-box" v-for="(item,index) in imgPathsArr" :key="index">
              <img :src="item" title="点击查看大图" class="productPic" @click="getPreview(item)" />
            </p>
          </div>
          <span v-if="imgPathsArr.length == 0">--</span>
        </a-descriptions-item>
        <a-descriptions-item label="附件" :span="2">
          <p style="margin: 0 0 5px;" v-for="(item,index) in attachPathsArr" :key="index">
            <a :href="item.filePath" :download="item.fileName" class="attachLink">{{ item.fileName }}</a>
          </p>
          <span v-if="attachPathsArr.length == 0">--</span>
        </a-descriptions-item>
      </a-descriptions>
      <div class="btn-cont">
        <a-button id="noticeDetail-back" @click="isShow = false" style="margin-left: 15px;">关闭</a-button>
      </div>
    </div>
    <a-modal :visible="previewVisible" :footer="null" centered :maskClosable="false" @cancel="previewVisible=false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-modal>
</template>

<script>
import { STable } from '@/components'
import { noticeUserDetail } from '@/api/noticeUser'
export default {
  name: 'NoticeDetailModal',
  components: { STable },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemId: {
      type: [Number, String],
      default: ''
    }
  },
  computed: {
    typeDictValue () { //  类别  数据字典name
      let str = ''
      if (this.detailsData && this.detailsData.type == 'notity') {
        str = '公告'
      } else if (this.detailsData && this.detailsData.type == 'news_company') {
        str = '企业新闻'
      } else if (this.detailsData && this.detailsData.type == 'news_trade') {
        str = '行业咨询'
      } else {
        str = '--'
      }
      return str
    },
    toAppNameDictValue () { //  可见性  数据字典name
      let str = ''
      if (this.detailsData && this.detailsData.toAppName == '1,2') {
        str = '所有'
      } else if (this.detailsData && this.detailsData.toAppName == '2') {
        str = '经销商'
      } else if (this.detailsData && this.detailsData.toAppName == '1') {
        str = '总部'
      } else {
        str = '--'
      }
      return str
    },
    imgPathsArr () { //  图片数组
      let arr = []
      if (this.detailsData && this.detailsData.imgPaths) {
        arr = this.detailsData.imgPaths.split(',')
      }
      return arr
    },
    attachPathsArr () { //  附件数组
      let arr = []
      if (this.detailsData && this.detailsData.attachList) {
        arr = this.detailsData.attachList
      }
      return arr
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      detailsData: null, //  详情数据
      previewVisible: false,
      previewImage: ''
    }
  },
  methods: {
    //  获取详情
    getDetail () {
      noticeUserDetail({ id: this.itemId }).then(res => {
        if (res.status == 200) {
          this.detailsData = res.data
        } else {
          this.detailsData = null
        }
      })
    },
    // 查看大图
    getPreview (url) {
      this.previewImage = url
      this.previewVisible = true
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.detailData = null
        this.$emit('close')
      }
    },
    itemId (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetail()
      }
    }
  }
}
</script>

<style lang="less">
  .noticeDetail-modal{
    .ant-modal-body {
    	padding: 40px 40px 24px;
    }
    .ant-descriptions-item-label.ant-descriptions-item-colon{
      width: 90px;
    }
    .pic-box{
      width: 100px;
      height: 100px;
      margin-right: 10px;
      display: inline-flex;
      align-items: center;
      border: 1px dashed #d9d9d9;
      border-radius: 4px;
      padding: 3px;
      .productPic{
        cursor: pointer;
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: 0 auto;
      }
    }
    .editor-box{  //  编辑器基本样式初始化
      p{
        margin: 0;
        padding: 0;
        ul, li{
          list-style: none;
          padding: 0;
          margin: 0;
        }
        img{
          max-width: 100%;
        }
      }
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
    .attachLink{
      display: inline-block;
      color: rgba(0, 0, 0);
      &:hover{
        text-decoration: underline;
      }
    }
  }
</style>
