<template>
  <view class="cart-bar" @tap="$emit('open')">
    <view class="cart-icon-wrap">
      <text class="cart-icon">🍷</text>
      <text v-if="count > 0" class="cart-badge">{{ count }}</text>
    </view>
    <text class="cart-text">{{ count > 0 ? count + '件 · 去呼唤调酒师' : '购物车空空' }}</text>
  </view>
</template>

<script>
export default {
  name: 'CartBar',
  props: { count: { type: Number, default: 0 } },
  emits: ['open']
}
</script>

<style scoped>
.cart-bar{position:sticky;bottom:0;height:100rpx;background:var(--bg-card);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 24rpx;z-index:100;gap:16rpx}
.cart-icon-wrap{position:relative}
.cart-icon{font-size:48rpx}
.cart-badge{position:absolute;top:-8rpx;right:-8rpx;background:var(--red);color:#fff;font-size:20rpx;width:36rpx;height:36rpx;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}
.cart-text{flex:1;font-size:28rpx;color:var(--text-dim)}
</style>
