<template>
  <van-popup v-model:show="show" :close-on-click-overlay="false" round position="bottom" :style="{ height: '70%' }">
    <div class="van-hairline--bottom">
      <van-row>
        <van-col span="4" @click="onReload">
          <div style="padding: 1rem; text-align: center;">
            <van-icon :name="icon_x" size="1.25rem" />
          </div>
        </van-col>
        <van-col span="16" style="color: #222222; text-align: center; line-height: 3;">
          <span>{{ data.total }}条回复</span>
        </van-col>
        <van-col span="4" @click="closeBtn">
          <div style="padding: 1rem;">
            <van-icon :name="icon_y" size="1.25rem" />
          </div>
        </van-col>
      </van-row>
    </div>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
      <template v-for="(item, key) in replyList" :key="key">
        <div class="comment-wrapper">
          <van-row style="font-size: 0.9rem;">
            <van-col span="4">
              <van-image round width="3rem" height="3rem" :src="item.avatar" />
            </van-col>
            <van-col span="14">
              <p>{{ item.name }}</p>
              <p>{{ item.kg_name }}</p>
            </van-col>
            <van-col span="6" style="text-align: right;">
              <p style="color: #333333;">回复</p>
              <p>{{ item.comment_time }}</p>
            </van-col>
          </van-row>
          <van-row>
            <van-col offset="4">
              <span style="color: #222222;">{{ item.note }}</span>
            </van-col>
          </van-row>
        </div>
      </template>
    </van-list>
    <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box>
  </van-popup>


</template>

<script setup>
import CommentBox from '@/components/CommentBox/index.vue'

import icon_x from '@images/x.png'
import icon_y from '@images/y.png'

import axios from '@/utils/axios';
import _ from 'lodash'
import { Toast } from 'vant';

import { ref, reactive, onMounted } from 'vue'
// const props = defineProps({
//   showPopup: Boolean
// })

// 回复评论控件
const showCommentBoxPopup = ref(false);
const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
const flag = true; // 后台接口判断是否上传过作品
// 实际调试时，点击回复需要判断是否上传过作品
const setComment = (v, type) => { // 回复/评论
  if (flag) {
    showCommentBoxPopup.value = true;
    commentType.value = type;
  } else {
    showNotice.value = true;
  }
}
const closeCommentBox = (v) => { // 查看更多回复
  showCommentBoxPopup.value = v;
}

onMounted(() => {
})
</script>

<script>
export default {
  props: ['showPopup', 'data'],
  data() {
    return {
      show: false,
      replyList: [],
      loading: false,
      finished: false,
      limit: 10,
      offset: 0,
    }
  },
  mounted() {
  },
  watch: {
    showPopup(value, pre) {
      if (value) {
        this.show = value;
        this.onReload()
      }
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      axios.get('/srv/?a=reply_list', {
        params: {
          comment_id: this.data.id,
          limit: this.limit,
          offset: this.offset
        }
      })
        .then(res => {
          if (res.data.code === 1) {
            this.replyList = _.concat(this.replyList, res.data.data.replylist);
            this.offset = this.replyList.length;
            this.loading = false;
            // 数据全部加载完成
            if (!res.data.data.replylist.length) {
              // 加载状态结束
              this.finished = true;
            }
          } else {
            console.warn(res);
            Toast({
              icon: 'close',
              message: res.data.msg
            });
          }
        })
        .catch(err => {
          console.error(err);
        })
    },
    onReload () {
      this.replyList = [];
      this.offset = 0;
      this.onLoad();
    },
    onClose() {
      this.show = false;
    },
    closeBtn() {
      this.$emit('on-close', false)
      this.show = false;
    }
  }
}
</script>

<style lang="less" scoped>
.comment-wrapper {
  color: #999999;
  padding: 1rem;
  line-height: 1.75;

  .reply-wrapper {
    background: #F7F7F7;
    border-radius: 10px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    color: #0B3A72;

    .content {
      color: #222222;
    }
  }
}
</style>