<!--
 * @Date: 2023-06-21 10:23:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-16 09:24:14
 * @FilePath: /xyxBooking-weapp/src/pages/index/index.vue
 * @Description: 预约页首页
-->
<template>
  <view class="index-page" :class="{ 'is-offline': is_offline }" :style="page_style">
    <view v-if="is_offline" class="offline-banner mx-6 mt-4 rounded-xl px-4 py-3">
      <view class="flex items-center">
        <IconFont name="tips" size="14" />
        <text class="ml-2 font-medium">离线提示</text>
      </view>
      <view class="mt-1 text-sm opacity-80">{{ weak_network_banner_desc }}</view>
    </view>
    <view class="index-content">
      <view style="height: 28vh">
        <swiper
          class="my-swipe"
          :autoplay="true"
          :interval="3000"
          indicator-dots
          indicator-color="white"
          :circular="true"
        >
          <swiper-item>
            <image style="height: 28vh; width: 100vw" :src="banner_url" />
          </swiper-item>
        </swiper>
      </view>

      <view ref="root" class="index-circular">
        <view class="booking-wrapper">
          <view class="booking" @tap="toBooking">
            <view><image :src="icon_1" style="width: 96rpx; height: 96rpx" /></view>
            <view style="color: #fff">开始预约</view>
          </view>
        </view>
      </view>
      <view class="logo" :style="logo_style"></view>
    </view>
    <indexNav
      :icons="nav_icons"
      active="home"
      position="absolute"
      center_variant="raised"
      @select="on_nav_select"
    />
  </view>
</template>

<script setup>
import Taro, { getCurrentInstance, useDidShow, useShareAppMessage } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useGo } from '@/hooks/useGo'
import { get_network_type, is_usable_network } from '@/utils/network'
import { weak_network_text } from '@/utils/uiText'
import indexNav from '@/components/indexNav.vue'

import icon_1 from '@/assets/images/立即预约@2x.png'
import icon_3 from '@/assets/images/首页02@2x.png'
import icon_4 from '@/assets/images/二维码icon.png'
import icon_5 from '@/assets/images/我的01@2x.png'

const go = useGo()
const is_offline = ref(false)
const weak_network_banner_desc = weak_network_text.banner_desc
// 背景图版本号, 用于刷新背景图
const initial_t = Number(getCurrentInstance()?.router?.params?._t)
const bg_version = ref(Number.isFinite(initial_t) ? initial_t : 0)
let is_reloading = false

const reload_page = () => {
  if (is_reloading) {
    return
  }
  is_reloading = true
  Taro.reLaunch({
    url: `/pages/index/index?_t=${Date.now()}`
  })
}

const banner_url = computed(() => {
  return `https://cdn.ipadbiz.cn/xys/booking/banner01.png?imageMogr2/thumbnail/500x/strip/quality/100&v=${bg_version.value}`
})
const normal_bg_url = computed(() => {
  return `https://cdn.ipadbiz.cn/xys/booking/bg.jpg?imageMogr2/thumbnail/200x/strip/quality/50&v=${bg_version.value}`
})
const logo_url = computed(() => {
  return `https://cdn.ipadbiz.cn/xys/booking/logo.png?imageMogr2/thumbnail/50x/strip/quality/50&v=${bg_version.value}`
})

/**
 * 页面样式
 * - 离线状态: 背景颜色 + 背景图片 (包含渐变)
 * - 在线状态: 背景颜色 + 背景图片
 */

const page_style = computed(() => {
  if (is_offline.value) {
    return {
      backgroundColor: '#F3EEE3',
      backgroundImage: `linear-gradient(180deg, rgba(166, 121, 57, 0.10) 0%, rgba(255, 255, 255, 0.90) 60%, rgba(243, 238, 227, 1) 100%), url('${normal_bg_url.value}')`
    }
  }
  return {
    backgroundColor: '#F3EEE3',
    backgroundImage: `url('${normal_bg_url.value}')`
  }
})

const logo_style = computed(() => {
  return {
    backgroundImage: `url('${logo_url.value}')`
  }
})

/**
 * 应用离线状态
 * - 检查当前状态是否需要刷新
 * - 更新 is_offline 状态
 */

const apply_offline_state = next_offline => {
  if (is_offline.value === true && next_offline === false) {
    reload_page()
    return true
  }
  is_offline.value = next_offline
  return false
}

/**
 * 刷新离线状态
 * - 检查当前网络类型是否可用
 */
const refresh_offline_state = async () => {
  try {
    const network_type = await get_network_type()
    const next_offline = !is_usable_network(network_type)
    apply_offline_state(next_offline)
  } catch (e) {
    console.error('refresh_offline_state failed:', e)
  }
}

