<template>
  <div class="mt-30px">
    <div class="h-48px w-938px rounded-1px bg-[#F8F8F8] pl-10px text-16px text-[#333333] font-normal line-height-50px"> 共有{{ result.total || 0 }}条评论 </div>
    <div v-for="item in result.list" :key="item.id" class="mt-20px border-b-1px border-b-[#eee] border-b-solid pb-14px">
      <div class="flex items-start">
        <el-avatar :src="item.creatorInfo.avatar" alt="" srcset="" class="h-50px w-49px rounded-full" />
        <div class="flex-1 pl-8px">
          <div class="flex items-center justify-between">
            <div class="relative top-4px text-14px!">{{ item.creatorInfo.nickName }}</div>
            <div class="text-12px text-[#999999] font-normal">发表时间：{{ dayjs(item.creatorInfo.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
          <div class="mt-10px box-border rd-4px bg-[#f8f8f8] px-18px py-10px text-14px text-[#999999] font-normal">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <!-- 添加element-plus分页 -->
    <el-pagination
      v-model:current-page="query.pageNo"
      :page-size="query.pageSize"
      layout="prev, pager, next"
      :total="result.total"
      class="mt-10px"
      @current-change="handleCurrentChange"
    />
    <el-input v-model="commentContent" type="textarea" :rows="6" placeholder="请输入内容" class="mt-20px w-100%"></el-input>
    <div>
      <el-button type="primary" class="mt-10px h-40px w-101px rounded-4px text-16px text-[#FFFFFF] font-bold" @click="handleCreateComment">
        发表评论
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import dayjs from 'dayjs'
  import { getCommentList, createComment } from '~/api/drawe-detail'
  import type { PageResultProjectCommentResVO } from '~/api/drawe-detail/types'

  const props = defineProps({
    relationId: {
      type: Number,
      required: true,
    },
    projectId: {
      type: Number,
      required: true,
    },
  })

  const query = ref({
    pageNo: 1,
    pageSize: 10,
  })

  const result = ref<PageResultProjectCommentResVO>({
    list: [],
    total: 0,
  })

  const commentContent = ref('')
  const handleCurrentChange = (pageNo: number) => {
    query.value.pageNo = pageNo
    handleGetCommentList()
  }

  // 获取评论列表
  const handleGetCommentList = async () => {
    const res = await getCommentList({ relationId: props.relationId, pageNum: query.value.pageNo, pageSize: query.value.pageSize })
    if (res.code === 0) {
      result.value.list = res.data.list
      result.value.total = res.data.total
    }
  }

  // 发表评论
  const handleCreateComment = async () => {
    const res = await createComment({ relationId: props.relationId, content: commentContent.value, projectId: props.projectId })
    if (res.code === 0) {
      commentContent.value = ''
      query.value.pageNo = 1
      handleGetCommentList()
    }
  }

  watch(
    () => props.relationId,
    () => {
      handleGetCommentList()
    }
  )
</script>
