<script lang="ts" setup>
import { getCountdown, getFirstPageInfo, getMyScore, getTopNew } from '@/service'
import { useTokenStore } from '@/store'
import { systemInfo } from '@/utils/systemInfo'
import { useChannelLive } from './hooks/useChannelLive'

defineOptions({
  name: 'Home',
})

// #ifdef MP-WEIXIN
definePage({
  type: 'home',
  style: {
    navigationStyle: 'custom',
  },
})
// #endif

// #ifndef MP-WEIXIN
definePage({
  type: 'home',
  style: {
    navigationStyle: 'custom',
    transparentTitle: 'always',
    navigationBarTitleText: '',
  },
})
// #endif

const tokenStore = useTokenStore()
const wechatVideoId = import.meta.env.VITE_WX_VIDEO_ID || ''
const { channelVideoList, getChannelLiveNoticeInfo, handleChannelVideoAction,goToLiveHomePage } = useChannelLive(wechatVideoId)

onShareAppMessage(() => {
  return {
    title: '六纬中考通',
    path: '/pages/index/index',
    imageUrl: 'https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/qt/qt_fenxiang.png',
  }
})
onShareTimeline(() => {
  return {
    title: '六纬中考通',
  }
})

const subMenus = [
  { name: '历年分数', imgPath: 'https://lwzk.ycymedu.com/img/home/sy_fenshu.png', url: '/pages-sub/information/overTheYear' },
  { name: '高中汇总', imgPath: 'https://lwzk.ycymedu.com/img/home/sy_daoxiao.png', url: '/pages-sub/information/highSchool' },
  { name: '批次线', imgPath: 'https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/sy_picixian.png', url: '/pages-sub/information/batchline' },
  { name: '位次查询', imgPath: 'https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/syweici.png', url: '/pages-sub/information/rank' },
]

const notifies = ref<any[]>([])

const opacity = ref(0)
const totalScore = ref('0')
const schoolCount = ref('0')
const wishlistCount = ref('0')

function navigateToCreateWish() {
  uni.navigateTo({ url: '/pages-sub/wishlist/create/first' })
}

onPageScroll((e) => {
  const scrollTop = e.scrollTop
  opacity.value = Math.min(scrollTop / 100, 1)
})

function navigateToCountdownPage() {
  uni.navigateTo({ url: '/pages-sub/countdown/index' })
}

function navigateToSubPage(url: string) {
  uni.navigateTo({ url })
}

function navigateToCustom() {
  uni.navigateTo({ url: '/pages-sub/about/onlineCustom' })
}

function navigateToNewsPage() {
  uni.navigateTo({
    url: '/pages-sub/information/middleSchool',
  })
}

function navigateToNewsDetail(id: number) {
  uni.navigateTo({ url: `/pages-sub/information/middleDetail?id=${id}` })
}

const countdown = ref(0)

onLoad(() => {
  const updateManager = uni.getUpdateManager()
  updateManager.onCheckForUpdate((res) => {
    // 请求完新版本信息的回调
    if (res.hasUpdate) {
      uni.showToast({
        title: '更新提示',
        content: '新版本已经准备好，将进行更新',
      })
    }
  })

  updateManager.onUpdateReady(() => {
    uni.showModal({
      title: '更新提示',
      content: '新版本已经准备好，是否重启应用？',
      success(res) {
        if (res.confirm) {
          // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
          updateManager.applyUpdate()
        }
      },
    })
  })

  updateManager.onUpdateFailed(() => {
    // 新版本下载失败
    uni.showToast({
      title: '更新失败',
      icon: 'none',
    })
  })
})

onShow(() => {
  getTopNew({ query: { Top: 3 } }).then((resp) => {
    if (resp.code === 200) {
      notifies.value = resp.result
    }
  })

  if (tokenStore.hasLogin) {
    getMyScore().then((resp) => {
      if (resp.code === 200 && resp.result) {
        totalScore.value = resp.result.totalScore
      }
    })
    getFirstPageInfo().then((resp) => {
      if (resp.code === 200) {
        schoolCount.value = resp.result.schoolCount
        wishlistCount.value = resp.result.zyCount
      }
    })
  }
  getCountdown().then((resp) => {
    if (resp.code === 200) {
      countdown.value = resp.result
    }
  })

  getChannelLiveNoticeInfo()
})
</script>

