<style>
  .noticeTopBg {
    width: 100%;
  }

  .noticeContent {
    width: 100%;
    min-height: 300px;
    padding: 20px;
  }

  .notice_dix {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }

  .noticeBlue {
    color: #2961FE;
    font-weight: bold;
  }

  .notice_Span {
    color: #111111;
    font-weight: bold;
  }

  .noticeTitle {
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #000000;
    margin-top: 20px;
    font-weight: Medium;
  }

  .noticeInner {
    margin-top: 20px;
    color: #333333;
    line-height: 26px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .noticeContent .noticeFile {
    color: #2961FE;
    font-size: 13px;
  }

  .noticeContent .notice_Page {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #DFE7FF;
    cursor: pointer;
  }

  .noticeContent .expandName {
    font-size: 14px;
    color: #2961FE;
    margin-left: 10px;
    cursor: pointer;
  }

  .noticeContent .noticeNameList {
    max-width: 680px;
    height: 20px;
    overflow: hidden;
  }

  .noticeContent .noticeZhan {
    height: auto !important;
  }
</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:800px;">
      <div class="noticeTopBg">
        <img style="width:100%;height:100%;" :src="dataList[0].BgImage" />
      </div>
      <div class="noticeContent">
        <div class="notice_dix">
          <div>
            <span class="noticeBlue">Fr：</span>
            <span class="notice_Span">{{dataList[0].From}}</span>
          </div>
          <div>
            <span class="noticeBlue">编号：</span>
            <span class="notice_Span">{{dataList[0].Number}}</span>
          </div>
        </div>
        <div style="margin:15px 0;">
          <div style="display:flex;">
            <div class="noticeBlue">To：</div>
            <div class="notice_Span noticeNameList" ref="noticeKia" :class="{'noticeZhan':isShowMore}">
              <span v-for="(item,index) in dataList[0].toList" :key="index">
                {{item}}
                <template v-if="index!=dataList[0].toList.length-1">、</template>
              </span>
            </div>
            <template v-if="isShowBtn">
              <div class="expandName" v-if="!isShowMore" @click="isShowMore=true">展开</div>
              <div class="expandName" v-else @click="isShowMore=false">收起</div>
            </template>
          </div>
        </div>
        <div>
          <div>
            <span class="noticeBlue">Cc：</span>
            <span class="notice_Span">
              <span v-for="(item,index) in dataList[0].ccList" :key="index">{{item}}
                <template v-if="index!=dataList[0].ccList.length-1">、</template>
              </span>
            </span>
          </div>
        </div>
        <div style="margin:15px 0;">
          <div>
            <span class="noticeBlue">Time：</span>
            <span class="notice_Span">{{dataList[0].UpdateTime}}</span>
          </div>
        </div>
        <div class="noticeTitle">{{dataList[0].Title}}</div>
        <div class="noticeInner" v-html="dataList[0].Content">
        </div>
        <div class="notice_dix" style="margin-top:20px;">
          <div>
            <template v-if="dataList[0].fileList.length>0">
              <div class="noticeFile" v-for="(item,index) in dataList[0].fileList" :key="index">
                <span style="cursor:pointer;">
                  <a :href="item.FileUrl" style="color:#2961FE;text-decoration:none;" target="_blank">
                    <i class="iconfont icon-Download" style="margin-right:5px;"></i>{{item.FileName}}</a>
                </span>
              </div>
            </template>
          </div>
          <div style="margin-top:5px;">
            <div class="notice_Page" style="margin-right:10px;">
              <img v-if="setingObj.PageIndex==1" src="../../assets/images/arrowLeft2.png" />
              <img @click="goBefore" v-else src="../../assets/images/arrowLeft1.png" />
            </div>
            <div class="notice_Page">
              <img v-if="setingObj.PageIndex==setingObj.Count" src="../../assets/images/arrowRight2.png" />
              <img @click="goAfter" v-else src="../../assets/images/arrowRight1.png" />
            </div>
          </div>
        </div>
        <q-btn label="查看详情" color="accent q-px-md" style="font-weight:400 !important;margin:30px 0 0 40%;"
          @click="goDetail()" />
      </div>
      <q-card-actions align="right" class="bg-white">
        <q-btn label="关闭" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    downloadLocalFile
  } from '../../api/common/common'

  export default {
    props: {
      setingObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        dataList: [],
        isShowMore: false,
        isShowBtn: false
      }
    },
    created() {

    },
    watch: {
      setingObj: {
        handler(newValue) {
          if (this.setingObj) {
            this.dataList = this.setingObj.PageData;
          }
        },
        immediate: true
      }
    },
    mounted() {
      this.$nextTick(() => {
        var _width = this.$refs.noticeKia.clientWidth;
        if (_width < 680) {
          this.isShowBtn = false;
        } else {
          this.isShowBtn = true;
        }
      })
    },
    methods: {
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      //查看详情
      goDetail() {
        let routeUrl = this.$router.resolve({
          path: "/noticeView",
          query: {
            NoticeId: this.dataList[0].Id
          }
        });
        window.open(routeUrl.href, '_blank');
      },
      //往后翻页
      goAfter() {
        this.$emit('fathergoAfter');
      },
      //往前翻
      goBefore() {
        this.$emit('fathergoBefore');
      }
    },
  }
</script>