<!--
 * @Date: 2024-01-15 11:43:01
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-02-04 13:10:03
 * @FilePath: /xyxBooking-weapp/src/pages/notice/index.vue
 * @Description: 参访须知确认页
-->
<template>
  <view class="notice-page">
    <view class="content">
      <view style="text-align: center; font-size: 35rpx; margin-bottom: 16rpx">温馨提示</view>
      <view>
        为了您和他人的健康与安全，维护清净庄严的寺院环境，营造一个喜悦而祥和的节日氛围，请您留意并遵守以下注意事项：
      </view>
      <view v-for="(item, index) in note_text" :key="index" style="margin-top: 16rpx">{{
        item
      }}</view>
      <view style="margin-top: 16rpx">谢谢您的支持与配合。祝您新春吉祥、万事如意。</view>
    </view>
    <view class="route-image-container">
      <image
        class="route-image"
        src="https://cdn.ipadbiz.cn/route.jpg"
        mode="widthFix"
        @tap="handlePreviewImage"
      />
    </view>
    <view class="route-notice">如有变化，以现场规定为准，谢谢配合！</view>
    <view style="height: 256rpx"></view>
    <view class="footer">
      <nut-checkbox-group v-model="checked">
        <nut-checkbox label="1" icon-size="32rpx">
          <text style="color: #a67939; font-size: 32rpx">我已阅读并同意以上内容</text>
        </nut-checkbox>
      </nut-checkbox-group>
      <view @tap="confirmBtn" class="confirm-btn">确认，下一步</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import { showInfo } from '@/utils/toast'

const go = useGo()
const note_text = [
  '1、敬香贵在心诚，不在数量多少。三支清香，可表心诚。请带着虔诚心、恭敬心和清净心敬香礼佛。',
  '2、请不要自带香烛进寺院。山门殿两侧设有赠香处，凭香花券可免费领取三支清香。',
  '3、点燃香烛时请多加小心，以免灼伤自己与他人。',
  '4、请在指定燃香处燃香，禁止将香烛带入殿堂。禁止燃放烟花爆竹。',
  '5、请爱护公共绿地，请不要踩踏及在草坪上点烛燃香。',
  '6、请照看好身边的家人，以免走散。',
  '7、请保管好自己随身携带的钱物，以免丢失给您带来麻烦。',
  '8、您若有任何问题和困难，请向身边的法师或义工咨询、求助，或直接与客堂联系。电话:0512-65349545。',
  '9、预约如需退款，请在“我的-预约记录”中，找到要取消的预约记录，点击>，进行自助取消操作完成退票。在预约日期当日24:00前自助退票，票款原路退回；当日24:00后，如未核销预约码，小程序将自动取消预约，票款原路退回。'
]
const checked = ref([])

/**
 * @description 预览路线图
 * - 点击图片后全屏预览
 * - 支持缩放和保存功能
 * @returns {void} 无返回值
 */
const handlePreviewImage = () => {
  Taro.previewImage({
    current: 'https://cdn.ipadbiz.cn/route.jpg', // 当前显示图片的 http 链接
    urls: ['https://cdn.ipadbiz.cn/route.jpg'] // 需要预览的图片 http 链接列表
  })
}

/**
 * @description 点击确认进入下一步
 * - 必须勾选"我已阅读并同意"
 * @returns {void} 无返回值
 */
const confirmBtn = () => {
  if (checked.value.includes('1')) {
    go('/booking')
  } else {
    showInfo('请勾选同意须知')
  }
}
</script>

<style lang="less">
.notice-page {
  position: relative;
  min-height: 100vh;
  background-color: #f6f6f6;
  padding-top: 2rpx; // 防止 margin collapse
  .content {
    margin: 32rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    color: #333;
    font-size: 29rpx;
    line-height: 1.5;
  }
  .route-image-container {
    display: flex;
    justify-content: center;
    margin: 0 32rpx 32rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    .route-image {
      width: 100%;
      border-radius: 8rpx;
      cursor: pointer;
      transition: opacity 0.3s;
      &:active {
        opacity: 0.8;
      }
    }
  }
  .route-notice {
    margin: 0 32rpx 32rpx;
    padding: 24rpx 32rpx;
    background-color: #fff9e6;
    border-radius: 16rpx;
    text-align: center;
    color: #a67939;
    font-size: 28rpx;
    border: 2rpx solid #ffe7ba;
  }
  .footer {
    position: fixed;
    bottom: 0;
    width: 750rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    box-sizing: border-box;
    box-shadow: 0 -10rpx 8rpx 0 rgba(0, 0, 0, 0.12);

    .confirm-btn {
      background-color: #a67939;
      color: #fff;
      text-align: center;
      padding: 26rpx 0;
      border-radius: 16rpx;
      margin-top: 32rpx;
      font-size: 35rpx;
    }
  }
}
</style>