<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'tabbar',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>

<script lang="ts" setup>
import Card from '@/components/card.vue'
import HotActivity from '@/components/hot-activity.vue'
import MomentItem from '@/components/moment-item.vue'
import HomeBanner from './components/home-banner.vue'
import useRequest from '../../hooks/useRequest'
import Menus from './components/menus.vue'
import {
  getActivities,
  getCircles,
  getMyStudyTours,
  getSetIndexConfigs,
  getStudyTours,
  shareCircle,
} from '../../core/libs/requests'
import { logo } from '../../core/libs/svgs'
import PageHelper from '@/components/page-helper.vue'
import { ComponentExposed } from 'vue-component-type-helpers'
import { usePermissions } from '../../composables/permissions'
import { storeToRefs } from 'pinia'
import { messages } from '../../core/libs/messages'
import { handleUpvoteClick, handleShareClick } from '../../core/libs/actions'
import { useUserStore } from '../../store'
import ScheduleCard from './components/schedule-card.vue'
import TiltedButton from '@/components/tilted-button.vue'
import ButtonEvo from '@/components/button-evo.vue'
import ImgBtnEvo from '@/components/img-btn-evo.vue'
import SectionHeading from '@/components/section-heading.vue'
import dayjs from 'dayjs'
import { sort } from 'radash'
import { Activity, StudyTour } from '../../core/libs/models'

defineOptions({
  name: 'Home',
})
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { features } = usePermissions()
const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
const { data: indexConfigsData, run: setIndexConfigsData } = useRequest(
  () => getSetIndexConfigs(),
  { initialData: { list: [] } },
)
const { data: studyTours, run: setStudyTours } = useRequest(() => getMyStudyTours(), {
  initialData: [],
})
// const {} = useRequest(() =>)
const swiperData = ref<{ data: any }[]>()
const swiperCurrent = ref(0)
const hotActivities =
  ref<{ type: 'studyTour' | 'activity'; data: StudyTour & Activity; startAt: string | number }[]>()
const currentStudyTour = computed(() =>
  studyTours.value.find(
    (it) => dayjs(it.studyStartTime).isBefore(dayjs()) && dayjs(it.studyEndTime).isAfter(dayjs()),
  ),
)

const toAbout = () => {
  uni.navigateTo({ url: '/pages/home/about/index' })
}
const handleSwiperChange = ({ detail: { current } }) => {
  swiperCurrent.value = current
}
const handleLike = async (options) => {
  await handleUpvoteClick({
    ...options,
    userId: userInfo.value.userId,
    userName: userInfo.value.nickname,
  })
  pageHelperRef.value?.refresh()
}
const setHotActivities = async () => {
  const res = await Promise.all([
    getStudyTours({ headRecommend: 1 }).then((res) =>
      res.data.list.map((it) => ({ type: 'studyTour', data: it, startAt: it.applyStartTime })),
    ),
    getActivities({ headRecommend: 1 }).then((res) =>
      res.data.list.map((it) => ({ type: 'activity', data: it, startAt: it.applyStartTime })),
    ),
  ])
  console.log(sort(res.flat(), (it) => it.startAt))
  hotActivities.value = sort(res.flat(), (it) => it.startAt) as any
}
onShow(async () => {
  pageHelperRef.value?.refresh()
  // await setStudyTours()
  // setStudyTours()
})
onLoad(async () => {
  await Promise.all([setIndexConfigsData(), setStudyTours(), setHotActivities()])
  // await setIndexConfigsData()
  // await setStudyTours()
  swiperData.value = indexConfigsData.value.list.map((it) => ({
    data: it,
  }))
})
onShareAppMessage(async ({ from, target }) => {
  console.log('from', from)
  console.log('target', target)
  const res: Page.CustomShareContent = {}
  if (from === 'button') {
    if (!features.value.shareMoment) {
      return handleShareClick()
    }
    console.log('分享')
    await shareCircle(target.dataset.options.id)
    res.path = `/pages/home/moment/index?id=${target.dataset.options.id}&isShared=true`
    res.imageUrl = target.dataset.options.bannerUrls[0]
    res.title = `${target.dataset.options.stylistName}: ${target.dataset.options.circleDesc}`
  }
  if (from === 'menu') {
    res.title = messages.home.shareTitle
  }
  return res
})
</script>

