<!--
 * @Date: 2024-01-15 11:43:01
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-01-30 13:37:37
 * @FilePath: /xysBooking/src/views/notice.vue
 * @Description: 文件描述
-->
<template>
  <div class="notice-page">
    <div class="content">
      <div style="text-align: center; font-size: 1.1rem; margin-bottom: 0.5rem;">温馨提示</div>
      <p>
        为了您和他人的健康与安全，维护清净庄严的寺院环境，营造一个喜悦而祥和的节日氛围，请您留意并遵守以下注意事项：
      </p>
      <!-- <p>1、进寺后请全程佩戴口罩。</p>
      <p>2、敬香贵在心诚，不在数量多少。请带着虔诚心、恭敬心和清净心敬香礼佛。</p>
      <p>3、请不要自带香烛进寺院点燃，禁止燃放烟花爆竹。</p>
      <p>4、山门殿两侧设有赠香处，凭香花券可免费领取三支清香。</p>
      <p>5、点燃香烛时请小心谨慎，以免灼伤自己与他人。</p>
      <p>6、请爱护公共绿地，请不要在草坪上点烛燃香。</p>
      <p>7、点燃后的香烛请放入指定的地点，禁止将香烛带入天王殿内。</p>
      <p>8、请照看好身边的家人，以免走散或发生意外。</p>
      <p>9、请保管好自己随身携带的钱物，以免丢失给您带来麻烦。</p>
      <p>10、您若有任何问题和困难，请向身边的法师或义工咨询、求助，或直接与客堂联系。电话：0512-65349545.</p>
      <p>11、预约如需退款，请在初七之后，到客堂办理。</p> -->
      <p v-for="(item, index) in note_text" :key="index">{{ item }}</p>
      <p>谢谢您的支持与配合。祝您新春吉祥、万事如意。</p>
    </div>
    <div style="height: 8rem"></div>
    <div class="footer">
      <van-checkbox-group
        v-model="checked"
        shape="square"
        checked-color="#A67939"
        style="margin: 0 0 0.5rem 1.25rem;"
      >
        <van-checkbox name="1" icon-size="1rem"
          ><span style="color: #a67939; font-size: 1rem"
            >我已阅读并同意以上内容</span
          ></van-checkbox
        >
      </van-checkbox-group>
      <div @click="confirmBtn" class="confirm-btn">确认，下一步</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import {
  Cookies,
  axios,
  storeToRefs,
  mainStore,
  Toast,
  useTitle,
} from "@/utils/generatePackage.js";
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { useGo } from "@/hooks/useGo";
import { showSuccessToast, showFailToast, showToast } from "vant";
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

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

const confirmBtn = () => {
  if (checked.value[1] === "1") {
    go("/booking");
  } else {
    showToast("请勾选同意须知");
  }
};
</script>

<style lang="less" scoped>
.notice-page {
  position: relative;
  height: 100vh;
  .content {
    margin: 1rem;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1rem;
    p {
      padding-bottom: 0.8rem;
      line-height: 1.7;
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 8rem;
    display: flex;
    background: #ffffff;
    box-shadow: 0rem -0.33rem 0.25rem 0rem rgba(0, 0, 0, 0.12);
    flex-direction: column;
    justify-content: center;
    .confirm-btn {
      background-color: #a67939;
      color: #ffffff;
      font-size: 1.1rem;
      border-radius: 8px;
      transition: all 0.2s;
      margin: 1rem;
      margin-top: 0.5rem;
      text-align: center;
      padding: 0.8rem 0;
    }
  }
}
</style>