<!--
 * @Date: 2023-06-21 10:23:09
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-02-05 18:36:21
 * @FilePath: /xysBooking/src/views/index.vue
 * @Description: 预约页首页
-->
<template>
  <view class="index-page">
    <view class="index-content">
      <view style="height: 30vh;">
        <swiper class="my-swipe" :autoplay="true" :interval="3000" indicator-dots indicator-color="white" :circular="true">
          <swiper-item>
            <image style="height: 30vh; width: 100vw;" src="https://cdn.ipadbiz.cn/xys/booking/banner.jpg" mode="aspectFill" />
          </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: 3rem; height: 3rem;" /></view>
            <view style="color: #FFF;">开始预约</view>
          </view>
        </view>
      </view>
      <view class="logo"></view>
    </view>
    <view class="index-nav">
      <view class="nav-logo">
        <image :src="icon_3" style="width: 1.5rem; height: 1.5rem;" />
        首页
      </view>
      <view class="nav-logo" @tap="toCode">
        <image :src="icon_4" style="width: 5rem; height: 5rem; position: absolute; top: -4rem;" />
        <!-- <van-icon size="1.5rem" name="wap-home" color="#FFF" style="opacity: 0;" /> -->
        预约码
      </view>
      <view class="nav-logo" @tap="toMy">
        <image :src="icon_5" style="width: 1.5rem; height: 1.5rem;" />
        我的
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
// import { showSuccessToast, showFailToast } from 'vant'; // NutUI 或 Taro API
import { billListAPI } from '@/api/index';
import { useGo } from '@/hooks/useGo'
import icon_1 from '@/assets/images/立即预约@2x.png'
import icon_2 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'
import icon_6 from '@/assets/images/luru@2x.png'

const go = useGo();

const toBooking = () => { // 跳转到预约须知
  go('/notice');
}
const toRecord = () => { // 跳转到预约记录
  go('/bookingList');
}
const toSearch = () => { // 跳转到寺院录入
  go('/search');
}
const toCode = () => { // 跳转到预约码
  go('/bookingCode');
}
const toMy = () => { // 跳转到我的
  go('/me');
}

useDidShow(async () => {
  // TAG: 触发授权页面 (检查 session 或调用接口触发 401)
  // 小程序中，request.js 拦截器会处理 401 跳转
  await billListAPI({ page: 1, row_num: 1 });
});

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

</script>

<style lang="less">
.index-page {
  position: relative;
  height: 100vh;
  background-image: url('https://cdn.ipadbiz.cn/xys/booking/bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* 确保背景覆盖 */
  .index-content {
    height: 90vh;
    .index-control {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 10vh;
      // font-weight: bold;
      font-size: 1.15rem;
      .booking {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #A67939;
        border-radius: 7px;
        color: #FFFFFF;
        padding: 0.7rem 4rem;
        border: 1px solid #A67939;
      }
      .record {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #A67939;
        border-radius: 7px;
        padding: 0.7rem 4rem;
        border: 1px solid #A67939;
        margin-top: 1.5rem;
      }
      .search {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #A67939;
        border-radius: 7px;
        padding: 0.7rem 4rem;
        border: 1px solid #A67939;
        margin-top: 1.5rem;
      }
    }
    .index-circular {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10vh;
      // font-weight: bold;
      font-size: 1.1rem;

      .booking-wrapper {
        height: 19vh;
        width: 19vh;
        border-radius: 50%;
        background-color: rgba(166, 121, 57, 0.26);
        display: flex;
        align-items: center;
        justify-content: center;
        .booking {
          height: 17vh;
          width: 17vh;
          border-radius: 50%;
          background-color: #A67939;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }
      }
    }
    .logo {
      position: absolute;
      right: 0;
      bottom: calc(15vh);
      height: 30vh;
      width: 20vw;
      background-image: url('https://cdn.ipadbiz.cn/xys/booking/logo.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
  .my-swipe {
    height: 30vh;
    swiper-item { /* Taro swiper-item 编译后 */
      height: 30vh;
      width: 100vw;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
  .index-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 10vh;
    background: #FFFFFF;
    box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #A67939;
    .nav-logo {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>