<script lang="ts" setup>
import useRequest from '@/hooks/useRequest'
import { queryPostByName, queryPosts } from '@/api/halo-base/post'
import { completeUrl } from '@/utils/url'
import { timeFrom } from '@/utils/base/timeFrom'
import { useListData } from '@/hooks/useListData'
import { getRandomUrl, randomImageUrl } from '@/utils/randomResources'
import type { ListedPostVo, ListedPostVoList, PostV1alpha1PublicApiQueryPostByNameRequest, PostV1alpha1PublicApiQueryPostsRequest, PostVo } from '@halo-dev/api-client'

import PostCard from '@/components/post-card/post-card.vue'

defineOptions({
  name: 'Home',
})

definePage({
  type: 'home',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
    enablePullDownRefresh: true,
  },
})

const exampleImageUrls = reactive({
  banner: 'https://fastly.picsum.photos/id/353/800/800.jpg?hmac=RaDuQ92sSXj4q5vOYna9G00J7KrBUC3eBS0slCWYZXA',
  avatar: 'https://www.xiaoxiaomo.cn/logo.jpg',
  postCover1: 'https://lh3.googleusercontent.com/aida-public/AB6AXuDg-QKAXOU1_Lv726MyeTiY2R1MAJWKzjiUy__RYoUw78YL5PctVg2sfMUCRMBybAzw_E0V0fEhir4IW2RHF7YRcxm89JFDKVMlfU_yQTijnr4o-praEXX_buxFWWxsSayLdA64X9pOmjYT5FDp9kfpW4tqZBWLfiyqhiYZnyHTCFeKZruH2auHZt4OlsOdzamOOkoib4CMGmUwTj112emdzlshRDLxGOSbThTWUOw61YirCl-RUrx1WFg2kZimP9Byq4pV7tv9YhtS',
  postCover: 'https://www.yijunzhao.cn/upload/HermesWebUIHermesStudio%E8%83%8C%E5%90%8E%E7%9A%84%E5%93%81%E7%89%8C%E5%8D%87%E7%BA%A7%E4%B8%8E%E4%BA%A7%E5%93%81%E8%BF%9B%E5%8C%96-02.png',
})

const banner = reactive({
  current: 0,
  items: [
    exampleImageUrls.banner,
    exampleImageUrls.postCover1,
  ],
  list: [
    {
      value: exampleImageUrls.banner,
      title: 'UNI HALO v3.0',
      desc: '新全新探索简约的艺术风格',
      time: timeFrom(new Date()),
    },
    {
      value: randomImageUrl.pc,
      title: 'UNI HALO v3.0 使用手册',
      desc: 'uni-halo 使用手册，包含安装、配置、使用等信息666666666aaaa啊啊啊啊啊啊啊啊啊啊啊',
      time: timeFrom(new Date()),
    },
  ],
})

const categories = reactive([
  {
    name: '全栈开发',
    count: 120,
    cover: getRandomUrl(),
  },
  {
    name: 'Docker',
    count: 0,
    cover: getRandomUrl(),
  },
  {
    name: 'Vue技术',
    count: 99,
    cover: getRandomUrl(),
  },
])

const quickList = reactive([
  {
    pagePath: 'pages/moments/moments',
    text: '动态',
    iconType: 'uiLib',
    icon: 'gift',
  },
  {
    pagePath: 'pages-blog/about/about',
    text: '关于',
    iconType: 'uiLib',
    icon: 'image',
  },
  {
    pagePath: 'pages/me/me',
    text: '我的',
    iconType: 'uiLib',
    icon: 'user',
  },
  {
    pagePath: 'pages/category/category',
    text: '分类',
    iconType: 'uiLib',
    icon: 'image',
  },
  {
    pagePath: 'pages/category/category',
    text: '其他',
    iconType: 'uiLib',
    icon: 'image',
  },
])

const { loading, error, data, run } = useRequest<ListedPostVoList, PostV1alpha1PublicApiQueryPostsRequest>(queryPosts, { loadingToast: true, loadingToastContent: '加载中...', loadingToastMask: true })
const { loading: loadingSingle, error: errorSingle, data: dataSingle, run: runSingle } = useRequest<PostVo, PostV1alpha1PublicApiQueryPostByNameRequest>(queryPostByName)

