<template>
  <view class="recipe-overlay" :class="{ show: visible }" @tap="onClose">
    <view class="recipe-modal" @tap.stop>
      <text class="recipe-title">📖 全部配方 — 🎫 {{ cardNo }}</text>
      <view v-for="item in items" :key="item.name" class="recipe-item">
        <text class="recipe-name">{{ item.emoji }} {{ item.name }} ×{{ item.qty }}</text>
        <text class="recipe-text">{{ item.recipe || '暂无配方信息' }}</text>
      </view>
      <button class="recipe-close" @tap="onClose">关闭</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RecipeModal',
  props: { visible: Boolean, cardNo: String, items: Array },
  emits: ['close'],
  setup(props, { emit }) {
    function onClose() { emit('close') }
    return { onClose }
  }
}
</script>

<style scoped>
.recipe-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);z-index:400;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.recipe-overlay.show{display:flex}
.recipe-modal{width:640rpx;max-height:70vh;background:var(--bg-card);border-radius:var(--radius);border:2px solid var(--border);overflow-y:auto;padding:36rpx}
.recipe-title{font-size:32rpx;font-weight:700;color:var(--gold);display:block;margin-bottom:24rpx}
.recipe-item{background:rgba(245,166,35,.05);border:1px solid rgba(245,166,35,.15);border-radius:20rpx;padding:24rpx;margin-bottom:20rpx}
.recipe-name{font-size:28rpx;font-weight:700;color:var(--text);display:block;margin-bottom:12rpx}
.recipe-text{font-size:24rpx;color:var(--text-dim);line-height:1.7;white-space:pre-line}
.recipe-close{width:100%;height:80rpx;border-radius:var(--radius-sm);margin-top:16rpx;background:var(--gold);color:#1A1A1A;border:none;font-size:28rpx;font-weight:700}
</style>
