<template>
  <SeoHead :title="detail?.title" :description="detail?.description" :keywords="detail?.labels?.toString()" />
  <KlNavTab />
  <!-- <div v-if="breadList && breadList.length > 1" class="mb-[-10px] mt-[20px] w-[1440px] mx-auto">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">{{ item.name }}</el-breadcrumb-item>
    </el-breadcrumb>
  </div> -->
  <div class="ml-auto mr-auto mt-[20px] w-[1440px]">
    <div class="flex items-center">
      <div
        class="box-border h-[60px] w-[1019px] flex items-center justify-between border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] px-[27px] py-[24px]"
      >
        <div class="text-[20px] text-[#333333] font-normal"> {{ detail?.title }}</div>
        <div class="flex items-center">
          <img :src="detail?.ownedUserIdInfo?.avatar" alt="" srcset="" class="h-[30px] w-[30px] rd-[50%]" />
          <span class="ml-[12px] color-[#999999]">by {{ detail?.ownedUserIdInfo?.nickName }}</span>
        </div>
      </div>

      <div class="ml-[23px] flex flex-1 text-[18px] text-[#FFFFFF] font-normal">
        <div class="h-[60px] w-[160px] flex cursor-pointer items-center justify-center rounded-[8px] bg-[#1A65FF]" @click="handleDownload">
          <img src="~/assets/images/download.png" alt="" srcset="" class="mr-[4px] h-[22px] w-[27px]" />
          {{ detail?.points === 0 ? '免费下载' : '立即下载' }}
        </div>
        <div
          v-if="!detail?.favoriteId"
          class="ml-[11px] h-[60px] flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-[#E7B03B]"
          @click="handleCollect"
          ><img src="~/assets/images/collect.png" alt="" srcset="" class="mr-[4px] h-[24px] w-[24px]" /> 收藏</div
        >
        <div v-else class="ml-[11px] h-[60px] flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-[#E7B03B]" @click="handleCollect"
          ><img src="~/assets/images/wjx2.png" alt="" srcset="" class="mr-[4px] h-[18px] w-[18px]" /> 已收藏</div
        >

        <div class="ml-[11px] h-[60px] flex flex-1 cursor-pointer items-center justify-center rounded-[8px] bg-[#F56C6C]" @click="handleReport"
          ><el-icon class="mr-[4px] mt-[4px]"><Warning /></el-icon> 举报</div
        >
      </div>
    </div>
  </div>
  <!--  -->
  <div class="ma-auto mt-[21px] flex">
    <div class="w-[1019px]">
      <div>
        <ThumBnail :data="detail?.coverImages"></ThumBnail>
      </div>
      <div class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
        <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div><span class="ml-[10px]">{{ detail?.title }}描述</span></div
      >
      <div
        class="box-border min-h-[90px] w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[24px] text-[14px] text-[#333333] font-normal"
      >
        {{ detail?.description }}
      </div>
      <div id="section1" class="mb-[20px] mt-[34px] flex items-center text-[16px] text-[#333333] font-normal">
        <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div><span class="ml-[10px]">{{ detail?.title }}附件</span></div
      >
      <div class="box-border w-[1019px] border border-[#EEEEEE] rounded-[6px] border-solid bg-[#FFFFFF] pa-[24px]">
        <div class="border-b-[1px] border-b-[#eee] border-b-solid p-b-[10px]"> 包含的文件 </div>
        <div>
          <div v-for="item in detail?.files" :key="item.id" class="flex items-center justify-between border-b-[1px] border-b-[#eee] border-b-solid py-[10px]">
            <!-- <img src="~/assets/images/avater.png" alt="" srcset="" class="h-30px w-30px" /> -->
            <div>
              <!-- <span class="ml-[10px] cursor-pointer" @click="handleDownloadPreview(item)">{{ item.title }}</span> -->
              <span class="ml-[10px]">{{ item.title }}</span>
              <span v-if="item.size" class="ml-[200px] color-[#999]">{{ item.size || '-' }}</span>
            </div>
            <el-button
              v-if="detail?.downloadId || detail?.points === 0"
              type="text"
              tag="a"
              target="download"
              :href="item.url"
              @click="handleDownloadFile(item.url, item.title)"
            >
              下载
            </el-button>
          </div>
        </div>
      </div>

      <!-- 评论 -->
      <!-- <CommentSection :relation-id="detail!.id" :project-id="detail!.projectId" /> -->
    </div>
    <div class="ml-[22px]">
      <div class="box-border min-h-[269px] w-[397px] border border-[#EEEEEE] rounded-[12px] border-solid bg-[#FFFFFF] pa-[22px]">
        <div class="mb-[10px]">工具ID: {{ detail?.no }}</div>
        <!-- <div class="mb-[10px]">文件大小：{{ detail?.filesInfo?.fileSize || 0 }} </div> -->
        <!-- <div class="mb-10px">图纸版本：{{ detail.editionsName }} </div> -->
        <!-- <div class="mb-[10px]">工具格式：{{ detail?.formatType?.toString() }}</div> -->
        <div class="mb-[10px]">所需金币：{{ detail?.points }}金币</div>
        <div class="mb-[10px]">发布时间：{{ dayjs(detail?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
        <!-- <div class="mb-[10px]">工具参数：{{ detail?.editTypeName }}</div> -->
        <div class="mb-[10px]">工具标签：{{ detail?.labels?.toString() }}</div>
        <div class="mb-[10px]">软件分类：{{ detail?.categoryName }}</div>
      </div>
      <div class="mt-[20px] w-[398px] border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid bg-[#FFFFFF]">
        <img src="~/assets/images/banner.png" alt="" srcset="" class="w-[100%]" />
        <div class="box-border border border-[#EEEEEE] border-rd-[10px_10px_0px_0px] border-solid border-t-none bg-[#FFFFFF] pa-[18px]">
          <div class="flex flex-wrap items-start">
            <div v-if="userInfo.nickname" class="text-[18px] text-[#333333] font-bold">{{ userInfo.nickname }}</div>
            <div
              v-for="item in userInfo.labels"
              :key="item"
              class="mb-[10px] ml-[10px] box-border border border-[#1A65FF] rounded-[13px] border-solid px-[8px] py-[3px] color-[#1a65ff]"
              >{{ item }}</div
            >
          </div>
          <div v-if="userInfo.description" class="mb-[20px] text-[14px] text-[#333333] font-normal">{{ userInfo.description }}</div>
          <!-- 显示作品 粉丝 荣誉证书 -->
          <div class="flex items-center gap-[40px]">
            <div class="flex items-center">
              <div class="h-[20px]">
                <img src="~/assets/images/folder.png" alt="works" class="w-[80%]" />
              </div>
              <div class="ml-[8px] mt-[-4px] text-[14px] text-[#666] font-normal">作品: {{ userInfo.projectCount || 0 }}</div>
            </div>
            <div class="flex items-center">
              <div class="h-[20px]">
                <img src="~/assets/images/user4.png" alt="fans" class="w-[80%] rounded-full vertical-top" />
              </div>
              <div class="relative top-[-3px] ml-[8px] text-[14px] text-[#666] font-normal">粉丝: {{ userInfo.fansCount || 0 }}</div>
            </div>
          </div>

          <!-- 3个图片一排 超过换下一行 -->
          <div v-if="userInfo.files?.length" class="mt-[20px] flex flex-wrap gap-[16px]">
            <div v-for="i in userInfo.files" :key="i" class="flex-1">
              <div
                class="box-border h-[200px] w-full overflow-hidden border border-[#E5E7EB] rounded-[8px] border-solid from-[#FFFFFF] to-[#F5F7FA] bg-gradient-to-b p-[16px]"
              >
                <el-image :src="i.url" fit="cover" alt="" srcset="" class="h-full object-cover" />
              </div>
            </div>
          </div>

          <div class="mt-[20px] h-[1px] w-[336px] rounded-[1px] bg-[#EEEEEE]"></div>
          <div class="mt-[20px] flex items-center">
            <div class="h-[24px] w-[4px] rounded-[1px] bg-[#1A65FF]"></div>
            <span class="ml-[10px] text-[16px]">最新发布</span>
          </div>
          <div class="mt-[10px]">
            <div
              v-for="item in mainWork"
              :key="item.id"
              class="flex cursor-pointer items-center justify-between px-[10px] py-[10px] hover:bg-[#f5f5f5]"
              @click="handleClick(item.id)"
            >
              <div class="ellipsis text-[15px] text-[#333333] font-normal">{{ item.title }}</div>
              <span class="ml-[10px] flex-shrink-0 color-[#999999]">{{ dayjs(item.createTime).format('MM-DD') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import dayjs from 'dayjs'
  import { ArrowRight } from '@element-plus/icons-vue'
  import { downloadFile } from '~/utils/utils'
  import { useMessage } from '~/utils/useMessage'
  import { Warning } from '@element-plus/icons-vue'
  import SeoHead from '~/components/seo-head/index.vue'
  import CardPicture from '~/components/kl-card-picture/index.vue'
  import { getDictTree } from '~/api/home/index'
  import { get } from '@/api/toolbox/index'
  import { getDetail, getRelationRecommend, report, getUserInfo, getMainWork, createContent, createUserProject, deleteProject } from '~/api/drawe-detail/index'
  import KlNavTab from '~/components/kl-nav-tab/index.vue'
  import ThumBnail from './components/swiper.vue'
  // import CommentSection from '~/components/comment-section/index.vue'
  import { useRoute } from 'vue-router'
  import useUserStore from '~/stores/user'
  const message = useMessage()
  const userStore = useUserStore()
  // 获取路由参数
  const route = useRoute()
  const id = route.params.id as string

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

  console.log('==', detail.value)

  if (!detail.value) {
    throw createError({
      statusCode: 404,
      statusMessage: 'Page Not Found',
      fatal: true,
    })
  }

  // init()

  const [{ data: mainWork }, { data: userInfo }] = await Promise.all([
    getMainWork({ id: detail.value?.id, limit: 10, memberId: detail.value?.ownedUserId }),
    getUserInfo({ id: detail.value?.id }),
  ])

  // 获取最新发布
  // const mainWork = ref<ProjectDrawMemberRespVO[]>([])
  // const handleGetMainWork = () => {
  //   getMainWork({ id: detail.value?.id, limit: 10, memberId: detail.value?.ownedUserId }).then((res) => {
  //     if (res.code === 0) {
  //       mainWork.value = res.data
  //     }
  //   })
  // }
  // 获取用户信息
  // const userInfo = ref<UserExtendSimpleRespDTO>({} as UserExtendSimpleRespDTO)
  // const handleGetUserInfo = () => {
  //   getUserInfo({ id: detail.value?.id }).then((res) => {
  //     if (res.code === 0) {
  //       userInfo.value = res.data
  //     }
  //   })
  // }

  // 获取关联推荐
  // const relationRecommend = ref<ProjectDrawPageRespVO[]>([])
  // const getRelationRecommendList = () => {
  //   getRelationRecommend({ type: detail.value?.type, projectType: detail.value?.projectType[0] }).then((res) => {
  //     if (res.code === 0) {
  //       relationRecommend.value = res.data
  //     }
  //   })
  // }

  const handleDownloadPreview = (item: any) => {
    // 预览pdf
    navigateTo(`/pdf-preview?url=${item.url}`)
  }

  /** 获取下载类型 */
  const getType = (type: number) => {
    if (type === 1 || type === 2 || type === 3) {
      // 图纸 文本 模型都传1
      return 1
    }
    // 工具箱传
    return 2
  }

  const handleDownload = async () => {
    if (!userStore.token) {
      ElMessage.error('请先登录')
      return
    }

    if (detail.value?.points === 0) {
      scrollTo()
      return
    }

    if (detail.value?.downloadId) {
      ElMessage.success('您已获取下载权限')
      scrollTo()
      return
    }

    const res = await message.confirm(`是否花费${detail.value?.points}金币下载此资源，是否继续？`, '提示')
    if (res) {
      createUserProject({ relationId: detail.value?.id, type: 2 }).then((res) => {
        if (res.code === 0) {
          ElMessage.success('获取下载权限成功')
          detail.value!.downloadId = res.data
          scrollTo()
        }
      })
    }
  }

  const scrollTo = () => {
    const element = document.getElementById('section1')
    if (element) {
      element.scrollIntoView({
        behavior: 'smooth',
      })
    }
  }

  const handleReport = () => {
    if (!userStore.token) {
      ElMessage.error('请先登录')
      return
    }
    console.log('举报')
    ElMessageBox.prompt('说明内容', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPlaceholder: '请输入举报内容',
      inputErrorMessage: '请输入举报内容',
    }).then(({ value }) => {
      report({
        id: detail.value?.id,
        title: detail.value?.title,
        files: detail.value?.files,
        comments: value,
        projectId: detail.value?.projectId,
        drawId: detail.value?.id,
      }).then((res) => {
        if (res.code === 0) {
          ElMessage.success('举报成功')
        }
      })
    })
  }

  const handleCollect = async () => {
    if (!userStore.token) {
      ElMessage.error('请先登录')
      return
    }

    const res = detail.value?.favoriteId
      ? await deleteProject({ id: detail.value.favoriteId })
      : await createContent({
          projectId: detail.value?.projectId,
          drawId: detail.value?.id,
        })
    if (res.code === 0) {
      ElMessage.success(`${detail.value?.favoriteId ? '取消' : '收藏'}成功`)
      refreshDetail()
    }
  }

  const handleClick = (id: string | number) => {
    navigateTo(`/toolbox-detail/${id}`) // 修改为在新窗口打开
  }

  const handleDownloadFile = (url: string, name: string) => {
    downloadFile(url, name)
  }
</script>