<template>
  <view class="">
    <view class="bg-black w-full relative aspect-[1.26/1]">
      <swiper @change="handleSwiperChange">
        <template
          v-for="{ data: { id, coverVideoImage, indexPromotionalVideoImage } } of swiperData"
          :key="id"
        >
          <swiper-item>
            <HomeBanner :id="id" :url="indexPromotionalVideoImage" :cover="coverVideoImage" />
            <!-- <div class="w-full h-full relative">
              <video
                class="w-full h-full"
                :id="`video-${id}`"
                :src="indexPromotionalVideoImage"
              ></video>
              <div v-if="!playing" class="absolute left-0 top-0 w-full h-full bg-black">
                <wd-img width="100%" height="100%" :src="coverVideoImage" />
              </div>
              <div
                v-if="!playing"
                class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
              >
                <view class="mx-7">
                  <wd-button
                    plain
                    custom-class="bg-transparent! border-white! text-white!"
                    icon="play"
                    @click="handlePlay"
                  >
                    02:30
                  </wd-button>
                </view>
              </div>
            </div> -->
          </swiper-item>
        </template>
      </swiper>
    </view>
    <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
      <template v-if="currentStudyTour">
        <ScheduleCard
          custom-class="my-6 mx-3.5"
          :items="currentStudyTour.studyTravelDOList"
        ></ScheduleCard>
      </template>
      <SectionHeading title="按钮调试"></SectionHeading>
      <div class="flex">
        <TiltedButton size="large" custom-class="w-30"></TiltedButton>
        <ButtonEvo>神奇按钮</ButtonEvo>
        <ImgBtnEvo></ImgBtnEvo>
      </div>
      <!-- <div class="flex flex-col gap-1">
        <button>咲</button>
        <ButtonEvo custom-class="w-auto!">咲</ButtonEvo>
        <ButtonEvo custom-class="">遥星</ButtonEvo>
        <ButtonEvo custom-class="">血不染</ButtonEvo>
        <ButtonEvo custom-class="">天地不容</ButtonEvo>
        <ButtonEvo custom-class="">飒沓如流星</ButtonEvo>
        <ButtonEvo custom-class="">君有才能纵捭阖</ButtonEvo>
        <div class="w-full">
          <ButtonEvo custom-class="" block>诗仙纵横，刀剑茫茫去不还</ButtonEvo>
        </div>
        <ButtonEvo color="red" size="lg">敌无命</ButtonEvo>
      </div> -->
      <menus></menus>
      <view class="my-6 mx-3.5">
        <HotActivity :items="hotActivities"></HotActivity>
      </view>
      <view v-if="features.about" class="my-6 mx-3.5" @click="toAbout()">
        <Card>
          <div class="flex items-center gap-2">
            <wd-img width="28" height="28" :src="logo"></wd-img>
            <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]">
              1分钟快速了解筑巢荟
            </div>
            <div class="flex-1"></div>
            <wd-icon name="help-circle" size="22px" custom-class="text-black/60"></wd-icon>
          </div>
        </Card>
      </view>
      <view class="mx-3.5 text-5 font-400">设计圈</view>
      <view class="mx-3.5">
        <PageHelper ref="pageHelperRef" :request="getCircles" :query="{}">
          <template #default="{ source }">
            <template v-for="it of source.list" :key="it.id">
              <view class="my-6">
                <MomentItem :options="it" @like="handleLike"></MomentItem>
              </view>
            </template>
          </template>
        </PageHelper>
      </view>
    </view>
  </view>
</template>

<style></style>
