<template>
  <div class="feedbook_reply">
    <p class="content">{{ detailData.content }}</p>
    <div class="img_box">
      <div
        class="img_item"
        v-for="(item, index) in detailData.imgs"
        :key="index"
        :style="'background:url(' + item + ') center/cover no-repeat'"
      ></div>
    </div>
    <div class="line" v-if="detailData.replyContent"></div>
    <div class="reply_box" v-if="detailData.replyContent">
      <p class="title">尊敬的用户您好</p>
      <p class="reply">{{ detailData.replyContent }}</p>
      <p class="time">{{ detailData.replyTime.substring(0, 10) }}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detailData: {
       
      },
    }
  },
  mounted() {
    const id = this.$route.query.id
    if (id) {
      this.getDetail(id)
    } else {
      this.$toast('查看回复失败，请稍后再试')
    }
  },
  methods: {
    getDetail(id) {
      this.yxAxios
        .post(`${this.yanxueUrl}/api/Manage/FeedBackList`, {
          id: id,
          pageSize: 999,
          page: 1,
        })
        .then((res) => {
          this.$toast.clear()
          console.log('我的反馈列表:', res.data.data)
          if (res.data.status == 1) {
            let detailData = res.data.data.list[0]
            detailData.imgs = detailData.imgs.split(',')
            this.detailData = detailData
          } else {
            this.$toast(res.data.message)
          }
        })
    },
  },
}
</script>

<style lang="scss">
.feedbook_reply {
  padding: 36px 0;
  .content {
    font-size: 32px;
    color: #999;
    padding: 0 24px;
  }
  .img_box {
    margin-top: 98px;
    padding: 0 24px;
    .img_item {
      width: 216px;
      height: 216px;
      display: inline-block;
      margin-right: 24px;
      margin-bottom: 24px;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
  .line {
    width: 100%;
    height: 22px;
    background: #f5f6fa;
    margin-top: 10px;
  }

  .reply_box {
    padding: 54px 24px;
    .title {
      font-size: 36px;
      font-weight: bold;
    }
    .reply {
      font-size: 32px;
      margin-top: 20px;
      line-height: 52px;
    }
    .time {
      font-size: 28px;
      margin-top: 62px;
      text-align: right;
    }
  }
}
</style>
