<template>
  <div class="detail">
    <div class="detail-body">
      <div class="detail-card top-tit-card">
        <div class="left">
          <i class="iconfont icon-tongzhi"></i>
        </div>
        <div class="right">
          <div class="top">
            {{ title }}
          </div>
          <div class="bottom">
            <span> {{ releaseTime }}</span>
            <span>{{createUserDept}}</span>
          </div>
        </div>
        <div></div>
      </div>
      <div class="detail-card info" v-html="content"/>
        <div style="width: 100%;height: 100%" class="img-list" v-if="imgUrlList.length>0">
            <img style="width: 100%;height: 100%" v-for="item in imgUrlList" :src="item.url" alt="" />
        </div>
        <div v-for="item in fileUrlList" style=" font-size: 16px; margin: 10px;color: #0000FF" @click="jumpFile(item)">
            {{item.name}}
        </div>
    </div>
<!--    <div class="white-bottom"></div>-->
  </div>
</template>

<script>
import { getParkNoticeById, updateReadStatus } from '../../service/api_park_notice'
import { addUserNotice } from '@/service/api_user_notice'
import auth from '@/service/auth'
import wx from 'weixin-js-sdk'
export default {
    data() {
        return {
            type: '', // 1 园区 2 物业
            id: '',
            title: '',
            readStatus: '',
            content: '',
            releaseTime: '',
            parkName: '',
            fileUrlList: [],
            imgUrlList: [],
            createUserDept: '',
            reader: {
                companyId: auth.currUser().id,
                id: ''
            }
        }
    },

    mounted() {
        this.readStatus = this.$route.query.readStatus
        this.id = this.$route.query.id
        this.reader.id = this.id
        this.selectById()
        if (this.readStatus === '0') {
            this.getRead()
        }
    },
    methods: {
        getRead() {
            updateReadStatus(this.reader).then(res => {

            })
        },
        jumpFile(item) {
            window.location.href = item.url
            // console.log(window.location.href)
            // console.log(window.location.href.split('#')[0])
            // wx.miniProgram.navigateTo({ url: '/pages/file/download?callBackUrl=' + encodeURIComponent(window.location.href.split('#')[0]) +
            //         '&url=' + item.url })
        },
        selectById() {
            const _this = this
            getParkNoticeById({ id: _this.id }).then((res) => {
                const data = res
                _this.title = data.noticeTitle
                _this.createUserDept = data.createUserDept
                // if (data.content.indexOf('width') !== -1 && data.content.indexOf('height') !== -1) {
                //     data.content = data.content.replace(/width="(\S*)"/, 'width="100%"').replace(/height="(\S*)"/, 'height="100%"')
                // }
                _this.content = data.noticeContent
                _this.releaseTime = _this.publishDate
                if (data.noticeFileId && data.noticeFileId.length > 2) {
                    const themeUrlList = []
                    const imgUrlList = []
                    const files = _this.$common.castEval(data.noticeFileId)
                    console.log('files', files)
                    files.forEach(item => {
                        if (item.url) {
                            const ul = {
                                name: item.name,
                                url: item.url
                            }
                            if (item.name.indexOf('png') > -1 || item.name.indexOf('jpg') > -1 || item.name.indexOf('jpeg') > -1) {
                                imgUrlList.push(ul)
                            } else {
                                themeUrlList.push(ul)
                            }
                        }
                    })
                    if (imgUrlList.length > 0) {
                        _this.imgUrlList = imgUrlList
                    }
                    _this.fileUrlList = themeUrlList
                }
                // 添加用户通知
                // const params = {
                //     userId: auth.currUser().id,
                //     noticeId: _this.id,
                //     type: '1'
                // }
                // addUserNotice(params).then((res) => {
                //
                // })
            })
        }
    }
}
</script>

<style lang="scss" type="text/scss">
.detail {
  box-sizing: border-box;
  background-color: $bg2;
  padding: 20px 30px 140px;
  overflow-y: auto;
  .detail-body {
    .detail-card {
      padding: 20px 30px;
      border-radius: 10px;

      &:first-child {
        margin-bottom: 20px;
      }
    }

    .info {
      font-size: 26px;
      color: $text3;
      line-height: 1.2;
    }
  }
}
.detail-card{
    img {
        width: 80vw !important;
    }
}
</style>
