<template>
  <view class="cart-popup" :class="{ show: visible }">
    <view class="popup-header">
      <text class="popup-title">购物车 ({{ items.length }})</text>
      <text class="popup-clear" @tap="onClear">清空</text>
    </view>
    <scroll-view class="popup-body" scroll-y>
      <view v-for="item in items" :key="item.product.id" class="cart-item">
        <text class="cart-item-emoji">{{ item.product.emoji }}</text>
        <view class="cart-item-info">
          <text class="cart-item-name">{{ item.product.name }}</text>
          <text class="cart-item-alc" v-if="item.product.alc > 0">{{ item.product.alc }}%</text>
        </view>
        <view class="cart-item-qty">
          <text class="qty-btn" @tap="onQty(item.product.id, -1)">−</text>
          <text class="qty-num">{{ item.qty }}</text>
          <text class="qty-btn" @tap="onQty(item.product.id, 1)">+</text>
        </view>
      </view>
    </scroll-view>
    <view class="popup-footer">
      <text class="popup-total">共 {{ cart.totalCount }} 件</text>
      <button class="popup-submit" @tap="onSubmit" :disabled="items.length===0">去呼唤调酒师</button>
    </view>
  </view>
</template>

<script>
import { useCartStore } from '@/stores/cart'

export default {
  name: 'CartPopup',
  props: { visible: { type: Boolean, default: false }, items: { type: Array, default: () => [] } },
  emits: ['close', 'submit'],
  setup(props, { emit }) {
    const cart = useCartStore()
    function onQty(id, d) { cart.updateQty(id, (cart.items.find(i=>i.product.id===id)||{}).qty + d) }
    function onClear() { cart.clearCart() }
    function onSubmit() { emit('submit') }
    return { cart, onQty, onClear, onSubmit }
  }
}
</script>

<style scoped>
.cart-popup{position:fixed;bottom:0;left:0;right:0;background:var(--bg-card);border-radius:32rpx 32rpx 0 0;z-index:200;transform:translateY(100%);transition:transform .3s;max-height:60vh;display:flex;flex-direction:column}
.cart-popup.show{transform:translateY(0)}
.popup-header{display:flex;justify-content:space-between;padding:24rpx 28rpx;border-bottom:1px solid var(--border)}
.popup-title{font-size:30rpx;font-weight:700;color:var(--text)}
.popup-clear{font-size:24rpx;color:var(--red)}
.popup-body{flex:1;padding:0 28rpx;max-height:400rpx}
.cart-item{display:flex;align-items:center;padding:20rpx 0;border-bottom:1px solid var(--border);gap:16rpx}
.cart-item-emoji{font-size:44rpx}
.cart-item-info{flex:1}
.cart-item-name{font-size:28rpx;font-weight:600;color:var(--text);display:block}
.cart-item-alc{font-size:22rpx;color:var(--gold-light)}
.cart-item-qty{display:flex;align-items:center;gap:20rpx}
.qty-btn{width:48rpx;height:48rpx;border-radius:50%;background:var(--border);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:32rpx;font-weight:700}
.qty-num{font-size:28rpx;color:var(--text);min-width:40rpx;text-align:center}
.popup-footer{display:flex;align-items:center;padding:20rpx 28rpx;padding-bottom:calc(20rpx + var(--safe-b));border-top:1px solid var(--border);gap:20rpx}
.popup-total{font-size:28rpx;color:var(--text-dim)}
.popup-submit{flex:1;height:80rpx;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--orange),var(--red));color:#fff;border:none;font-size:28rpx;font-weight:700}
</style>