<template>
  <view class="custom-background flex flex-col">
    <sar-navbar
      :fixed="true" fixation-style="top:unset;"
      :root-style="{ '--sar-navbar-bg': `rgba(255, 255, 255, ${opacity})`, '--sar-navbar-height': `${systemInfo?.statusBarHeight + 44}px` }"
    >
      <template #left>
        <view
          class="ml-[32rpx] flex items-center justify-center text-[32rpx] text-[#333]"
          :style="{ 'padding-top': `${systemInfo?.statusBarHeight}px` }"
        >
          济南
        </view>
      </template>
      <template #title>
        <view :style="{ 'padding-top': `${systemInfo?.statusBarHeight}px` }" class="flex justify-center">
          <view class="h-[32rpx] w-[226rpx] flex justify-center">
            <image
              class="h-[32rpx] w-[226rpx]" src="https://lwzk.ycymedu.com/img/home/sy_logo.png"
              mode="aspectFit"
            />
          </view>
        </view>
      </template>
    </sar-navbar>
    <scroll-view scroll-y class="flex-1">
      <view class="mx-[40rpx] mt-[20rpx] min-h-[460rpx] overflow-hidden rounded-[32rpx] bg-[#3D72FD] font-[DinBold]">
        <view
          v-if="countdown > 0"
          class="flex items-baseline justify-center rounded-[32rpx] bg-[#4c7bfc] py-[18rpx] text-[36rpx] text-white font-[JinBuFont]" @click="navigateToCountdownPage"
        >
          距离中考还有&nbsp;<text class="text-[52rpx] text-white">{{ countdown }}</text>&nbsp;天
          <view class="ml-[10rpx] h-[24rpx] w-[14rpx]">
            <image
              src="https://lwzk.ycymedu.com/img/home/sy_gengduo.png" mode="scaleToFill"
              class="h-[24rpx] w-[14rpx]"
            />
          </view>
        </view>
        <view
          v-else
          class="flex items-baseline justify-center rounded-[32rpx] bg-[#4c7bfc] py-[18rpx] text-[36rpx] text-white font-[JinBuFont]"
        >
          正在考试
        </view>
        <view class="mt-[48rpx] flex items-center justify-between pl-[46rpx] pr-[64rpx]">
          <view class="flex flex-col items-center gap-[8rpx] text-white">
            <view class="flex items-center">
              <text class="text-[68rpx] font-700">{{ totalScore }}</text>
              <view class="ml-[4rpx] h-[30rpx] w-[30rpx]">
                <image
                  class="h-[30rpx] w-[30rpx]"
                  src="https://lwzk.ycymedu.com/img/home/sy_bianji.png" mode="scaleToFill"
                />
              </view>
            </view>
            <view class="text-[30rpx] text-[#b0c6ff]">
              预估成绩
            </view>
          </view>

          <view class="flex flex-col items-center gap-[8rpx] text-white">
            <view class="flex items-baseline">
              <text class="text-[68rpx] font-700">{{ schoolCount }}</text>
              <view class="ml-[4rpx] text-[32rpx]">
                所
              </view>
            </view>
            <view class="text-[30rpx] text-[#b0c6ff]">
              适合普高
            </view>
          </view>

          <view class="flex flex-col items-center gap-[8rpx] text-white">
            <view class="flex items-baseline">
              <text class="text-[68rpx] font-700">{{ wishlistCount }}</text>
              <view class="ml-[4rpx] text-[32rpx]">
                份
              </view>
            </view>
            <view class="text-[30rpx] text-[#b0c6ff]">
              志愿表
            </view>
          </view>
        </view>

        <view
          class="mx-[74rpx] my-[48rpx] flex items-center justify-center rounded-[52rpx] from-[#FCFDFF] to-[#B8D3FF] bg-gradient-to-b py-[28rpx] shadow-[0_8px_20px_-6px_rgba(38,129,255,0.39)]"
          @click="navigateToCreateWish"
        >
          <view class="h-[40rpx] w-[40rpx]">
            <image
              class="h-[40rpx] w-[40rpx]"
              src="https://lwzk.ycymedu.com/img/home/sy_chuangjian.png" mode="scaleToFill"
            />
          </view>
          <view class="ml-[8rpx] text-[40rpx] text-[#3D72FD] font-600">
            创建志愿表
          </view>
        </view>
      </view>

      <!-- 咨询 -->
      <view class="grid grid-cols-2 mx-[32rpx] mt-[60rpx] gap-[24rpx]">
        <view
          v-for="(item, index) in subMenus"
          :key="index" class="flex items-center justify-between rounded-[24rpx] bg-[#F3F4F8] py-[20rpx] pl-[30rpx] pr-[24rpx]" @click="navigateToSubPage(item.url)"
        >
          <text class="text-[34rpx] text-[#333] font-600">{{ item.name }}</text>
          <view class="h-[108rpx] w-[108rpx]">
            <image :src="item.imgPath" mode="scaleToFill" class="h-[108rpx] w-[108rpx]" />
          </view>
        </view>
      </view>

      <view class="mx-[30rpx] mt-[60rpx]">
        <view class="mb-[20rpx] flex items-center">
          <view class="mr-[12rpx] h-[48rpx] w-[48rpx]">
            <image
              src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/sy_zhibo.gif" mode="scaleToFill"
              class="h-[48rpx] w-[48rpx]"
            />
          </view>
          <text class="text-[40rpx] text-black font-600">最新直播</text>
        </view>

        <scroll-view scroll-x class="w-full">
          <view class="w-full flex gap-[30rpx] whitespace-nowrap" v-if="channelVideoList.length > 0">
            <view
              v-for="item in channelVideoList"
              :key="item.id"
              class="h-[430rpx] min-h-[430rpx] min-w-[440rpx] w-[440rpx] rounded-[18rpx] bg-[#F3F4F8]"
            >
              <view class="relative h-[280rpx] rounded-[18rpx]">
                <image
                  :src="item.coverUrl"
                  mode="aspectFit"
                  class="h-full w-full"
                />
                <view v-if="item.type === 'live'" class="absolute bottom-0 h-[48rpx] w-full flex items-center justify-between rounded-[0_0_18rpx_18rpx] bg-black bg-opacity-50">
                  <view class="ml-[20rpx] flex items-center">
                    <view class="mr-[8rpx] h-[12rpx] w-[12rpx] rounded-full bg-white" />
                    <view class="text-[24rpx] text-white">
                      {{ item.statusText }}
                    </view>
                  </view>

                  <view v-if="item.nickname" class="mr-[20rpx] flex items-center">
                    <view class="mr-[10rpx] h-[20rpx] w-[30rpx] flex items-center">
                      <image
                        src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/sy_liulan.png"
                        mode="widthFix"
                      />
                    </view>
                    <view class="text-[24rpx] text-white">
                      {{ item.nickname }}
                    </view>
                  </view>
                </view>

                <view v-else class="absolute bottom-0 h-[48rpx] w-full flex items-center justify-between rounded-[0_0_18rpx_18rpx] bg-black bg-opacity-50">
                  <view class="ml-[20rpx] text-[24rpx] text-white">
                    {{ item.startTimeText }}
                  </view>
                </view>
              </view>

              <view class="mx-[20rpx] mt-[20rpx] text-[34rpx] text-[#333] font-500 overflow-hidden text-ellipsis whitespace-nowrap">
                {{ item.title }}
              </view>

              <view
                class="ml-[20rpx] mt-[10rpx] h-[52rpx] w-[148rpx] flex items-center justify-center rounded-[376rpx] text-[26rpx]"
                :class="item.type === 'live' ? 'text-white bg-[#3D72FD] border-solid border-[2rpx] border-[#3D72FD]' : 'bg-[#E0E6F8] text-[#3D72FD]'"
                @click="handleChannelVideoAction(item)"
              >
                {{ item.buttonText }}
              </view>
            </view>
          </view>
          <view class="w-full flex flex-col items-center justify-center" @click="goToLiveHomePage()" v-if="channelVideoList.length === 0">
            <view class="w-full h-[236rpx]">
              <image
                src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/home/home_zhibo.png"
                mode="scaleToFill"
              />
            </view>
          </view>
        </scroll-view>
      </view>

      <view class="mx-[30rpx] mt-[60rpx]">
        <view class="mb-[30rpx] flex items-center">
          <view class="mr-[12rpx] h-[48rpx] w-[48rpx]">
            <image
              src="https://lwzk.ycymedu.com/img/home/sy_zixuntun.png" mode="scaleToFill"
              class="h-[48rpx] w-[48rpx]"
            />
          </view>
          <text class="text-[40rpx] text-black font-600">最新资讯</text>

          <view class="ml-auto text-[30rpx] text-[#A6A6A6]" @click="navigateToNewsPage">
            更多
          </view>
          <view class="h-[30rpx] w-[14rpx] flex items-center">
            <image
              class="h-[30rpx] w-[14rpx]"
              src="https://lwzk.ycymedu.com/img/home/sy_zixunjiantou.png" mode="scaleToFill"
            />
          </view>
        </view>

        <view
          v-for="(value, index) in notifies"
          :key="index" class="mb-[28rpx] flex flex-col border-b-1 border-[#eee] border-b-solid pb-[22rpx]" @click="navigateToNewsDetail(value.id)"
        >
          <text class="text-[32rpx] text-[#333] font-400">{{ value.title }}</text>
          <view class="mt-[20rpx] flex items-center justify-between text-[#999]">
            <view class="flex items-center">
              <view class="mr-[10rpx] h-[28rpx] w-[28rpx] flex items-center">
                <image
                  src="https://lwzk.ycymedu.com/img/home/sy_shijian.png" mode="scaleToFill"
                  class="h-[28rpx] w-[28rpx]"
                />
              </view>
              <text class="text-[26rpx]">{{ value.pubtime }}</text>
            </view>
            <view class="flex items-center">
              <view class="mr-[10rpx] h-[28rpx] w-[28rpx] flex items-center">
                <image
                  src="https://lwzk.ycymedu.com/img/home/sy_chakan.png" mode="scaleToFill"
                  class="h-[28rpx] w-[28rpx]"
                />
              </view>
              <text class="text-[26rpx]">{{ value.viewcount }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="fixed bottom-[200rpx] right-[60rpx]" @click="navigateToCustom">
        <view class="h-[160rpx] w-[160rpx]">
          <image
            class="h-[160rpx] w-[160rpx]" src="https://lwzk.ycymedu.com/img/home/sy_kefu.png"
            mode="scaleToFill"
          />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped>
.custom-background {
  background: linear-gradient(180deg, #c7e0ff 0%, rgba(199, 224, 255, 0) 530rpx);
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
}
</style>
