<template>
  <view>
    <u-navbar title="评论详情" :autoBack="true" placeholder></u-navbar>
    <u-divider></u-divider>

    <!-- 评论数据 -->
    <view class="pingBox" v-for="(item, index) in pingList" :key="item.id">
      <!-- 头像和点赞 -->
      <view class="pTopBox flexJ">
        <view class="avatarBox flexA">
          <image :src="item.user_avatar" mode="scaleToFill" />
          <view>{{ item.username }}</view>
        </view>
        <view class="zanBox flexA">
          <image
            @click="getCommentFavorite(item.is_favorite, index, item.id)"
            :src="item.is_favorite == 0 ? '/static/zan1.png' : '/static/zan11.png'"
            mode="scaleToFill"
          />
          <view>{{ item.favorite_num }}</view>
        </view>
      </view>
      <!-- 内容 -->
      <view class="contentBox">{{ item.comment }}</view>
      <!-- 回复和时间 -->
      <view class="timeBox flexA">
        <view>{{ item.create_time.slice(5, 16) }}</view>
        <view class="flexC" style="margin-left: 34rpx" @click="huiHandler(item.id, item.username)">回复</view>
      </view>
      <u-divider text="全部回复"></u-divider>

      <!-- 回复评论 -->
      <view class="hPBox" v-if="item.child.length">
        <view v-for="(it,idx) in item.child" :key="it.id">
          <view class="pTopBox flexJ">
            <view class="avatarBox flexA">
              <image :src="it.user_avatar" mode="scaleToFill" />
              <view>{{ it.username }}</view>
            </view>
            <view class="zanBox flexA">
              <image
                @click="getCommentFavoriteZZ(it.is_favorite, idx, it.id, item)"
                :src="it.is_favorite == 0 ? '/static/zan1.png' : '/static/zan11.png'"
                mode="scaleToFill"
              />
              <view>{{ it.favorite_num }}</view>
            </view>
          </view>

          <view class="huifu chao">
            <text style="margin-right: 8rpx">{{ it.comment }}</text>
            <text class="huifuText">回复</text>
            <text class="nameText">{{ it.tousername }}：</text>
            <!-- <text>{{ it.comment }}</text> -->
          </view>
          <view class="timeBox flexA" style="margin-top: 24rpx">
            <view>{{ it.create_time.slice(5, 16) }}</view>
            <view class="flexC" style="margin-left: 16rpx" @click="huiHandler(it.id, it.username)">回复</view>
          </view>
          <u-divider></u-divider>
        </view>
      </view>
    </view>

    <view class="maskBox flexC" v-if="huiState" @click="huiState = false">
      <view class="huiBox flexA" @click.stop="abb">
        <view class="zIndex">回复{{ huiName }}：</view>
        <view style="margin-left: -84rpx">
          <u-search
            searchIconColor="#F7F8FA"
            placeholder=" "
            bgColor="#F7F8FA"
            :clearabled="false"
            @search="huifuHandler"
            :showAction="false"
            v-model="huiValue"
          ></u-search>
        </view>
        <!-- <input type="text" v-model="huiValue" @input="huifuHandler" /> -->
      </view>
    </view>
    <!-- 底部白盒子 -->
    <view class="fffBox"></view>
  </view>
</template>

