<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="refreshBtn">
          <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>12条回复</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>
    <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 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>
    </div>
    <div class="comment-wrapper" style="background-color: #F7F7F7;">
      <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;" @click="setComment('222', 'reply')">
          <p 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>
    </div>
    <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 { 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 () {
    return {
      show: false
    }
  },
  mounted () {
  },
  watch: {
    showPopup (value, pre) {
      if (value) {
        this.show = value;
      }
    }
  },
  methods: {
    onClose () {
      this.show = false;
    },
    refreshBtn () {},
    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>