﻿<template>
  <view class="page-index">
    <view class="nav-bar">
      <view class="nav-left">
        <text class="nav-logo">🍸</text>
        <text class="nav-brand">纯瘾大</text>
      </view>
      <view class="nav-right">
        <text class="my-btn" @tap="goMyOrders">我的</text>
      </view>
    </view>

    <view class="landing-bg">
      <view class="landing-decor" style="top:10%;left:8%">🍺</view>
      <view class="landing-decor" style="top:8%;right:10%">🍸</view>
      <view class="landing-decor" style="top:55%;left:5%;font-size:56rpx">🍋</view>
      <view class="landing-decor" style="top:48%;right:8%">🥃</view>
      <view class="landing-decor" style="bottom:25%;left:14%;font-size:48rpx">🧊</view>

      <text class="landing-logo">🍸</text>
      <text class="landing-title">纯瘾大</text>
      <text class="landing-sub">唤醒你的专属调酒师</text>
      <button class="btn-primary" @tap="showModal = true">🎫 领取号码牌</button>
    </view>

    <!-- 员工入口 -->
    <view class="staff-link">
      <text @tap="goStaffLogin">🔐 员工入口</text>
    </view>

    <!-- 号码牌弹窗 (点击按钮才显示) -->
    <view class="modal-mask" :class="{ show: showModal }" @tap="onMaskTap">
      <view class="card-modal" @tap.stop>
        <!-- 初始状态 -->
        <view v-if="!generated" class="modal-header">
          <text class="modal-icon">🎫</text>
          <text class="modal-title">领取你的号码牌</text>
          <text class="modal-desc">一个号码开启今晚的微醺之旅</text>
        </view>
        <!-- 已生成状态 -->
        <view v-else class="card-generated">
          <text class="modal-title">🎉 这是你的专属号码</text>
          <view class="card-number-big">
            <text>{{ cardNo }}</text>
          </view>
          <text class="card-remember">⚠️ 请记住！点任意位置跳过</text>
        </view>
        <!-- 输入区域 -->
        <view v-if="!generated" class="modal-body">
          <view class="card-input-group">
            <input class="card-input" v-model="inputNo" placeholder="输入号码" maxlength="4" />
            <button class="card-confirm-btn" @tap="onCheck">确认</button>
          </view>
          <view class="card-divider">
            <text>或</text>
          </view>
        </view>
        <view v-if="!generated" class="modal-footer">
          <button class="btn-primary" @tap="onGenerate">🎫 领取新号码牌</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'
import { post, get } from '@/utils/request'
import { API } from '@/utils/constants'
import { useCardStore } from '@/stores/card'

export default {
  setup() {
    const card = useCardStore()
    const showModal = ref(false)
    const generated = ref(false)
    const inputNo = ref('')
    const cardNo = ref('')
    let navTimer = null

    function goMenu() {
      showModal.value = false
      generated.value = false
      uni.navigateTo({ url: '/pages/menu/menu' })
    }

    async function onGenerate() {
      try {
        const res = await post(API.CARD_GENERATE)
        cardNo.value = res.cardNo
        card.setCardNo(res.cardNo)
        generated.value = true
        navTimer = setTimeout(() => { goMenu() }, 3000)
      } catch (e) {}
    }

    async function onCheck() {
      const no = inputNo.value.trim().toUpperCase()
      if (!no) return
      // 1997 → 员工登录
      if (no === '1997') {
        showModal.value = false
        uni.navigateTo({ url: '/pages/staff/login' })
        return
      }
      try {
        await get(API.CARD_CHECK, { no })
        card.setCardNo(no)
        showModal.value = false
        uni.navigateTo({ url: '/pages/menu/menu' })
      } catch (e) {}
    }

    function onMaskTap() {
      if (generated.value) {
        if (navTimer) { clearTimeout(navTimer); navTimer = null }
        goMenu()
      }
    }

    function goMyOrders() { uni.navigateTo({ url: '/pages/orders/orders' }) }
    function goStaffLogin() { uni.navigateTo({ url: '/pages/staff/login' }) }

    return { showModal, generated, inputNo, cardNo, onGenerate, onCheck, onMaskTap, goMyOrders, goStaffLogin }
  }
}
</script>

