<script setup lang="ts">
import { useUserStore } from '../../../store'
import {
  cancelCircleReviewUpvote,
  createCircleReviewUpvote,
  deleteCircleReview,
  getCircleReviewReplaies,
  getReviewReplay,
} from '../../../core/libs/requests'
import { thumbsUp, thumbsUpActive } from '../../../core/libs/svgs'
import { Comment } from '../../../core/libs/models'
import { dayjs } from 'wot-design-uni'
import { storeToRefs } from 'pinia'
import CommentItem from './comment-item.vue'
import Avatar from '@/pages/common/components/avatar.vue'

const props = withDefaults(
  defineProps<{ options: Partial<Comment>; isChild?: boolean; index?: number }>(),
  {
    options: () => ({}),
    isChild: false,
  },
)
const emits = defineEmits<{
  upvote: [index?: number]
  delete: [index?: number]
  replay: [options: { reviewId: number; refreshId?: number; index?: number }]
}>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data, run } = useRequest(() => getCircleReviewReplaies({ id: props.options.id.toString() }))
const handleUpvote = async () => {
  if (!props.options.upvote) {
    const { code, msg } = await createCircleReviewUpvote({
      circleId: props.options.circleId,
      userId: userInfo.value.userId,
      userName: userInfo.value.nickname,
      reviewId: props.options.id,
    })
    code === 0 && uni.showToast({ title: '点赞成功', icon: 'none' })
  } else {
    const { code, msg } = await cancelCircleReviewUpvote({
      circleId: props.options.circleId.toString(),
      userId: userInfo.value.userId.toString(),
      reviewId: props.options.id.toString(),
    })
    code === 0 && uni.showToast({ title: '取消点赞成功', icon: 'none' })
  }
  emits('upvote')
}
const handleDelect = async () => {
  uni.showModal({
    content: '确定删除评论？',
    showCancel: true,
    success: async (res) => {
      if (res.confirm) {
        // TODO: 删除评论
        const { code, msg } = await deleteCircleReview(props.options.id)
        if (code === 0) {
          uni.showToast({ title: '删除评论成功', icon: 'none' })
        } else {
          uni.showToast({ title: msg, icon: 'none' })
        }
        emits('delete')
      }
    },
  })
}
const handleReplay = async () => {
  emits('replay', { reviewId: props.options.id, refreshId: props.options.id, index: props.index })
}
const refresh = async () => {
  console.log(11123424)

  await run()
}
onMounted(async () => {
  !props.isChild && (await run())
})
defineExpose({
  refresh,
})
</script>
<template>
  <div>
    <view
      class="grid"
      :class="
        isChild ? 'ml-9 gap-1.25 grid-cols-[22px_1fr_28px]' : 'gap-2.5 grid-cols-[28px_1fr_28px]'
      "
    >
      <!-- <wd-img
        custom-class="rounded-full overflow-hidden col-start-1 row-start-1"
        :width="isChild ? 22 : 28"
        :height="isChild ? 22 : 28"
        :src="options.userAvatar"
      /> -->
      <div class="col-start-1 row-start-1">
        <Avatar :src="options.userAvatar" :size="isChild ? 22 : 28"></Avatar>
      </div>
      <view class="col-start-2 row-start-1">
        <div class="flex items-center gap-1">
          <div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]">
            {{ options.userName }}
          </div>
          <div
            v-if="options.ownDel"
            class="px-1 rounded-[30px] border border-solid border-[#0cbe7c] justify-center items-center gap-2.5 inline-flex"
          >
            <div class="text-[#0cbe7c] text-[9px] font-normal font-['PingFang_SC']">作者</div>
          </div>
        </div>
        <div class="my-3 text-black/90 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
          <span v-if="isChild">回复</span>
          <span
            v-if="isChild"
            class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
          >
            {{ options.replayToUserName }}
            :
          </span>

          {{ options.reviewContent }}
        </div>
        <view class="flex items-center mt--4 gap-3">
          <div class="text-black/30 text-[10px] font-normal font-['PingFang_SC']">
            {{ dayjs(options.reviewTime).format('YYYY-MM-DD HH:mm') }}
          </div>
          <view class="">
            <wd-button custom-class="text-2.5!" type="text" @click="handleReplay">回复</wd-button>
          </view>
          <div v-if="userInfo.userId === options.userId">
            <wd-button custom-class="text-2.5!" type="text" @click="handleDelect">删除</wd-button>
          </div>
        </view>
      </view>
      <view class="col-start-3 row-start-1 flex flex-col items-center" @click="handleUpvote">
        <div class="w-[18px] h-[18px] relative">
          <wd-img :src="options.upvote ? thumbsUpActive : thumbsUp" width="18" height="18"></wd-img>
        </div>
        <div
          class="mt-1.5 text-black/40 text-[10px] font-normal font-['PingFang_SC'] leading-[10.18px]"
        >
          <span v-if="(options.upvoteCount ?? 0) !== 0">{{ options.upvoteCount || 0 }}</span>
        </div>
      </view>
    </view>
    <template v-for="(it, i) in data" :key="i">
      <CommentItem
        :options="it"
        :isChild="true"
        @replay="
          (options) => {
            emits('replay', { ...options, refreshId: props.options.id, index: index })
          }
        "
        @delete="emits('delete', index)"
        @upvote="emits('upvote', index)"
      ></CommentItem>
    </template>
  </div>
</template>
