<template>
  <div class="page" v-if="pageShow">
    <div class="header">
      <div class="user-info">
        <image class="user-name-bg" :src="info.avatar" />
        <div class="info">
          <div>{{ info.name }}</div>
          <p>{{ info.createTime }}<span v-if="info.userId == user.id" @click="del">删除帖子</span></p>
        </div>
      </div>
      <p class="text-content">{{ info.content }}</p>
      <div class="img-list" v-if="info.images.length">
        <img :src="item.url" :key="index" v-for="(item, index) in info.images" @click.stop="previewImage(info.images, item.url)" />
      </div>
    </div>
    <div class="reply-list">
      <div class="item" v-for="(item, index) in info.replyList" :key="index" @click="replyClick(item)">
        <div class="user-img">
          <img :src="item.headPortrait" alt="" />
        </div>
        <div class="item-info">
          <div class="user-info">
            <span class="user-name">{{ item.createUserName }}</span>
            <span class="time">{{ item.createTime }}</span>
          </div>
          <p class="text">
            <span v-if="item.lastReplyName"
              >回复<span class="color-365D92">{{ item.lastReplyName }}</span></span
            >{{ item.content }}
          </p>
        </div>
      </div>
    </div>
    <div class="reply-bottom">
      <div class="input" @click="showReply = true">我来说两句…</div>
      <div class="support" @click="support()">
        <!-- <AiIcon icon="iconpraiseactive2x" size="18" v-if="info.mySupport == 1" style="vertical-align: middle" />
        <i class="iconfont" v-else>&#xe698;</i>赞 -->
      </div>
    </div>
    <u-popup v-model="showReply" mode="bottom">
      <div class="reply-content">
        <u-input v-model.trim="content" type="textarea" :height="144" :auto-height="true" placeholder="写下你的想法…" placeholder-style="color:#999999;font-size:24rpx;" maxlength="1000" />
        <div class="btn">
          <span class="clear" @click="content = ''">清空内容</span>
          <span class="confirm" @click="confirmReply()">发表</span>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Detail',
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      info: {},
      pageShow: false,
      id: '',
      supportFlag: true,
      showReply: false,
      content: '',
      lastReplyId: '',
      lastReplyName: '',
    }
  },

  onLoad(query) {
    this.id = query.id
    this.getInfo()
    uni.$emit('refresh')
  },

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

          if (res.data.images) {
            this.info.images = JSON.parse(res.data.images)
          } else {
            this.info.images = []
          }
          if (res.data.replyList.length) {
            res.data.replyList.map((item) => {
              item.createTime = item.createTime.substring(0, 19)
            })
          }
          uni.setNavigationBarTitle({ title: this.info.userId == this.user.id ? '我的帖子' : 'Ta的帖子' })
          this.$nextTick(() => {
            this.pageShow = true
          })
        }
      })
    },
    support() {
      if (this.supportFlag) {
        this.supportFlag = false
        this.$http
          .post(`/app/apppostsupport/support`, {
            postId: this.id,
            createUserId: this.user.partyId,
          })
          .then((res) => {
            if (res.code == 0) {
              uni.$emit('refresh')
              this.supportFlag = true
              if (this.info.mySupport == 1) {
                this.info.mySupport = 0
              } else {
                this.info.mySupport = 1
              }
            }
          })
      }
    },
    confirmReply() {
      if (!this.content) {
        return this.$toast('请输入回复内容')
      }
      var params = {
        postId: this.id,
        content: this.content,
        createUserId: this.user.partyId,
        createUserName: this.user.realName,
        headPortrait: this.user.avatarUrl,
        lastReplyId: this.lastReplyId ? this.lastReplyId : '',
        lastReplyName: this.lastReplyName ? this.lastReplyName : '',
      }
      this.$http.post(`/app/apppostreply/addOrUpdate`, params).then((res) => {
        if (res.code == 0) {
          uni.$emit('refresh')
          this.$toast('提交成功')
          this.lastReplyId = ''
          this.lastReplyName = ''
          this.content = ''
          this.showReply = false
          this.getInfo()
        }
      })
    },
    replyClick(e) {
      uni.showModal({
        title: '提示',
        content: `是否回复${e.createUserName}的评论？`,
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            uni.$emit('refresh')
            this.showReply = true
            this.lastReplyId = e.id
            this.lastReplyName = e.createUserName
          }
        },
      })
    },
    del() {
      uni.showModal({
        title: '提示',
        content: `是否删除该帖子？`,
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            this.confirmDel()
          }
        },
      })
    },
    confirmDel() {
      this.$http.post(`/app/apppostinfo/delete?id=${this.id}`).then((res) => {
        if (res.code == 0) {
          this.$toast('删除成功')
          setTimeout(() => {
            uni.$emit('refresh')
            uni.navigateBack({ delta: 1 })
          }, 3000)
        }
      })
    },
    previewImage(images, img) {
      uni.previewImage({
        urls: images.map((v) => v.url),
        current: img,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  background-color: #f6f7f9;
}
.color-365D92 {
  color: #365d92;
}
.header {
  background-color: #fff;
  padding: 26px 30px 32px;
  .user-info {
    display: flex;
    margin-bottom: 32px;
    .user-name-bg {
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      background: #4e8eee;
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      margin-right: 16px;
      border-radius: 50%;
    }
    .info {
      div {
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333;
        line-height: 26px;
        margin-bottom: 10px;
      }
      p {
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        line-height: 22px;
      }
      span {
        color: #3376fd;
        margin-left: 16px;
      }
    }
  }
  .text-content {
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 42px;
    word-break: break-all;
  }
  .img-list {
    margin-top: 16px;
    img {
      width: 224px;
      height: 224px;
      margin-right: 8px;
    }
    img:nth-of-type(3n) {
      margin-right: 0;
    }
  }
}
.reply-list {
  padding: 0 32px 112px;
  .item {
    display: flex;
    padding: 32px 0;
    border-bottom: 2px solid #eee;
    .user-img {
      width: 96px;
      height: 96px;
      margin-right: 24px;
      img {
        width: 96px;
        height: 96px;
        border-radius: 50%;
      }
    }
    .item-info {
      width: calc(100% - 116px);
    }
    .user-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .user-name {
        font-size: 30px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #365d92;
        line-height: 42px;
      }
      .time {
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999;
        line-height: 42px;
      }
    }
    .text {
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #333;
      line-height: 40px;
      word-break: break-all;
    }
  }
}
.reply-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 104px;
  padding: 22px 30px 24px;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #333;
  line-height: 58px;
  .input {
    display: inline-block;
    width: 580px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    background: #f0f0f0;
    border-radius: 30px;
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #666;
    margin-right: 42px;
  }
  .support {
    display: inline-block;
  }
  .iconfont {
    display: inline-block;
    width: 36px;
    height: 36px;
    font-size: 36px;
    color: #333;
    margin-right: 8px;
  }
}
.reply-content {
  width: 100%;
  padding: 32px;
  box-sizing: border-box;
  background: #fff;
  ::v-deep .u-input {
    background-color: #f7f7f7 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    font-size: 26px !important;
  }
  .btn {
    display: flex;
    justify-content: space-between;
    padding: 24px 0;
    span {
      line-height: 64px;
    }
    .clear {
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666;
    }
    .confirm {
      width: 144px;
      height: 64px;
      text-align: center;
      background: #135ab8;
      border-radius: 32px;
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #fff;
    }
  }
}
</style>
