<template>
  <div id="growUpDetail">
    <div class="detail_box">
      <div class="top">
        <div class="user_box">
          <img class="user_img" :src="dataObj.headImg ? dataObj.headImg : defaultHead" alt="" />
          <p class="title">
            {{ dataObj.userName }}<span v-if="dataObj.level">{{ dataObj.level }}</span>
          </p>
          <p class="time">{{ dataObj.createTime }}</p>
        </div>
        <div class="btn" v-if="userInfo.centerNo == dataObj.centerNo" @click.stop="handleDel(dataObj)">
          <van-icon class="icon" name="delete-o" />
        </div>
      </div>
      <div class="content">
        <span class="tag" v-for="(item2, index2) in dataObj.contentTagList" :key="index2">#{{ item2.name }}</span>
        <span v-html="dataObj.content"></span>
      </div>
      <div class="course_link" @click.stop="handleCourse(dataObj.classNo)" v-if="dataObj.pname">
        <div class="img_box">
          <img class="course_img" :src="dataObj.pimg" alt="" />
          <img class="mask" src="@/assets/grow_up/link.png" alt="" />
        </div>
        <p class="title">{{ dataObj.pname }}</p>
      </div>
      <ImgBox v-if="dataObj" :imgArr="dataObj.newPhoths"></ImgBox>
    </div>
    <div class="comment">
      <p class="title">全部评论</p>
      <van-list
        v-if="dataObj && commentList.length > 0"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="getContentCommentList"
      >
        <div class="item" v-for="(item, index) in commentList" :key="index">
          <img class="user_img" :src="item.headImg ? item.headImg : defaultHead" alt="" />
          <div class="center">
            <p class="user_name">{{ item.nickName }}</p>
            <p class="content">{{ item.msg }}</p>
            <p class="time">{{ item.createTime }}</p>
          </div>
          <van-icon class="icon" :class="item.isThumb ? 'active' : ''" name="good-job-o" @click="handleCommentThumb(index)" />
        </div>
      </van-list>
      <van-empty v-if="dataObj && commentList.length == 0" :image="require('@/assets/empty.png')" description="还没有评论，快来抢沙发" />
    </div>
    <div class="action_bar">
      <div class="text_box" @click="showComment = true">
        <van-icon class="icon" name="edit" />
        <p>发表评论...</p>
      </div>
      <div class="btn" @click.stop="handleThumb()">
        <van-icon class="icon" :class="dataObj.isThumb ? 'active' : ''" name="good-job-o" />
        <span>{{ dataObj.thumbNum }}</span>
      </div>
      <div class="btn">
        <van-icon class="icon" name="comment-o" />
        <span>{{ dataObj.commentNum }}</span>
      </div>
      <div class="btn" @click="showShareDes = true">
        <van-icon class="icon" name="share-o" />
      </div>
    </div>
    <div class="share_mask" v-if="showShareDes" @click="showShareDes = false">
      <img class="share_des" src="@/assets/home/share.png" alt="" />
    </div>

    <van-popup v-model="showComment" round>
      <div class="comment_box">
        <textarea class="text" v-model="commentMsg" cols="30" rows="10" placeholder="发表评论"></textarea>
        <van-button class="btn" round color="#3074FF" type="primary" :disabled="commentMsg == ''" @click="growthContentComment"
          >发布</van-button
        >
      </div>
    </van-popup>
  </div>
