﻿<template>
  <view class="page-confirm">
    <view class="nav-bar">
      <text class="nav-back" @tap="goBack">←</text>
      <text class="nav-title">确认下单</text>
      <text></text>
    </view>

    <scroll-view class="confirm-body" scroll-y>
      <view class="section">
        <text class="section-title">🍷 订单清单</text>
        <view v-for="item in cart.items" :key="item.product.id" class="confirm-item">
          <text class="ci-emoji">{{ item.product.emoji }}</text>
          <view class="ci-info">
            <text class="ci-name">{{ item.product.name }}</text>
            <text class="ci-desc">{{ item.product.desc }}</text>
          </view>
          <text class="ci-qty">×{{ item.qty }}</text>
        </view>
      </view>

      <view class="section">
        <text class="section-title">🏷 快捷备注</text>
        <PresetTags v-model="presets" />
      </view>

      <view class="section">
        <text class="section-title">✏️ 补充备注</text>
        <input class="note-input" v-model="note" placeholder="如：多冰、少甜..." maxlength="100" />
      </view>

      <view class="total-line">
        <text>共 {{ cart.totalCount }} 件</text>
      </view>
    </scroll-view>

    <view class="confirm-footer">
      <button class="bell-btn" @tap="onSubmit" :loading="submitting">🔔 摇铃下单</button>
    </view>
  </view>
</template>

<script>
import { ref } from 'vue'
import { useCartStore } from '@/stores/cart'
import { useCardStore } from '@/stores/card'
import { post } from '@/utils/request'
import { API } from '@/utils/constants'
import PresetTags from '@/components/PresetTags.vue'

export default {
  components: { PresetTags },
  setup() {
    const cart = useCartStore()
    const card = useCardStore()
    const presets = ref([])
    const note = ref('')
    const submitting = ref(false)

    function goBack() { uni.navigateBack() }

    async function onSubmit() {
      if (cart.items.length === 0) {
        uni.showToast({ title: '购物车为空', icon: 'none' })
        return
      }
      submitting.value = true
      try {
        const fullNote = [...presets.value, note.value].filter(Boolean).join(' ')
        const items = cart.items.map(i => ({ productId: i.product.id, qty: i.qty }))
        await post(API.ORDER_SUBMIT, { cardNo: card.cardNo, items, note: fullNote })
        cart.clearCart()
        uni.showToast({ title: '下单成功 🎉', icon: 'success' })
        setTimeout(() => { uni.redirectTo({ url: '/pages/orders/orders' }) }, 1500)
      } catch (e) {}
      submitting.value = false
    }

    return { cart, presets, note, submitting, goBack, onSubmit }
  }
}
</script>

<style scoped>
.page-confirm{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
.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-back{font-size:36rpx;color:var(--text-dim)}
.nav-title{font-size:32rpx;font-weight:800;color:var(--gold)}
.confirm-body{flex:1;padding:0 28rpx}
.section{padding:20rpx 0;border-bottom:1px solid var(--border)}
.section-title{font-size:28rpx;font-weight:700;color:var(--gold);display:block;margin-bottom:16rpx}
.confirm-item{display:flex;align-items:center;padding:16rpx 0;gap:16rpx}
.ci-emoji{font-size:48rpx}
.ci-info{flex:1}
.ci-name{font-size:28rpx;font-weight:600;color:var(--text);display:block}
.ci-desc{font-size:22rpx;color:var(--text-dim)}
.ci-qty{font-size:28rpx;font-weight:700;color:var(--gold)}
.note-input{width:100%;height:80rpx;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 24rpx;font-size:28rpx;color:var(--text);margin-top:8rpx}
.total-line{padding:24rpx 0;font-size:28rpx;color:var(--text-dim)}
.confirm-footer{padding:20rpx 28rpx;padding-bottom:calc(20rpx + var(--safe-b));flex-shrink:0}
.bell-btn{width:100%;height:96rpx;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--gold-dark),var(--gold));color:#1A1A1A;border:none;font-size:32rpx;font-weight:800;display:flex;align-items:center;justify-content:center;animation:pulse-glow 2s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 20rpx rgba(245,166,35,.3)}50%{box-shadow:0 0 40rpx rgba(245,166,35,.6)}}
</style>
