<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>
<template>
  <view class="home-page">
    <NavBar />
    <image
      class="mx-auto block w-345 h-170 mt-15 rounded-10 overflow-hidden"
      src="@/static/images/home/main-bg.png"
      mode="aspectFill"
    />
    <view class="flex bg-#F5F9FF py-15 rounded-10 m-15 border-2 border-white border-solid">
      <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="handleReward">
        <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="flex bg-white py-8 px-15 rounded-10 m-15 items-center">
      <view class="text-14 text-#333">系统公告</view>
      <view class="flex-1">
        <wd-notice-bar
          color="#999999"
          background-color="transparent"
          :text="announcementList.map((item) => item.name)"
        />
      </view>
    </view>

    <view class="bg-white py-15 px-15 rounded-10 m-15">
      <view class="text-14 text-#333">热点新闻</view>
      <view
        class="flex mt-15"
        v-for="item in newsList"
        :key="item.id"
        @click="handleNewsDetail(item.id)"
      >
        <image class="w-85 h-85 rounded-10" :src="item.image" mode="aspectFill" />
        <view class="ml-15 flex-1 flex flex-col justify-between">
          <view text-14>{{ item.name }}</view>
          <view class="text-12 text-#999">{{ item.source }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import { getIntroductionAPI } from '@/service'
import { showModal } from '@/utils'

defineOptions({
  name: 'Home',
})

const { list: newsList } = useListPageRequest((params) =>
  getIntroductionAPI({ type: 1, ...params }),
)

// 系统公告
const { list: announcementList } = useListPageRequest((params) =>
  getIntroductionAPI({ type: 2, ...params }),
)

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

const handleNewsDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages-sub/news-detail/index?id=${id}`,
  })
}

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

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

const handleReward = () => {
  showModal(
    `1.注册立即送5000股马尔代夫股权；\n
2.每股马尔代夫股权价值500元；\n
3.每邀请一人可以获得20股马尔代夫股权`,
    {
      title: '奖励制度',
      confirmText: '我知道了',
    },
  )
}
</script>

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