<script>
import { getCommentList, getCommentFavorite, getComment } from '@/api'
export default {
  data() {
    return {
      comId: '',
      itemId: '',
      curPage: 1,
      lastPage: 0,
      total: '',
      pingList: [],
      pid: '',
      huiName: '',
      huiState: false,
      huiValue: ''
    }
  },
  onLoad(e) {
    this.comId = e.comId
    this.itemId = e.itemId
    this.getCommentList()
  },
  onReachBottom() {
    if (this.curPage == this.lastPage) return uni.showToast({ title: '没有更多回复了~', icon: 'none' })
    this.curPage += 1
    this.getCommentList()
  },
  methods: {
    // 评论点赞操作
    async getCommentFavorite(isF, index, id) {
      // console.log(isF, index)
      try {
        const res = await getCommentFavorite({
          id: id, //	integer	是	评论主键ID
          set: isF == 1 ? 0 : 1, //	integer	是	0：取消,1：确认
        })
        if (isF == 1) {
          this.pingList[index].favorite_num -= 1
        } else {
          this.pingList[index].favorite_num += 1
        }
        this.pingList[index].is_favorite = this.pingList[index].is_favorite == 1 ? 0 : 1
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    async getCommentFavoriteZZ(isF, index, id, item) {
      console.log(isF,index,id)
      try {
        const res = await getCommentFavorite({
          id: id, //	integer	是	评论主键ID
          set: isF == 1 ? 0 : 1, //	integer	是	0：取消,1：确认
        })
        if (isF == 1) {
          this.pingList[0].child[index].favorite_num -= 1
        } else {
          this.pingList[0].child[index].favorite_num += 1
        }
        this.pingList[0].child[index].is_favorite = this.pingList[0].child[index].is_favorite == 1 ? 0 : 1
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    async getCommentList() {
      const res = await getCommentList({
        id: this.itemId, //	integer	是	论坛id
        comment_id: this.comId, //	integer	否	评论ID
        order: 1, //	integer	是	排序 0:时间，1:热度
        page: this.curPage, //	integer	是	页码
        rows: 4, //	integer	是	条数
      })
      console.log(res)
      this.lastPage = res.data.last_page
      this.total = res.data.total
      this.pingList = []
      this.pingList = this.pingList.concat(res.data.data)
    },
    // 防止穿透点击事件
    abb() {},
    // 回复
    huifuHandler(){
      this.pingList = []
      this.getComment(this.huiValue, this.pid)
      this.huiState = false
      this.curPage = 1
      this.getCommentList()
      this.huiValue = ''
      uni.showToast({ title: '回复成功~' })
    },
    huiHandler(pid, name) {
      this.pid = pid
      this.huiName = name
      this.huiState = true
    },
    // 评论
    async getComment(value, pid) {
      try {
        const res = await getComment({
          id: this.itemId, //	integer	是	论坛ID
          pid: pid, //	integer	是	回复id,首次评论传0
          comment: value, //	string	是	评论内容
        })
        
        this.getCommentList()
      } catch (error) {
        console.log(error)
      }
    },
  },
}
</script>

<style lang="scss">
.pingBox {
  /* padding-bottom: 32rpx; */
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  margin-bottom: 32rpx;

  > .hPBox {
    padding: 24rpx;
    box-sizing: border-box;
    background: #fff;
    /* margin-left: 80rpx; */
  }
}
.timeBox {
  margin-left: 80rpx;
  margin-bottom: 24rpx;
  view:nth-child(1) {
    color: rgba(0, 0, 0, 0.4);
    font-size: 24rpx;
    margin-right: 48rpx;
  }
  view:nth-child(2) {
    width: 114rpx;
    height: 48rpx;
    border-radius: 56rpx;
    border: 1rpx solid #b88dff;
    color: rgba(110, 22, 255, 1);
    font-size: 24rpx;
  }
}
.contentBox {
  color: rgba(0, 0, 0, 0.9);
  font-size: 28rpx;
  margin-bottom: 16rpx;
  margin-left: 80rpx;
}
.pTopBox {
  > .avatarBox {
    color: rgba(0, 0, 0, 0.9);
    font-size: 32rpx;
    font-weight: 700;
    image {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      margin-right: 16rpx;
    }
  }
  > .zanBox {
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
    image {
      width: 40rpx;
      margin-right: 8rpx;
      height: 40rpx;
    }
  }
}
.huifu {
  margin-left: 80rpx;
  > .nameText {
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
    font-weight: 700;
    margin-right: 10rpx;
  }
  > .huifuText {
    color: rgba(0, 0, 0, 0.4);
    font-size: 28rpx;
    margin-right: 10rpx;
  }
  text {
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
  }
}
.maskBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.huiBox {
  z-index: 999;
  position: fixed;
  bottom: 60rpx;
  left: 0;
  width: 686rpx;
  height: 72rpx;
  padding: 16rpx 32rpx;
  box-sizing: border-box;
  /* background: #fff !important; */
  border-radius: 38rpx;
  background: rgba(247, 248, 250, 1);
  /* margin: 0 auto; */
  margin-top: 16rpx;
  margin-left: 32rpx;
  > .zIndex {
    z-index: 999;
  }
  view {
    color: rgba(0, 0, 0, 0.4);
    font-size: 28rpx;
  }
}
.fffBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60rpx;
  background: #fff;
}
</style>