<!-- 新闻管理 by wangshxc -->
<template>
  <div class="page" v-loading="isLoading">
    <div class="notice-details">
      <div class="notice-header-right" style="text-align: right;">
        <ws-button round class="back-btn" @click="onBackBtnClick">返回</ws-button>
      </div>
      <div class="notice-header">

        <div class="notice-header-left">
          <div class="title" :title='detail.title'>{{detail && detail.title}}</div>
          <div class="text">
            <div class="time" :title='detail.issueUserName' style="color: #333;font-weight: bold">{{detail && detail.issueUserName}}</div>
            <div class="time">{{detail && detail.createDate.substr(0,16)}}</div>
            <div class="time":title='detail.typeName'> {{detail && detail.typeName}}</div>
          </div>
          <div class="text">
            <div class="time" :title='detail.websiteName'>{{detail && detail.websiteName}}</div>
            <div class="time">
              <a :href="detail.websiteUrl" :title='detail.websiteUrl' style="color: #1a61d5;" target="_blank">{{detail && detail.websiteUrl}}</a>
            </div>
          </div>
          <div class="text">
            <div class="timeFw" :title='detail.tenantName'>{{detail && detail.tenantName}}</div>
          </div>
        </div>
      </div>
      <div class="notice-sub-header" v-if="appendixPath">
        <img :src="appendixPath">
      </div>
      <div class="notice-content">
        <div class="notice-content-html" v-html="detail && detail.content">{{detail && detail.content}}</div>
      </div>
    </div>
  </div>
</template>

<script>
    import {queryCommonDetail,getFileList} from '../../api/new'
    import WsUpload from '../../components/WsUpload'

    export default {
        name: "newDetails",
        components: {
            WsUpload,
        },
        data() {
            return {
                detail: {
                    title: '',
                    issueUserName: localStorage.getItem('ws-pf_userName'),
                    ossCoverUrl: '',
                    typeName: '',
                    typeId: '',
                    content: '',
                    createDate: '',
                    issueUserId: localStorage.getItem('ws-pf_userId'),
                    isIssue: '',
                    websiteUrl: '',
                    websiteName: '',
                    tenantId: '',
                    tenantName: '',
                },
                imageSrc: undefined,
                isLoading: false,
                appendixIds: '',
                appendixPath: ''
            }
        },
        async mounted() {
            // 获取详情
            this.isLoading = true;
            this.detail = await this._getDetail(this.$route.query.id);
            // this.detail.replate()
            this.isLoading = false;
        },
        methods: {
            onBackBtnClick() {
                this.$router.go(-1);
            },

            _getDetail(id) {
                return new Promise((next) => {
                    queryCommonDetail({
                        id: id
                    }).then(res => {
                        if (res && res.code == '200') {
                            if (res.data.ossCoverUrl) {
                                let appendixIds = res.data.ossCoverUrl
                                getFileList({appendixIds})
                                    .then(resp => {
                                        if (resp.data.length > 0) {
                                            // this.appendixPath = "http://" + window.location.host + "/pb/"+ resp.data[0].appendixPath.substring(resp.data[0].appendixPath.indexOf(".com")+4,resp.data[0].appendixPath.length);
                                           this.appendixPath =this.$store.getters.baseInfo.fileUrl + resp.data[0].appendixPath

                                        }
                                    })
                            }
                            next(res.data);
                        } else {
                            next();
                        }
                    }).catch(err => {
                        next();
                    });
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
  .page {
    height: calc(100vh - 40px);
    overflow-y: scroll;
    width: 100%;
  }
  .notice-details {
    min-height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .notice-header {
      height: 108px;
      display: flex;
      padding-left: 60px;
      padding-right: 60px;
      background: #fff;

      .notice-header-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-bottom: 1px solid #EBEBEBFF;
        text-align: center;
        width: 600px;
        .title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }

        .text {
          justify-content: center;
          display: flex;
          flex-direction: row;

          .time {
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
            margin-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .timeFw {
            font-size: 14px;
            color: #333333;
            margin-top: 10px;
            width: 600px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }

      .notice-header-right {
        text-align: right;
        border-bottom: 1px solid #EBEBEBFF;
      }
    }

    .notice-sub-header {
      background: #fff;
      text-align: center;
      padding-top: 10px;

      img {
        max-width: 50%;
        height: 280px
      }
    }

    .notice-content {
      flex: 1;
      line-height: 35px;
      background: #fff;
      padding-top: 10px;
      padding-bottom: 20px;
      padding-left: 90px;
      padding-right: 90px;

      .notice-content-html {
        /deep/ {
          * {
            color: #333;
          }

          p {
            margin-top: 4px;
            margin-bottom: 4px;
          }
        }
      }
    }
  }
</style>