<style scoped>

.nav-bar{height:100rpx;position:sticky;top:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:0 28rpx;border-bottom:1px solid var(--border);flex-shrink:0}
.nav-left{display:flex;align-items:center;gap:16rpx}
.nav-logo{font-size:44rpx}
.nav-brand{font-size:40rpx;font-weight:900;color:var(--gold);letter-spacing:4rpx}
.my-btn{font-size:26rpx;color:var(--gold);font-weight:600}

.landing-bg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#1A1A1A 0%,var(--bg) 70%);padding:40rpx}
.landing-decor{position:absolute;font-size:80rpx;opacity:.08;animation:float 6s ease-in-out infinite;pointer-events:none}
.landing-logo{font-size:160rpx;animation:float 3s ease-in-out infinite}
.landing-title{font-size:56rpx;font-weight:900;color:var(--gold);margin-top:24rpx;letter-spacing:8rpx}
.landing-sub{font-size:28rpx;color:var(--text-dim);margin:12rpx 0 80rpx;letter-spacing:2rpx}
.btn-primary{width:440rpx;height:96rpx;border-radius:24rpx;background:linear-gradient(135deg,var(--gold-dark),var(--gold),var(--gold-light));color:#1A1A1A;border:none;font-size:32rpx;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 8rpx 40rpx rgba(245,166,35,.35)}

/* 员工入口 */
.staff-link{padding:20rpx;text-align:center;flex-shrink:0}
.staff-link text{color:var(--text-muted);font-size:22rpx;letter-spacing:2rpx}

/* 号码牌弹窗 */
.modal-mask{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);z-index:300;align-items:center;justify-content:center}
.modal-mask.show{display:flex}
.card-modal{width:580rpx;background:var(--bg-card);border-radius:40rpx;border:2px solid var(--border);overflow:hidden;animation:bounce-in .5s ease}
.modal-header{padding:48rpx 36rpx 28rpx;text-align:center}
.modal-icon{font-size:104rpx;animation:float 2s ease-in-out infinite}
.modal-title{font-size:36rpx;font-weight:800;color:var(--gold);margin-top:16rpx;white-space:nowrap}
.modal-desc{font-size:26rpx;color:var(--text-dim);margin-top:8rpx;line-height:1.6;white-space:nowrap}
.card-generated{text-align:center;padding:24rpx 36rpx 40rpx}
.card-number-big{padding:32rpx;background:linear-gradient(135deg,rgba(245,166,35,.1),rgba(245,166,35,.05));border-radius:28rpx;border:2rpx dashed rgba(245,166,35,.3)}
.card-number-big text{font-size:84rpx;font-weight:900;letter-spacing:20rpx;color:var(--gold)}
.card-remember{font-size:26rpx;color:var(--red);margin-top:20rpx;font-weight:600;display:block}
.modal-body{padding:0 36rpx 36rpx}
.card-input-group{display:flex;align-items:stretch;margin-bottom:24rpx;border:4rpx solid var(--border);border-radius:20rpx;overflow:hidden;background:var(--bg)}
.card-input{flex:1;min-width:0;height:92rpx;background:transparent;border:none;outline:none;padding:0 28rpx;font-size:36rpx;font-weight:700;text-align:center;letter-spacing:8rpx;color:var(--gold)}
.card-confirm-btn{flex-shrink:0;width:128rpx;border:none;background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#1A1A1A;font-size:28rpx;font-weight:700;display:flex;align-items:center;justify-content:center}
.card-divider{text-align:center;color:var(--text-muted);font-size:24rpx;margin:20rpx 0;position:relative}
.modal-footer{padding:0 36rpx 40rpx}
</style>


