<script lang="ts" setup>
import { ref, onMounted } from 'vue'

definePage({
  style: { navigationBarTitleText: '访问告知书' },
})

const countdown = ref(5)
const canClick = ref(false)
let timer: ReturnType<typeof setInterval> | null = null

onMounted(() => {
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      canClick.value = true
      if (timer) clearInterval(timer)
    }
  }, 1000)
})

function goCreate() {
  if (!canClick.value) return
  uni.redirectTo({ url: '/subpackages/appointment/appointment-form' })
}
</script>

<template>
  <view class="notice-page h-screen bg-[#f5f7fa] flex flex-col">
    <!-- 可滚动内容区 -->
    <view class="flex-1 overflow-auto px-4 pt-4 pb-3">
      <view class="card rounded-xl bg-white p-5 text-sm leading-relaxed text-[#333]">
        <text class="block text-center text-base font-bold mb-4">访客告知书</text>

        <text class="block font-bold mb-3">访客须知</text>

        <text class="block mb-2">
          一、访客须携带有效身份证件、办理相关手续后进入园区并在限定区域内活动。
        </text>
        <text class="block mb-2">
          二、未经许可，园区内禁止拍照、录音、录像。
        </text>
        <text class="block mb-2">
          三、禁止携带非国产品牌手机进入园区。
        </text>
        <text class="block mb-2">
          四、严禁携带管制刀具、易燃、易爆、毒害性和放射性物品进入厂区。
        </text>
        <text class="block mb-2">
          五、园区内车辆时速不得超过30公里，并按工作人员要求停放。
        </text>
        <text class="block mb-2">
          六、保守国家秘密是我国公民基本义务，违反法律法规将承担相应责任。
        </text>
      </view>
    </view>

    <!-- 底部固定按钮 -->
    <view class="shrink-0 px-4 py-3 bg-white shadow-[0_-2px_8px_rgba(0,0,0,0.06)]">
      <wd-button
        type="primary"
        size="large"
        block
        round
        :disabled="!canClick"
        :loading="!canClick"
        @click="goCreate"
      >
        {{ canClick ? '本人已仔细阅读并同意上述条款' : `请仔细阅读（${countdown}s）` }}
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.notice-page {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
</style>
