<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="home-page">
    <NavBar />
    <wd-swiper
      v-if="bannerList.length"
      class="w-345 bg-#ffffff30 mx-auto mt-15 rounded-10 overflow-hidden"
      height="min(45.333vw, 272px)"
      value-key="swipe_image"
      :list="bannerList"
      autoplay
      @click="handleClick"
    ></wd-swiper>

    <view class="flex bg-white py-15 rounded-10 m-15">
      <view class="flex-1 flex flex-col items-center" @click="handleIntroduction">
        <image class="w-30 h-30" src="@/static/images/home/nav-1.png" mode="aspectFill" />
        <text class="mt-8 text-14 text-#333">简介</text>
      </view>
      <view class="flex-1 flex flex-col items-center" @click="handleInvite">
        <image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
        <text class="mt-8 text-14 text-#333">邀请好友</text>
      </view>
      <view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
        <image class="w-30 h-30" src="@/static/images/home/nav-3.png" mode="aspectFill" />
        <text class="mt-8 text-14 text-#333">官方社群</text>
      </view>
    </view>

    <view class="bg-white py-15 px-15 rounded-10 m-15" v-if="newsList.length">
      <view class="text-14 text-#333">热点新闻</view>
      <view
        class="flex mt-15"
        v-for="(item, index) in newsList"
        :key="item"
        @click="handleNewsDetail(item)"
      >
        <template v-if="index === 0">
          <view>
            <image class="w-323 h-160" :src="item.cover_image" mode="aspectFill" />
            <view class="text-14 text-#000 mt-8">
              {{ item.title }}
            </view>
          </view>
        </template>
        <template v-else>
          <image class="w-85 h-85" :src="item.cover_image" mode="aspectFill" />
          <view class="ml-10 flex-1 flex flex-col justify-between">
            <view text-14>{{ item.title }}</view>
            <view class="text-12 text-#999">{{ item.auther }}</view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import { useListPageRequest } from '@/hooks/useListPageRequest'
import { getBannerListAPI, getNewsListAPI } from '@/service'

defineOptions({
  name: 'Home',
})

const handleIntroduction = () => {
  uni.navigateTo({
    url: '/pages-sub/introduction/index',
  })
}

const handleInvite = () => {
  uni.navigateTo({
    url: '/pages-sub/invite/index',
  })
}

const handleOfficialCommunity = () => {
  uni.navigateTo({
    url: '/pages-sub/official-community/index',
  })
}

const handleClick = (item) => {
  console.log(item)
}

const bannerList = ref<any[]>([])
const { list: newsList } = useListPageRequest(getNewsListAPI)
const handleNewsDetail = (item) => {
  uni.navigateTo({
    url: `/pages-sub/news-detail/index?id=${item.id}`,
  })
}

onLoad(async () => {
  getBannerListAPI().then((res) => {
    bannerList.value = res.data.map((item) => ({
      ...item,
      type: 'image',
    }))
  })
})
</script>

<style>
.home-page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  background-image: url('@/static/images/bg.png');
  background-position: top;
  background-size: cover;
}
</style>
