<template>
  <div class="">
    <!-- 回复条数大于20才加载 后端需要给我总条数 -->
    <template v-if="sum >= 20">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="item in list" :key="item" :title="item">
          {{ item }}
        </div>
      </van-list>
    </template>
    <template v-else>
      <div class="comment-wrapper">
        <van-row style="font-size: 0.9rem;">
          <van-col span="4">
            <van-image round width="3rem" height="3rem" src="https://cdn.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
          </van-col>
          <van-col span="16">
            <p>是妮妮吖～</p>
            <p>杨浦民办科技幼稚园</p>
          </van-col>
          <van-col span="4" style="text-align: center;">
            <p @click="setComment('11', 'reply')" style="color: #333333;">回复</p>
            <p>2-25</p>
          </van-col>
        </van-row>
        <van-row>
          <van-col offset="4">
            <span style="color: #222222;">瑟日古娜小朋友表演的可真棒，感谢你的精彩演绎，希望有更多的小朋友能够学习到！</span>
          </van-col>
        </van-row>
        <van-row>
          <van-col offset="4">
            <div class="reply-wrapper">
              <p><span>瑟日古娜（作者）：</span><span class="content">谢谢您的表扬，我会继续加油的！</span></p>
              <p><span>阿布日达 </span>回复<span> @瑟日古娜（作者）：</span><span class="content">厉害的呀，棒！！</span></p>
              <p @click="getMore()">共12条回复 ></p>
            </div>
          </van-col>
        </van-row>
      </div>
    </template>
    <div style="height: 5rem;"></div>
    <div class="reply-btn" @click="setComment('222', 'comment')">
      <div class="text">写下你友善的留言</div>
    </div>
  </div>
  <comment-list :showPopup="showCommentListPopup" @on-close="closeCommentList"></comment-list>
  <comment-box :showPopup="showCommentBoxPopup" :type="commentType" @on-close="closeCommentBox"></comment-box>

  <!-- 写评论时，如果没有上传作品提示弹框 -->
  <van-overlay :show="showNotice" z-index="1000">
    <div class="wrapper" @click.stop>
      <div class="block">
        <div>
          <van-image width="100" height="100" :src="icon_notice" />
          <p style="margin: 1rem; font-size: 1.15rem; font-weight: bold; color: #222222;">温馨提示</p>
        </div>
        <div style="color: #333333;">
          <p>您还没有上传作品</p>
          <p>请返回书籍详情页，点击 <span style="font-weight: bold; color: #713610;">上传作品</span> 按钮</p>
          <p>上传之后再留言</p>
        </div>
        <div style="margin: 3rem 0;">
          <my-button @on-click="closeNotice" type="primary">返回</my-button>
        </div>
      </div>
    </div>
  </van-overlay>
</template>

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

import icon_me from '@images/icon-my@2x.png'
import icon_notice from '@images/que-tishi@2x.png'

import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '@/utils/axios';
import $ from 'jquery'
import { Toast } from 'vant';
const $route = useRoute();
const $router = useRouter();

const list = ref([]);
const sum = ref(0);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 100) {
      finished.value = true;
    }
  }, 1000);
};

// 回复消息列表模块
const showCommentListPopup = ref(false);
const getMore = (v) => { // 查看更多回复
  showCommentListPopup.value = true;
}
const closeCommentList = (v) => { // 查看更多回复
  showCommentListPopup.value = v;
}
// 回复评论控件
const showCommentBoxPopup = ref(false);
const commentType = ref('comment'); // 类型 comment 为评论/类型 reply 为回复
const showNotice = ref(false)
const closeNotice = () => { // 关闭提示框回调
  showNotice.value = false;
  $router.push({
    path: '/client/bookDetail'
  });
}
const flag = false; // 后台接口判断是否上传过作品
// 实际调试时，点击回复需要判断是否上传过作品
const setComment = (v, type) => { // 回复/评论
  if (flag) {
    showCommentBoxPopup.value = true;
    commentType.value = type;
  } else {
    showNotice.value = true;
  }
}
const closeCommentBox = (v) => { // 查看更多回复
  showCommentBoxPopup.value = v;
}


onMounted(() => {
  sum.value = 10; // 获取评论总条数，判断是否加载控件
})
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</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;
    }
  }
}

.reply-btn {
  position: fixed;
  bottom: 1rem;
  left: 0;
  right: 0;

  .text {
    text-align: center;
    padding: 0.5rem;
    margin: 0.8rem;
    font-size: 0.85rem;
    border-radius: 24px;
    border: 1px solid F7F7F7;
    color: #B7B7B7;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: auto;
  text-align: center;
}

.block {
  width: 80%;
  // height: 25rem;
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem;
}
</style>