<!-- 工具箱详情页面 -->
<template>
  <KlNavTab />
  <div
    class="toolbox-detail w-[1200px] min-h-[374px] bg-[#FFFFFF] rounded-[12px] border border-solid border-[#EEEEEE] pa-[37px] pt-[20px] box-border ma-auto mt-[30px]"
  >
    <div class="w-[100%]">
      <h1 class="font-[Microsoft_YaHei] font-bold text-[24px] text-[#333333] leading-[21px]">{{ detail?.title }}</h1>
      <div class="flex items-center w-[100%] mt-[30px]">
        <img :src="userStore.ownedUserAvatar" alt="头像" class="w-[49px] h-[50px] rounded-[50%] mr-[16px]" />
        <div class="flex flex-col items-start w-[100%]">
          <p class="font-[Microsoft_YaHei] font-normal text-[16px] text-[#333333] leading-[8px]">{{ userStore.ownedUserName || '用户昵称' }}</p>
          <div class="flex items-center justify-between mt-[8px] w-[100%]">
            <p class="font-[Microsoft_YaHei] font-normal text-[12px] text-[#999999] leading-[8px]">
              {{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}
            </p>
            <div class="flex items-center justify-between font-[Microsoft_YaHei] font-normal text-[14px] text-[#666666] leading-[8px]">
              <div class="mr-[9px] flex items-center">
                <img src="~/assets/images/look.png" alt="" srcset="" class="mr-[2px] h-[17px]" />
                <span class="color-[#666]">{{ detail?.previewPoint || 0 }}</span>
              </div>
              <div class="mr-[9px] flex items-center">
                <img src="~/assets/images/add.png" alt="" srcset="" class="mr-[2px] h-[22px]" />
                <span class="color-[#666]">{{ detail?.hotPoint || 0}}</span>
              </div>
              <div class="flex items-center">
                <img src="~/assets/images/chat.png" alt="" srcset="" class="mr-[4px] h-[17px]" />
                <span class="color-[#666]">{{ detail?.commentsPoint || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w-[100%] h-[1px] bg-[#EEEEEE] rounded-[1px] my-[20px]"></div>
    <div class="body">
      <p class="font-[Microsoft_YaHei] font-normal text-[14px] text-[#333333] leading-[26px]">
        {{ detail?.description }}
      </p>
    </div>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { get } from '@/api/toolbox/index'
  import useUserStore from '~/stores/user'
  const userStore = useUserStore()
  const route = useRoute()
  console.log(route.params.id)

  const { data: detail } = await useAsyncData(`toolbox-detail-${route.params.id}}`, async () => {
    const res = await get({ id: route.params.id as string })
    return res.data
  })

  console.log(detail.value)
</script>
