<script setup>
import { ref } from 'vue'

const props = defineProps({
  height: {
    type: String,
    default: '',
  },
  dataList: {
    type: Array,
    default: () => [],
  },
  userInfo: {
    type: Object,
    default: () => ({}),
  },
  productId: {
    type: Number,
    default: 0,
  },
})

const message = useMessage()

// 获取评论列表
const commentList = ref([])
async function getCommentList() {
  try {
    const res = await request.get(`/WorkFlowComment/comment/${props.productId}`)
    for (let i = 0; i < res.data.length; i++) {
      res.data[i].isShowInput = false
      res.data[i].isShowSend = false
      if (res.data[i].contentList.length > 0) {
        for (let j = 0; j < res.data[i].contentList.length; j++) {
          res.data[i].contentList[j].isShowInput = false
          res.data[i].contentList[j].isShowSend = false
        }
      }
    }
    commentList.value = res.data
  }
  catch (error) {
    console.log(error)
  }
}
getCommentList()
// const $props = defineProps(['headUrl', 'dataList', 'height'])
// const $emit = defineEmits(['sendMessage'])
// const props = defineProps
const isShowSend = ref(false)
const publicWord = ref('')
// const message = useMessage()

function handleBlur(ele) {
  ele.isShowInput = false
  // 默认评价
  if (!ele) {
    isShowSend.value = !!publicWord.value
  }
  else {
    ele.isShowSend = !!ele.word
  }
}

// 发布评论
const commentParams = ref({
  content: '',
  parentId: '',
  userId: props.userInfo.userId,
  workFlowId: props.productId,
})
//
async function sendMessage(data, ele) {
  debugger
  try {
    if (commentParams.value.content) {
      const res = await request.post('WorkFlowComment/comment', commentParams.value)
      if (res.code === 200) {
        message.success('评论成功！')
      }
    }
    else {
      message.error('评论不能为空！')
    }
  }
  catch (error) {
    console.log(error)
  }
  // if(!publicWord.value){
  //   return message.info(
  //     '请输入评论',
  //     { duration: 3000 }
  //   )
  // }
  if (!data) {
    // $props.dataList.push({
    //   headUrl: 'https://avatars.githubusercontent.com/u/19239641?s=60&v=4', // 头像
    //   name: '星辰流连', // 名称
    //   id: 6,
    //   des: publicWord.value, // 评论
    //   time: '2025/02/08 14:52:06', // 时间
    //   isAuthor: false, // 是否是作者
    //   isShowInput: false, // 是否显示回复框
    //   isFocus: true, // 是否点赞
    //   focusNum: 2, // 点赞数量
    //   word: '', // 评论语
    //   isShowSend: false, // 是否显示发送按钮
    // })

    publicWord.value = ''
    // isShowSend.value = false
  }
  else {
    data.push({
      headUrl: 'https://avatars.githubusercontent.com/u/19239641?s=60&v=4', // 头像
      name: '星辰流连', // 名称
      id: 7,
      des: ele.word, // 评论
      time: '2025/02/08 14:52:06', // 时间
      isAuthor: false, // 是否是作者
      isShowInput: false, // 是否显示回复框
      isFocus: true, // 是否点赞
      focusNum: 2, // 点赞数量
      word: '', // 评论语
      isShowSend: false, // 是否显示发送按钮
    })

    ele.word = ''
    ele.isShowInput = false
  }

  // 发送数据
  $emit('sendMessage', data)
}

// 目前点赞都在这边，注意区分
function handleFocus(item) {
  item.isFocus = !item.isFocus
}

function handleMessage(item) {
  debugger
  if (!item.isShowInput) {
    item.word = ''
  }
  item.isShowInput = !item.isShowInput
}

function handleDel(ele, item) {
  const index = item.findIndex(el => ele.id === el.id)
  item.splice(index, 1)
}
</script>

