<!--
 * @Date: 2026-02-13
 * @Description: 预约引导弹窗组件
 * @component BookingGuideDialog
 * @example
 * <BookingGuideDialog v-model:show="showDialog" />
-->
<template>
  <van-popup
    v-model:show="visible"
    round
    position="center"
    :style="{ width: '80vw', 'max-width': '320px' }"
    closeable
    @click-close-icon="handleClose"
  >
    <div class="booking-guide-popup">
      <!-- 标题 -->
      <div class="popup-title">预约提示</div>

      <!-- 内容 -->
      <div class="popup-content">
        <p>请前往小程序进行预约</p>
        <p class="highlight">如已在 H5 端完成预约，可在预约记录中查看，并进行核销</p>
      </div>

      <!-- 按钮组 -->
      <div class="popup-footer">
        <van-button
          class="footer-btn cancel-btn"
          @click="handleClose"
        >
          关闭
        </van-button>
        <van-button
          class="footer-btn confirm-btn"
          type="primary"
          color="#A67939"
          @click="goToBookingList"
        >
          预约记录
        </van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
/**
 * 预约引导弹窗组件
 *
 * @description 提示用户前往小程序预约，H5 预约可在预约记录中查看
 * @component BookingGuideDialog
 * @example
 * <BookingGuideDialog v-model:visible="showDialog" />
 */
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  /** 是否显示弹窗 */
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits({
  /** 更新显示状态 */
  'update:modelValue': (value) => typeof value === 'boolean'
})

const router = useRouter()

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

/**
 * 关闭弹窗
 */
const handleClose = () => {
  visible.value = false
}

/**
 * 跳转到预约记录页面
 */
const goToBookingList = () => {
  visible.value = false
  router.push('/bookingList')
}
</script>

<style lang="less" scoped>
.booking-guide-popup {
  padding: 24px 20px 20px;
  text-align: center;

  .popup-title {
    font-size: 18px;
    font-weight: 600;
    color: #1E1E1E;
    margin-bottom: 16px;
  }

  .popup-content {
    line-height: 1.8;
    font-size: 15px;
    color: #595959;
    margin-bottom: 24px;

    p {
      margin: 0 0 12px 0;
    }

    p:last-child {
      margin-bottom: 0;
    }

    .highlight {
      color: #A67939;
      font-weight: 500;
    }
  }

  .popup-footer {
    display: flex;
    gap: 12px;

    .footer-btn {
      flex: 1;
      height: 44px;
      border-radius: 8px;
      font-size: 15px;
      border: none;
    }

    .cancel-btn {
      background-color: #F5F5F5;
      color: #595959;

      &:active {
        background-color: #E6E6E6;
      }
    }

    .confirm-btn {
      background-color: #A67939;
      color: #FFFFFF;

      &:active {
        background-color: #8A6B30;
      }
    }
  }
}
</style>