<template>
  <div class="comment-list">
    <!-- 评论列表 -->
    <div class="list-box" v-for="(item, j) in comments" :key="j" @click="onCommentClick(item)">
      <van-image
        class="comment-avatar"
        round
        :src="item.send_user_avatar || defaultAvatar"
      />
      <div style="flex: 1;">
        <div class="comment-item">
          <div class="comment-nickname" v-if="item.top_pid === 0">{{ item.send_user }}</div>
          <div v-else>
            <span class="comment-nickname">{{ item.send_user }}</span>
            <span class="reply">回复</span>
            <span class="comment-nickname">{{ item.receive_user }}</span>
          </div>
          <span class="comment-time">{{ item.created_at }}</span>
        </div>
        <div class="comment-content">{{ item.content }}</div>
      </div>
    </div>

    <!-- Vant 评论弹框 -->
    <van-popup v-model:show="commenting" position="center" round style="height: 180px">
      <div class="pop-content">
        <van-field
          v-model="commentText"
          type="textarea"
          rows="2"
          autosize
          placeholder="请输入评论" style="flex: 1;"
        />
        <div class="pop-btn-password" style="margin-top: 20px;">
          <van-button type="default" class="btn-password cancel" @click="closeComment">{{ $t('wallet.Cancel') }}</van-button>
          <van-button type="default" class="btn-password confirm" :disabled="isDisabledConfirm" @click="submitComment">{{ $t('wallet.Sure') }}</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { showToast } from 'vant';
import { dynamicComment, dynamicDetail } from "@/api/path/im.api";
import { useSystemStore } from "@/stores/modules/systemStore";

export default {
  name: "Remark",
  props: {
    comments: {
      type: Array,
      default: () => []
    },
    dynamicId: {
      type: [String, Number],
      required: true
    },
    userId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      commenting: false,
      commentText: "",
      isDisabledConfirm: false,
      par: {
        dynamic_id: "",
        content: "",
        to_user_id: "",
        pid: "",
        top_pid: ""
      },
      defaultAvatar: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
      systemStore:useSystemStore()
    };
  },
  methods: {
    // 打开评论弹框（供父组件调用）
    openComment(item) {
      this.par.dynamic_id = item.dynamic_id;
      this.par.to_user_id = item.user_id;
      this.par.pid = 0;
      this.par.top_pid = 0;
      this.commentText = "";
      this.commenting = true;
    },
    // 点击评论或回复
    onCommentClick(item) {
      console.log(item)
      const userWalletId = this.systemStore.USERID;
      if (item.send_user_id === userWalletId) return; // 可实现删除
      this.par.dynamic_id = this.dynamicId;
      this.par.to_user_id = item.send_user_id;
      this.par.pid = item.comment_id || 0;
      this.par.top_pid = item.send_user_id || 0;
      this.commentText = "";
      this.commenting = true;
    },
    // 关闭弹框
    closeComment() {
      this.commenting = false;
      this.commentText = "";
      this.par = { dynamic_id:"", content:"", to_user_id:"", pid:"", top_pid:"" };
    },
    // 提交评论
    submitComment() {
      if (!this.commentText.trim()) {
        showToast('请输入评论内容');
        return;
      }
      this.par.content = this.commentText;
      dynamicComment(this.par).then((res) => {
        if (res.code === 1) {
          this.refreshComments();
          this.closeComment();
        }
      });
    },
    // 刷新评论列表
    refreshComments() {
      dynamicDetail({ dynamic_id: this.dynamicId }).then((res) => {
        this.$emit("update:comments", res.data.commnet_array);
      });
    }
  }
};
</script>

<style scoped lang="less">
.comment-list {
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  .list-box {
    display: flex;
    background: #F2F2F2;
    padding: 8px;
  }

  .comment-avatar {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    margin-top: 1px;
  }

  .comment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;

    .reply {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      margin: 0 4px;
    }

    .comment-nickname {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #4765DD;
      font-style: normal;
      text-transform: none;
    }

    .comment-time {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #8D8D8D;
      font-style: normal;
      text-transform: none;
      // margin-left: auto;
    }
  }

  .comment-content {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 12px;
    color: #000000;
    word-break: break-all;
    white-space: normal;
  }
}
:deep(.van-cell:after){
  border-bottom: 0 !important;
}
:deep(.van-cell){
  padding:0 !important;
  overflow: auto !important;
}
:deep(.van-cell__value){
  font-size: 15px !important;
}

.pop-content {
  padding: 16px;
  height: 180px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.pop-btn-password{
  display: flex;
  justify-content: center;
  .btn-password{
    width: 83px;
    height: 29px;
    line-height: 29px;
    padding: 5px 0 !important;
    border-radius: 6px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    box-sizing:border-box;
  }
  .cancel{
    margin-right: 17px !important;
    border: 1px solid #D8D8D8;
    color: #000 !important;
  }
  .confirm{
    background: @theme-color1;
    color: #FFF;
    font-weight: 500;
    border: none !important;
  }
}
</style>