</template>
<script>
import Tabbar3 from '@/views_qyx/component/c_Tabbar3'
import ImgBox from './c_ImgBox.vue'
export default {
  data() {
    return {
      userInfo: '',
      id: '',
      type: '', //类别1-用户； 2-基地
      dataObj: '',
      active: 0,
      defaultHead: require('@/assets/head.png'),
      showComment: false,
      commentMsg: '',
      pageNum: 1,
      pageSize: 5,
      loading: false,
      finished: false,
      commentList: [], //评论列表
      showShareDes: false,
      unionId: '',
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.type = this.$route.query.type //类别1-用户； 2-基地
    localStorage.setItem('prePage', 'GrowUpDetail')

    this.unionId = localStorage.getItem('unionId')
    this.getUserInfo()
  },
  methods: {
    initPage() {
      this.growthBaseDetail() //获取详情
      this.getContentCommentList() //获取评论列表
    },
    // 点击课程
    handleCourse(classNo) {
      this.$router.push({ name: 'ServiceAbroadDetail', query: { courseId: classNo } })
    },
    // 获取详情
    growthBaseDetail() {
      this.http
        .growthBaseDetail({
          centerNo: this.userInfo.centerNo,
          id: this.id,
          type: this.type, //类别1-用户； 2-基地
        })
        .then((res) => {
          console.log('详情:', res)
          if (res.code == 200) {
            let dataObj = res.data
            dataObj.content = dataObj.content.replace('\n', '<br>')
            dataObj.newPhoths = []
            for (let j in dataObj.photos) {
              dataObj.newPhoths.push(dataObj.photos[j].img)
            }
            this.dataObj = dataObj
            this.$nextTick(() => {
              this.setWxShare() //设置分享
            })
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 点击点赞按钮
    handleThumb() {
      if (this.dataObj.isThumb == 1) {
        this.growthContentCancelThumb()
      } else {
        this.growthContentThumb()
      }
    },
    // 点赞
    growthContentThumb() {
      this.http
        .growthContentThumb({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          contentId: this.id,
        })
        .then((res) => {
          console.log('点赞结果:', res)
          if (res.code == 200) {
            this.dataObj.isThumb = 1
            this.dataObj.thumbNum++
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 取消点赞
    growthContentCancelThumb() {
      this.http
        .growthContentCancelThumb({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          contentId: this.id,
        })
        .then((res) => {
          console.log('取消点赞结果:', res)
          if (res.code == 200) {
            this.dataObj.isThumb = 0
            this.dataObj.thumbNum--
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 评论列表
    getContentCommentList() {
      this.loading = true
      this.http
        .getContentCommentList({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          contentId: this.id,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          console.log('评论结果:', res)
          if (res.code == 200) {
            this.loading = false
            if (res.total < this.pageNum * this.pageSize) {
              this.finished = true
            } else {
              this.pageNum++
            }
            this.commentList = this.commentList.concat(res.rows)
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 评论
    growthContentComment() {
      this.http
        .growthContentComment({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          contentId: this.id,
          msg: this.commentMsg,
        })
        .then((res) => {
          console.log('评论结果:', res)
          if (res.code == 200) {
            this.$toast('评论成功')
            this.showComment = false
            this.finished = true
            this.pageNum = 1
            this.commentList = []
            this.getContentCommentList()
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 点击评论点赞按钮
    handleCommentThumb(index) {
      if (this.commentList[index].isThumb == 1) {
        this.growthContentCancelCommentThumb(index)
      } else {
        this.getContentCommentCommentThumb(index)
      }
    },
    // 评论点赞
    getContentCommentCommentThumb(index) {
      this.http
        .getContentCommentCommentThumb({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          commentId: this.commentList[index].id,
        })
        .then((res) => {
          console.log('点赞结果:', res)
          if (res.code == 200) {
            this.commentList[index].isThumb = 1
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 取消评论点赞
    growthContentCancelCommentThumb(index) {
      this.http
        .growthContentCancelCommentThumb({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          commentId: this.commentList[index].id,
        })
        .then((res) => {
          console.log('取消点赞结果:', res)
          if (res.code == 200) {
            this.commentList[index].isThumb = 0
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 删除动态
    handleDel(item) {
      this.$dialog
        .confirm({
          title: '操作',
          message: '确认删除',
        })
        .then(() => {
          this.http
            .getGrowthContentRemove({
              centerNo: this.userInfo.centerNo,
              id: item.id,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$toast('删除成功')
                this.$router.push({ name: 'GrowUp' })
              } else {
                this.$toast(res.message)
              }
            })
        })
        .catch(() => {})
    },
    // 获取用户信息
    getUserInfo() {
      let userInfo = localStorage.getItem('userInfo')
      if (userInfo) {
        userInfo = JSON.parse(userInfo)
        this.userInfo = userInfo
        this.initPage()
      } else {
        this.$toast.loading({
          message: '加载中...',
          duration: 0,
          forbidClick: true,
        })
        this.yxAxios.get(`${this.proxyUrl}/api/wx/wx1c630c8773c482f1/getUserInfo?unionId=${this.unionId}`).then((res) => {
          this.$toast.clear()
          if (res.data.data) {
            this.userInfo = res.data.data
            // this.showData = true
            this.initPage()

            localStorage.setItem('userInfo', JSON.stringify(res.data.data))

            if (res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') {
              localStorage.setItem('schoolNames', JSON.stringify(res.data.data.schoolNames))
              this.$store.commit('changeSchool', res.data.data.schoolNames)
              if (!localStorage.getItem('schoolNamesChoose')) {
                localStorage.setItem('schoolNamesChoose', JSON.stringify(res.data.data.schoolNames[0]))
              }
            } else {
              localStorage.setItem('schoolNames', [])
              this.$store.commit('changeSchool', [])
            }
          } 
        })
      }
    },
    setWxShare() {
      // 设置分享
      this.$emit('getWxConfig', {
        title: this.dataObj.userName + '分享了你一个动态', // 分享标题
        desc: this.dataObj.pname || this.dataObj.content, // 分享描述
        link: `https://payment.myjxt.com/center/#/GrowUpDetail?id=${this.id}&type=${this.type}`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'https://payment.myjxt.com/share_qxy.png', // 分享图标
      })
    },
  },
  components: {
    Tabbar3,
    ImgBox,
  },
}
</script>
<style lang="scss">
#growUpDetail {
  background: rgb(245, 246, 250);
  padding-bottom: 156px;
  min-height: 100%;
  box-sizing: border-box;
  .detail_box {
    padding: 40px 24px;
    background: #fff;
    margin-bottom: 4px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user_box {
        width: 640px;
      }
      .user_img {
        width: 74px;
        height: 74px;
        border-radius: 5px;
        overflow: hidden;
        float: left;
        margin-right: 14px;
      }
      .title {
        font-size: 28px;
        color: #999;
        span {
          display: inline-block;
          font-size: 20px;
          color: #4092ff;
          border: 1px solid #4092ff;
          border-radius: 6px;
          padding: 4px 6px;
          margin-left: 8px;
        }
      }
      .time {
        font-size: 24px;
        color: #999;
      }
      .btn {
        font-size: 24px;
        display: inline-flex;
        align-items: center;
        .icon {
          font-size: 40px;
          margin-right: 8px;
        }
      }
    }
    .content {
      font-size: 28px;
      margin-top: 24px;
      line-height: 50px;
      .tag {
        color: #4092ff;
        margin-right: 10px;
      }
    }
    .course_link {
      width: 100%;
      background: #eff1f4;
      border-radius: 18px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      .img_box {
        width: 146px;
        height: 146px;
        border-radius: 18px;
        overflow: hidden;
        position: relative;
        margin-right: 26px;
        flex-shrink: 0;
        .course_img {
          height: 100%;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        .mask {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
      .title {
        font-size: 28px;
        margin-right: 26px;
      }
    }
  }
  .comment {
    padding: 24px 0;
    background: #fff;
    .title {
      font-size: 32px;
      padding: 0 24px;
      border-bottom: 1px solid #f3f6fb;
      padding-bottom: 10px;
    }
    .item {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 24px;
      border-bottom: 1px solid #f3f6fb;
      box-sizing: border-box;
      .user_img {
        width: 74px;
        height: 74px;
        border-radius: 14px;
        margin-right: 14px;
      }
      .center {
        width: 600px;
        font-size: 28px;
        .user_name {
          color: #999;
          line-height: 40px;
        }
        .content {
          line-height: 48px;
          margin-top: 52px;
        }
        .time {
          font-size: 24px;
          color: #999;
          margin-top: 16px;
        }
      }
      .icon {
        font-size: 40px;
        color: #999;
      }
      .active {
        color: red;
      }
    }
  }
  .action_bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px 80px 24px;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    .text_box {
      width: 412px;
      height: 64px;
      box-sizing: border-box;
      padding: 12px 20px;
      background: #f5f6fa;
      border-radius: 14px;
      display: inline-flex;
      font-size: 28px;
      .icon {
        font-size: 40px;
        margin-right: 16px;
      }
      p {
        width: 100%;
      }
    }
    .btn {
      font-size: 24px;
      display: inline-flex;
      align-items: center;
      .icon {
        font-size: 40px;
        margin-right: 8px;
      }
      .active {
        color: red;
      }
    }
  }
  .comment_box {
    padding: 40px;
    .text {
      width: 500px;
      height: 300px;
      padding: 20px;
      background: rgb(235, 235, 235);
      font-size: 30px;
      border-radius: 10px;
      border: none;
      resize: none;
    }
    .btn {
      display: block;
      width: 80%;
      margin: 0 auto;
      margin-top: 40px;
    }
  }
  .share_mask {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
  }
  .share_des {
    position: absolute;
    top: 50px;
    right: 100px;
    width: 516px;
  }
}
</style>