const { list: postList, refresh } = useListData<ListedPostVo>({
  params: {
    page: 1,
    size: 10,
  },
  loading: toRef(loading),
  onPullDownRefresh: async (params, updateData) => {
    await run({ ...params })
    updateData({
      error: error.value,
      hasNext: data.value?.hasNext,
      items: data.value?.items ?? [],
    })
  },
  onReachBottom: async (params, updateData) => {
    await run({ ...params })
    updateData({
      error: error.value,
      hasNext: data.value?.hasNext,
      items: data.value?.items ?? [],
    })
  },
})

onLoad(() => {
  console.log('home onLoad')
  refresh()
  runSingle({ name: '019eb1ca-e37c-7729-97af-e0b658aeef0f' })
})

onPageScroll(({ scrollTop }) => {

})
</script>

<template>
  <view class="min-h-screen bg-page pb-safe">
    <!-- 顶部banner -->
    <view v-if="false" class="relative h-72 w-full">
      <image class="h-72 w-full object-cover" :src="exampleImageUrls.banner" />
      <view class="absolute bottom-4 left-4 flex flex-col gap-y-2">
        <text class="text-xs text-white">welcome to new world</text>
        <text class="text-2xl text-white font-bold">UNI HALO V3.0 </text>
        <text class="text-xs text-white">新全新探索简约的艺术风格</text>
      </view>
    </view>

    <view>
      <wd-swiper
        v-model:current="banner.current" :list="banner.items" indicator-position="right" autoplay
        :height="340"
      >
        <template #default="{ index }">
          <view class="relative h-full w-full">
            <image class="h-full w-full" mode="aspectFill" :src="banner.list[index].value" />
            <!-- 渐变遮罩 from-black/0 via-black/50 to-black/90 bg-gradient-to-b -->
            <view class="absolute bottom-0 left-0 right-0 p-4 pb-16">
              <view class="relative z-20 w-5/6 flex flex-col gap-y-2">
                <text class="text-xs text-white/90">{{ banner.list[index].time }}</text>
                <text class="line-clamp-1 text-xl text-white font-bold">{{ banner.list[index].title }}</text>
                <text class="line-clamp-1 text-xs text-white/95">{{ banner.list[index].desc }}</text>
              </view>
              <view
                class="absolute bottom-0 left-0 right-0 z-10 h-3/5 from-black/0 via-page/50 to-page bg-gradient-to-b"
              />
            </view>
          </view>
        </template>
        <template #indicator="{ current, total }">
          <view class="absolute bottom-16 right-4 text-xs text-white">
            {{ current + 1 }}/{{ total }}
          </view>
        </template>
      </wd-swiper>
    </view>

    <!-- 作者卡片 -->
    <view class="relative z-10 box-border px-4 -mt-12">
      <view class="uh-shadow-xs box-border flex flex-col items-center gap-y-2 rounded-2xl bg-white p-4">
        <view class="w-full flex items-center justify-between gap-x-2">
          <image
            class="uh-shadow-xs h-11 w-11 shrink-0 border-2 border-white rounded-full border-solid"
            src="https://www.xiaoxiaomo.cn/logo.jpg" mode="scaleToFill"
          />
          <view class="h-full flex flex-1 flex-col justify-between gap-y-1">
            <view class="text-sm text-gray-900 font-bold">
              小莫唐尼
            </view>
            <view class="line-clamp-1 text-xs text-gray-500">
              一个爱凑热闹，喜欢捣鼓前端的码农。
            </view>
          </view>
          <view class="h-full shrink-0 rounded-3xl bg-[#1A1A1A] px-4 py-2 text-xs text-white">
            联系我
          </view>
        </view>
        <view class="my-1 h-1px w-full bg-gray-50" />
        <view class="grid grid-cols-5 w-full gap-x-4">
          <view class="flex flex-col items-center justify-center gap-y-0.5">
            <text class="text-sm text-gray-900 font-bold">128</text>
            <text class="text-xs text-gray-600">内容</text>
          </view>
          <view class="flex flex-col items-center justify-center gap-y-0.5">
            <text class="text-sm text-gray-900 font-bold">999</text>
            <text class="text-xs text-gray-600">访客</text>
          </view>
          <view class="flex flex-col items-center justify-center gap-y-0.5">
            <text class="text-sm text-gray-900 font-bold">1.2k</text>
            <text class="text-xs text-gray-600">分类</text>
          </view>
          <view class="flex flex-col items-center justify-center gap-y-0.5">
            <text class="text-sm text-gray-900 font-bold">128k</text>
            <text class="text-xs text-gray-600">评论</text>
          </view>
          <view class="flex flex-col items-center justify-center gap-y-0.5">
            <text class="text-sm text-gray-900 font-bold">10.5k</text>
            <text class="text-xs text-gray-600">点赞</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 金刚区 -->
    <view class="mt-6 px-4">
      <view class="flex items-center justify-around gap-x-4">
        <view
          v-for="item in quickList" :key="item.pagePath"
          class="w-1/5 flex flex-col items-center justify-center gap-y-1"
        >
          <view class="uh-shadow-xs flex items-center justify-center rounded-2xl bg-white p-3.5">
            <wd-icon :name="item.icon" :size="24" />
          </view>
          <text class="text-xs text-gray-800">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 分类推荐（磁贴） -->
    <view class="mt-6 box-border px-4">
      <view class="mb-4 box-border flex items-center justify-between">
        <text class="text-sm text-gray-900 font-bold">热门分类</text>
      </view>
      <view class="box-border h-36 flex items-center gap-2 overflow-hidden">
        <view class="relative box-border h-full flex-1 overflow-hidden border-2 border-white rounded-xl border-solid bg-white">
          <image :src="completeUrl(categories[0].cover)" mode="heightFix" class="h-full w-full rounded-xl" />
          <view class="absolute bottom-0 left-0 right-0 z-10 box-border box-border w-full flex flex-col gap-y-1 from-black/0 via-black/50 to-black/90 bg-gradient-to-b p-2">
            <text class="line-clamp-1 text-xs text-white font-bold">{{ categories[0].name }}</text>
          </view>
          <view class="absolute right-2 top-2 z-10 box-border rounded-md bg-black/20 px-1.5 py-0.5">
            <text class="line-clamp-1 text-[12px] text-white">{{ categories[0].count }}</text>
          </view>
        </view>
        <view class="h-full flex flex-1 flex-col gap-2">
          <view v-for="cate in categories.slice(1)" :key="cate.name" class="relative box-border flex-1 overflow-hidden border-2 border-white rounded-xl border-solid bg-white">
            <image :src="completeUrl(cate.cover)" mode="aspectFill" class="w-full rounded-xl" />
            <view class="absolute bottom-0 left-0 right-0 z-10 box-border box-border w-full flex flex-col gap-y-1 from-black/0 via-black/50 to-black/90 bg-gradient-to-b p-2">
              <text class="line-clamp-1 text-xs text-white font-bold">{{ cate.name }}</text>
            </view>
            <view class="absolute right-2 top-2 z-10 box-border rounded-md bg-black/20 px-1.5 py-0.5">
              <text class="line-clamp-1 text-[12px] text-white">{{ cate.count }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 瞬间推荐 -->

    <!-- 置顶文章 -->
    <view v-if="dataSingle && false" class="mt-4 box-border px-4">
      <view class="mb-2 box-border flex items-center justify-between">
        <text class="text-lg text-gray-900 font-bold">置顶文章</text>
      </view>
      <view class="box-border rounded-xl bg-white p-4">
        <image :src="completeUrl(dataSingle.spec.cover)" mode="aspectFill" class="h-36 w-full rounded-xl" />
        <view class="box-border w-full flex flex-col gap-y-1 pt-2">
          <text class="line-clamp-1 text-sm text-gray-900 font-bold">{{ dataSingle.spec.title }}</text>
          <text class="line-clamp-2 text-xs text-gray-500">{{ dataSingle.status.excerpt }}</text>
        </view>
      </view>
    </view>

    <!-- 最新文章 -->
    <view class="mt-4 mt-4 box-border px-4">
      <view class="mb-4 box-border flex items-center justify-between">
        <text class="text-sm text-gray-900 font-bold">最新文章</text>
      </view>
      <view class="box-border w-full flex flex-col items-center justify-center gap-y-4 overflow-hidden">
        <view v-if="error && postList.length > 0" class="un-shadow-xs w-full rounded-2xl bg-white py-12">
          <wd-empty :icon-size="60" icon="no-result" tip="暂无数据" />
        </view>
        <template v-else>
          <post-card v-for="post in postList" :key="post.metadata.name" :post="post" type="topCover" />
        </template>
      </view>
    </view>

    <!-- 底部导航占位 -->
    <view class="h-60px w-full" />
  </view>
</template>

<style scoped>
.uh-shadow-xs {
  box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.035);
}
</style>
