<!--
 * @Date: 2024-01-15 11:43:01
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2026-01-08 20:16:02
 * @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 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'

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

/**
 * @description 点击确认进入下一步
 * - 必须勾选“我已阅读并同意”
 * @returns {void} 无返回值
 */
const confirmBtn = () => {
  if (checked.value.includes('1')) {
    go('/booking')
  } else {
    Taro.showToast({ title: '请勾选同意须知', icon: 'none' })
  }
}
</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;
  }
  .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>