<template>
  <div class="base-comment">
    <!-- 头部评论框 -->
    <div class="flex justify-between mb-4">
      <div v-if="props.userInfo.avatar" class="w-11 h-11 rounded-full mr-4 border border-[#2d28ff] border-solid">
        <img class="w-10 h-10 rounded-full p-1" alt="avatar" :src="props.userInfo.avatar">
      </div>
      <div class="input-wrap flex items-center leading-normal rounded-lg text-sm bg-[#f2f5f9] px-4 py-2 flex-1">
        <NConfigProvider inline-theme-disabled class="w-full">
          <n-input
            v-model:value="commentParams.content"
            type="textarea"
            :autosize="{ minRows: 1 }"
            placeholder="善语结善缘，恶言伤人心~"
            @focus="isShowSend = true"
            @blur="handleBlur"
          />
        </NConfigProvider>
        <div
          class="mx-4 flex-shrink-0 text-sm cursor-pointer text-gray-400 hover:text-gray-900"
          :class="{ 'text-gray-900': commentParams.content }"
          @click="sendMessage"
        >
          <span v-if="isShowSend">发送sendMessage</span>
        </div>
      </div>
    </div>

    <!-- 评论列表 -->
    <NInfiniteScroll :style="{ height: `${height}px` }" :distance="10" @load="handleLoad">
      <div v-for="(item, index) in commentList" :key="index">
        <!-- 主评论 -->
        <div class="flex text-sm">
          <div class="w-10 h-10 rounded-full mr-3 flex-shrink-0">
            <img :src="item.userAvatar" class="w-full h-full rounded-full">
          </div>
          <div class="w-full">
            <div class="mt-[10px] mb-[7px] font-medium text-gray-700">
              {{ item.userName }}
            </div>
            <div class="leading-[1.25]">
              {{ item.content }}
            </div>
            <div class="mt-1 flex items-center justify-between">
              <span class="text-xs text-gray-400">{{ item.createTime }}</span>
              <div class="text-xs text-gray-400 flex items-center cursor-pointer">
                <div class="flex items-center mr-4">
                  <img v-if="item.focus" src="@/assets/img/heart.png" class="w-4 h-4 mr-[3px]">
                  <img v-else src="@/assets/img/heart.png" class="w-4 h-4 mr-[3px]" @click="handleFocus(item)">
                  <span class="align-middle">{{ item.likeNum }}</span>
                </div>
                <span class="mr-4" @click="handleMessage(item)">回复</span>
                <span @click="handleDel(item, dataList)">删除</span>
              </div>
            </div>

            <!-- 评论回复框 -->
            <div v-if="item.isShowInput" class="input-wrap mt-[10px] flex items-center rounded-lg text-sm bg-[#f2f5f9] px-3 py-2">
              <NConfigProvider inline-theme-disabled class="w-full">
                <n-input
                  v-model:value="item.word"
                  type="textarea"
                  :autosize="{ minRows: 1 }"
                  :placeholder="`回复: @${item.userName}`"
                  @focus="item.isShowSend = true"
                  @blur="handleBlur(item)"
                />
              </NConfigProvider>
              <div
                class="mx-4 flex-shrink-0 text-sm cursor-pointer text-gray-400 hover:text-gray-900"
                :class="{ 'text-gray-900': item.word }"
                @click="sendMessage(item.children, item)"
              >
                <span v-if="item.isShowSend">发送sendMessage</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 子评论 -->
        <div class="pl-[52px]">
          <div v-for="(ele, subIndex) in item.contentList" :key="subIndex" class="flex text-sm mt-4">
            <div class="w-6 h-6 rounded-full mr-3 flex-shrink-0">
              <img src="https://avatars.githubusercontent.com/u/20943608?s=60&v=4" class="w-full h-full rounded-full">
            </div>
            <div class="w-full">
              <div class="mb-[7px] font-medium text-gray-700 flex items-center">
                {{ ele.userName }}
                <div v-if="ele.userAvatar" class="ml-2 px-1 py-[3px] text-xs leading-[12px] text-white rounded bg-gradient-to-r from-[#2d28ff] to-[#1a7dff]">
                  作者
                </div>
              </div>
              <div class="flex items-center">
                <span>回复</span>
                <span class="text-[#1880ff] mr-[6px]">@{{ ele.userName }}</span>
                {{ ele.des }}
              </div>
              <div class="mt-1 flex items-center justify-between">
                <span class="text-xs text-gray-400">{{ ele.createTime }}</span>
                <div class="text-xs text-gray-400 flex items-center cursor-pointer">
                  <div class="flex items-center mr-4">
                    <img v-if="ele.isFocus" src="@/assets/img/heart.png" class="w-4 h-4 mr-[3px]" @click="handleFocus(ele, 'cancel')">
                    <img v-else src="@/assets/img/heart.png" class="w-4 h-4 mr-[3px]" @click="handleFocus(ele, 'add')">
                    <span class="align-middle">1</span>
                  </div>
                  <span class="mr-4" @click="handleMessage(ele)">回复</span>
                  <span @click="handleDel(ele, item.contentList)">删除</span>
                </div>
              </div>

              <!-- 子评论回复框 -->
              <div v-if="ele.isShowInput" class="input-wrap mt-[10px] flex items-center rounded-lg text-sm bg-[#f2f5f9] px-3 py-2">
                <NConfigProvider inline-theme-disabled class="w-full">
                  <n-input
                    v-model:value="ele.word"
                    type="textarea"
                    :autosize="{ minRows: 1 }"
                    :placeholder="`回复: @${ele.userName}`"
                    @focus="ele.isShowSend = true"
                    @blur="handleBlur(ele)"
                  />
                </NConfigProvider>
                <div
                  class="mx-4 flex-shrink-0 text-sm cursor-pointer text-gray-400 hover:text-gray-900"
                  :class="{ 'text-gray-900': ele.word }"
                  @click="sendMessage(item.children, ele)"
                >
                  <span v-if="ele.isShowSend">发送sendMessage</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多 -->
      <div class="text-sm text-gray-400 text-center py-[46px] pb-[118px]">
        暂时没有更多评论
      </div>
    </NInfiniteScroll>
  </div>
</template>

<style scoped lang="scss">
.input-wrap {
  :deep(.n-input) {
    --n-padding-left: 0 !important;
    --n-border: 0 !important;
    --n-border-hover: 0 !important;
    --n-border-focus: 0 !important;
    --n-box-shadow-focus: unset;
    --n-padding-vertical: 0px !important;
  }
  &::hover {
    border: 0;
  }
  &:active,
  &:focus {
    background-color: #f2f5f9;

    border: 0 !important;
  }
  background-color: #f2f5f9;
}
.n-input--textarea {
  background-color: #f2f5f9;
}
.n-input:not(.n-input--disabled).n-input--foucs {
  background-color: #f2f5f9 !important;
}
.n-input--focus {
  background-color: #f2f5f9 !important;
}
</style>
