<template>
  <div class="detail" v-if="pageShow">
    <h2>{{ info.title }}</h2>
    <span>发布时间：{{ info.createTime }}</span>
    <div class="content">
      <u-parse :html="info.content" v-if="info.type === '0'"></u-parse>
      <video class="video" v-else :src="info.videoFile.url"></video>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageShow: false,
      info: {},
      content: `
					<p>露从今夜白，月是故乡明</p>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`
    }
  },

  onLoad(query) {
    uni.showLoading()
    this.getInfo(query.id)
  },

  methods: {
    getInfo(id) {
      this.$http.post(`/app/appnewscenterinfo/queryDetailById?id=${id}`).then(res => {
        if (res.code == 0) {
          this.info = res.data

          this.$nextTick(() => {
            this.pageShow = true
          })
        }
        uni.hideLoading()
      })
    }
  }
}
</script>

<style lang="scss">
.detail {
  min-height: 100vh;
  padding: 40px 32px 40px;
  box-sizing: border-box;
  background: #fff;

  & > h2 {
    margin-bottom: 16px;
    line-height: 1.3;
    font-size: 40px;
    color: #333;
    font-weight: 600;
  }

  & > span {
    font-size: 28px;
    color: #999;
  }

  .content {
    width: 100%;
    margin-top: 40px;

    ::v-deep * {
      box-sizing: border-box;
    }

    ::v-deep p {
      margin: 20px 0;
      line-height: 1.4;
      color: #666;
      font-size: 28px;
      text-align: justify;
    }

    ::v-deep img {
      width: 100%;
    }

    ::v-deep br {
      display: block;
      margin: 20px 0;
    }

    .video {
      width: 100%;
      height: 600px;
    }
  }
}
</style>