let has_network_listener = false
let network_listener = null

/**
 * 设置网络状态变更监听器
 * - 监听网络状态变化
 * - 更新 is_offline 状态
 */

const setup_network_listener = () => {
  if (has_network_listener) {
    return
  }
  has_network_listener = true
  network_listener = res => {
    try {
      const is_connected = res?.isConnected !== false
      const network_type = res?.networkType
      if (typeof network_type === 'string' && network_type) {
        // 有网, 检查是否可用
        const next_offline = !(is_connected && is_usable_network(network_type))
        // 检查是否需要刷新
        const is_handled = apply_offline_state(next_offline)
        if (is_handled) {
          return
        }
      }
      // 还没有网, 再次刷新
      refresh_offline_state()
    } catch (e) {
      console.error('network_listener failed:', e)
    }
  }
  Taro.onNetworkStatusChange(network_listener)
}

/**
 * 移除网络状态变更监听器
 * - 移除网络状态变化监听
 */

const teardown_network_listener = () => {
  if (!has_network_listener) {
    return
  }
  has_network_listener = false
  if (network_listener && typeof Taro.offNetworkStatusChange === 'function') {
    try {
      Taro.offNetworkStatusChange(network_listener)
    } catch (e) {
      console.error('offNetworkStatusChange failed:', e)
    }
  }
  network_listener = null
}

useDidShow(() => {
  refresh_offline_state()
})

onMounted(() => {
  setup_network_listener()
})

onUnmounted(() => {
  teardown_network_listener()
})

const toBooking = () => {
  // 跳转到预约须知
  // 如果是离线模式，不跳转
  if (is_offline.value) {
    Taro.showToast({
      title: weak_network_text.offline_mode_no_booking_toast,
      icon: 'none'
    })
    return
  }
  go('/notice')
}

const toCode = () => {
  // 跳转到预约码
  Taro.redirectTo({
    url: '/pages/bookingCode/index'
  })
}

const toMy = () => {
  // 跳转到我的
  Taro.redirectTo({
    url: '/pages/me/index'
  })
}

const nav_icons = { home: icon_3, code: icon_4, me: icon_5 }

const on_nav_select = key => {
  if (key === 'code') {
    return toCode()
  }
  if (key === 'me') {
    return toMy()
  }
}

useShareAppMessage(() => {
  return {
    title: '西园寺预约',
    path: '/pages/index/index'
  }
})
</script>

<style lang="less">
.index-page {
  position: relative;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* 确保背景覆盖 */

  &.is-offline {
    background-color: #f3eee3;
  }

  .offline-banner {
    position: absolute;
    top: 24rpx;
    left: 24rpx;
    right: 24rpx;
    z-index: 10;
    background: rgba(255, 255, 255, 0.88);
    color: #a67939;
    border: 2rpx solid rgba(166, 121, 57, 0.25);
    box-shadow: 0 12rpx 30rpx rgba(166, 121, 57, 0.12);
    backdrop-filter: blur(6px);
  }
  .index-content {
    height: calc(100vh - 134rpx - constant(safe-area-inset-bottom));
    height: calc(100vh - 134rpx - env(safe-area-inset-bottom));
    .index-control {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 130rpx;
      // font-weight: bold;
      font-size: 37rpx;
      .booking {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #a67939;
        border-radius: 14rpx;
        color: #ffffff;
        padding: 22rpx 128rpx;
        border: 2rpx solid #a67939;
      }
      .record {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #a67939;
        border-radius: 14rpx;
        padding: 22rpx 128rpx;
        border: 2rpx solid #a67939;
        margin-top: 48rpx;
      }
      .search {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #a67939;
        border-radius: 14rpx;
        padding: 22rpx 128rpx;
        border: 2rpx solid #a67939;
        margin-top: 48rpx;
      }
    }
    .index-circular {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 130rpx;
      // font-weight: bold;
      font-size: 35rpx;

      .booking-wrapper {
        height: 260rpx;
        width: 260rpx;
        border-radius: 50%;
        background-color: rgba(166, 121, 57, 0.26);
        display: flex;
        align-items: center;
        justify-content: center;
        .booking {
          height: 230rpx;
          width: 230rpx;
          border-radius: 50%;
          background-color: #a67939;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
      }
    }
    .logo {
      position: absolute;
      right: 0;
      bottom: 200rpx;
      height: 400rpx;
      width: 150rpx;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  .my-swipe {
    height: 400rpx;
    swiper-item {
      /* Taro swiper-item 编译后 */
      height: 400rpx;
      width: 750rpx;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}
</style>