<template>
  <div class="topic-detail" v-if="pageShow">
    <div class="topic-header">
      <h2>{{ info.title }}</h2>
      <p>{{ info.publishTime }}</p>
      <div class="topic-tags">
        <span v-for="(item, index) in info.keyWords" :key="index">{{ item }}</span>
      </div>
    </div>
    <div class="topic-list">
      <div class="topic-item" v-for="(item, index) in info.contents" :key="index">
        <div class="topic-item__top">
          <image src="/static/img/rmht.png"/>
          <div class="topic-item__top--right">
            <h2>{{ item.question }}</h2>
            <p>{{ item.questionSource }}</p>
          </div>
        </div>
        <div class="topic-item__bottom">
          <h2 v-if="item.answerSource">
            <span style="color:#000;"> {{ item.answerSource }} </span>
            回复
          </h2>
          <h2 v-else>话题回复</h2>
          <p>{{ item.answer }}</p>
          <div class="topic-item__img">
            <image v-for="(img, i) in item.files" :key="i" :src="img.url" mode="aspectFill" hover-class="text-hover"
                   @click="preview(img.url, item.files)"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      id: '',
      pageShow: false
    }
  },

  onLoad(query) {
    this.$loading()
    this.id = query.id
    this.getInfo()
  },

  methods: {
    getInfo() {
      this.$instance.post(`/app/apphotsubject/detailForWx?id=${this.id}`).then(res => {
        if (res.code === 0) {
          this.info = res.data
          if (res.data.keyWords) {
            this.info.keyWords = res.data.keyWords.split(',')
          }

          this.$nextTick(() => {
            this.pageShow = true
          })
          this.$hideLoading()
        }
      })
    },

    preview(img, imgs) {
      uni.previewImage({
        current: img,
        urls: imgs.map(v => v.url)
      })
    }
  },

  onShareAppMessage() {
    return {
      title: this.info.title,
      path: `/mods/AppTopic/detail?id=${this.id}`
    }
  }
}
</script>

<style lang="scss" scoped>
.topic-detail {
  * {
    box-sizing: border-box;
  }

  .topic-list {
    margin-top: 16px;
  }

  .topic-item__bottom {
    margin-top: 22px;
    padding: 24px 24px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #D8DDE6;

    .topic-item__img {
      margin-top: 16px;
      font-size: 0;

      image {
        width: 206px;
        height: 206px;
        margin: 0 10px 10px 0;
        border-radius: 8px;

        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }
    }

    p {
      color: #333333;
      font-size: 32px;
      text-align: justify;
    }

    h2 {
      margin-bottom: 16px;
      color: #1365DD;
      font-size: 26px;
    }
  }

  .topic-item {
    margin-bottom: 16px;
    padding: 32px;
    background: #fff;

    .topic-item__top--right {
      flex: 1;

      h2 {
        line-height: 1.3;
        margin-bottom: 16px;
        font-size: 32px;
        color: #333;
        text-align: justify;
        white-space: pre-line;
      }

      p {
        color: #343D65;
        font-size: 28px;
      }
    }

    .topic-item__top {
      display: flex;

      image {
        position: relative;
        top: 6px;
        width: 32px;
        height: 32px;
        margin-right: 16px;
      }
    }
  }

  .topic-header {
    padding: 32px 32px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #D8DDE6;

    .topic-tags {
      font-size: 0;

      span {
        display: inline-block;
        height: 48px;
        line-height: 48px;
        margin: 0 16px 16px 0;
        padding: 016px;
        color: #6179A7;
        font-size: 28px;
        background: #F4F5FA;
        border-radius: 24px;
      }
    }

    h2 {
      line-height: 1.3;
      margin-bottom: 16px;
      font-size: 40px;
      color: #333333;
      text-align: justify;
    }

    p {
      margin-bottom: 16px;
      color: #999999;
      font-size: 28px;
    }
  }
}
</style>
