<template>
  <div class="menu-export-wizard">
    <!-- 步骤条 -->
    <el-steps :active="currentStep" finish-status="success" align-center>
      <el-step title="选择酒款" description="从已上枪的酒款中选择要导出的酒款"></el-step>
      <el-step title="选择模板" description="选择整版酒单模板"></el-step>
      <el-step title="确认导出" description="确认信息并导出文件"></el-step>
    </el-steps>

    <div class="wizard-content">
      <!-- 步骤1: 选择酒款 -->
      <div v-show="currentStep === 0" class="step-content">
        <el-card shadow="never">
          <template #header>
            <div class="step-header">
              <h3>第一步：选择要导出的酒款</h3>
              <p>从当前在售的酒款中选择要包含在酒单中的酒款（至少选择一款）</p>
            </div>
          </template>

          <div class="beer-selection-section">
            <div class="selection-toolbar">
              <el-checkbox 
                v-model="selectAll" 
                @change="handleSelectAll"
                :indeterminate="isIndeterminate"
              >
                全选 ({{ selectedBeers.length }}/{{ tapList.length }})
              </el-checkbox>
              <el-button v-if="selectedBeers.length > 0" @click="clearSelection" size="small">
                清空选择
              </el-button>
            </div>

            <div class="beer-grid">
              <div
                v-for="beer in tapList"
                :key="beer.id"
                :class="['beer-selection-card', { 'selected': isSelected(beer) }]"
                @click="toggleBeerSelection(beer)"
              >
                <el-checkbox 
                  :model-value="isSelected(beer)"
                  @click.stop
                  @change="toggleBeerSelection(beer)"
                  class="beer-checkbox"
                />
                
                <img
                  :src="beer.cover || '/images/default-beer.png'"
                  :alt="beer.beerName"
                  class="beer-image"
                />
                
                <div class="beer-info">
                  <h4 class="beer-name">{{ beer.beerName }}</h4>
                  <p class="beer-brand">{{ beer.brandName }}</p>
                  <p class="beer-style">{{ beer.beerStyles }}</p>
                  <div class="beer-specs">
                    <span 
                      v-for="spec in beer.specList" 
                      :key="spec.id" 
                      class="spec-tag"
                    >
                      {{ spec.specName }} ￥{{ spec.specPrice }}
                    </span>
                  </div>
                  <div class="tap-info">
                    <el-tag type="primary" size="small">{{ beer.tapNo }}号酒头</el-tag>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="tapList.length === 0" class="empty-state">
              <el-empty description="暂无在售酒款" />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 步骤2: 选择模板 -->
      <div v-show="currentStep === 1" class="step-content">
        <el-card shadow="never">
          <template #header>
            <div class="step-header">
              <h3>第二步：选择整版酒单模板</h3>
              <p>选择适合的酒单模板样式</p>
            </div>
          </template>

          <div class="template-selection-section">
            <div v-if="loadingTemplates" class="loading-section">
              <el-skeleton :rows="3" animated />
            </div>

            <div v-else class="template-grid">
              <div
                v-for="template in templates"
                :key="template.id"
                :class="['template-card', { 'selected': selectedTemplate?.id === template.id }]"
                @click="selectTemplate(template)"
              >
                <div class="template-preview">
                  <img
                    :src="template.previewImage || '/images/default-template.png'"
                    :alt="template.name"
                    class="template-image"
                  />
                  <div class="template-overlay">
                    <el-button type="primary" size="small">选择此模板</el-button>
                  </div>
                </div>
                
                <div class="template-info">
                  <h4 class="template-name">{{ template.name }}</h4>
                  <p class="template-desc">{{ template.description || '经典酒单模板' }}</p>
                  <div class="template-tags">
                    <el-tag size="small">{{ template.width }}x{{ template.height }}</el-tag>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="templates.length === 0 && !loadingTemplates" class="empty-state">
              <el-empty description="暂无可用模板" />
            </div>
          </div>
        </el-card>
      </div>

      <!-- 步骤3: 确认导出 -->
      <div v-show="currentStep === 2" class="step-content">
        <el-card shadow="never">
          <template #header>
            <div class="step-header">
              <h3>第三步：确认导出信息</h3>
              <p>确认所选酒款和模板，选择导出格式</p>
            </div>
          </template>

          <div class="confirm-section">
            <!-- 选中的酒款 -->
            <div class="confirm-beers">
              <h4>已选择酒款 ({{ selectedBeers.length }}款)：</h4>
              <div class="confirm-beer-list">
                <div 
                  v-for="beer in selectedBeers" 
                  :key="beer.id" 
                  class="confirm-beer-item"
                >
                  <img
                    :src="beer.cover || '/images/default-beer.png'"
                    :alt="beer.beerName"
                    class="confirm-beer-image"
                  />
                  <div class="confirm-beer-info">
                    <span class="confirm-beer-name">{{ beer.beerName }}</span>
                    <span class="confirm-beer-brand">{{ beer.brandName }}</span>
                  </div>
                </div>
              </div>
            </div>

            <el-divider />

            <!-- 选中的模板 -->
            <div class="confirm-template">
              <h4>已选择模板：</h4>
              <div v-if="selectedTemplate" class="confirm-template-info">
                <img
                  :src="selectedTemplate.previewImage || '/images/default-template.png'"
                  :alt="selectedTemplate.name"
                  class="confirm-template-image"
                />
                <div class="confirm-template-details">
                  <span class="confirm-template-name">{{ selectedTemplate.name }}</span>
                  <span class="confirm-template-size">{{ selectedTemplate.width }}x{{ selectedTemplate.height }}</span>
                </div>
              </div>
            </div>

            <el-divider />

            <!-- 导出格式 -->
            <div class="export-format">
              <h4>导出格式：</h4>
              <el-radio-group v-model="exportFormat">
                <el-radio label="PDF">PDF文件 (适合打印)</el-radio>
                <el-radio label="PNG">PNG图片 (适合分享)</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="wizard-actions">
      <el-button @click="handleCancel">取消</el-button>
      <el-button v-if="currentStep > 0" @click="prevStep">上一步</el-button>
      <el-button 
        v-if="currentStep < 2" 
        type="primary" 
        @click="nextStep"
        :disabled="!canProceed"
      >
        下一步
      </el-button>
      <el-button 
        v-if="currentStep === 2" 
        type="primary" 
        @click="confirmExport"
        :loading="exporting"
      >
        确认导出
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  tapList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['submit', 'cancel'])

// 响应式数据
const currentStep = ref(0)
const selectedBeers = ref([])
const selectedTemplate = ref(null)
const templates = ref([])
const loadingTemplates = ref(false)
const exporting = ref(false)
const exportFormat = ref('PDF')

// 全选相关
const selectAll = ref(false)
const isIndeterminate = computed(() => {
  const selectedCount = selectedBeers.value.length
  return selectedCount > 0 && selectedCount < props.tapList.length
})

// 步骤验证
const canProceed = computed(() => {
  if (currentStep.value === 0) {
    return selectedBeers.value.length > 0
  }
  if (currentStep.value === 1) {
    return selectedTemplate.value !== null
  }
  return true
})

// 酒款选择相关方法
const isSelected = (beer) => {
  return selectedBeers.value.some(selected => selected.id === beer.id)
}

const toggleBeerSelection = (beer) => {
  const index = selectedBeers.value.findIndex(selected => selected.id === beer.id)
  if (index >= 0) {
    selectedBeers.value.splice(index, 1)
  } else {
    selectedBeers.value.push(beer)
  }
  updateSelectAllState()
}

const handleSelectAll = (checked) => {
  if (checked) {
    selectedBeers.value = [...props.tapList]
  } else {
    selectedBeers.value = []
  }
}

const clearSelection = () => {
  selectedBeers.value = []
  selectAll.value = false
}

const updateSelectAllState = () => {
  selectAll.value = selectedBeers.value.length === props.tapList.length
}

// 模板选择
const selectTemplate = (template) => {
  selectedTemplate.value = template
}

// 加载模板列表
const loadTemplates = async () => {
  try {
    loadingTemplates.value = true
    
    // 这里调用获取整版酒单模板的接口
    const response = await fetch('/barmgr/wineMenuTemplate/list', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    
    if (response.ok) {
      const data = await response.json()
      if (data.code === 200) {
        templates.value = data.data.templates || []
      }
    }
  } catch (error) {
    console.error('加载模板失败:', error)
    ElMessage.error('加载模板失败')
  } finally {
    loadingTemplates.value = false
  }
}

// 步骤控制
const nextStep = () => {
  if (canProceed.value && currentStep.value < 2) {
    currentStep.value++
    
    // 进入模板选择步骤时加载模板
    if (currentStep.value === 1) {
      loadTemplates()
    }
  }
}

const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

// 确认导出
const confirmExport = () => {
  if (!selectedTemplate.value || selectedBeers.value.length === 0) {
    ElMessage.warning('请确保已选择酒款和模板')
    return
  }

  const exportData = {
    selectedBeers: selectedBeers.value,
    templateId: selectedTemplate.value.id,
    format: exportFormat.value
  }

  emit('submit', exportData)
}

// 取消
const handleCancel = () => {
  emit('cancel')
}

// 组件挂载时初始化
onMounted(() => {
  // 如果有酒款数据，默认全选
  if (props.tapList.length > 0) {
    selectedBeers.value = [...props.tapList]
    selectAll.value = true
  }
})
</script>

<style scoped>
.menu-export-wizard {
  padding: 20px;
}

.wizard-content {
  margin: 30px 0;
}

.step-content {
  min-height: 400px;
}

.step-header {
  text-align: center;
  margin-bottom: 20px;
}

.step-header h3 {
  margin: 0 0 8px 0;
  color: #303133;
}

.step-header p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

/* 酒款选择 */
.beer-selection-section {
  padding: 20px 0;
}

.selection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e7ed;
}

.beer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.beer-selection-card {
  position: relative;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.beer-selection-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.beer-selection-card.selected {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.beer-checkbox {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}

.beer-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
  margin-bottom: 12px;
}

.beer-info {
  flex: 1;
}

.beer-name {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 4px 0;
}

.beer-brand {
  color: #909399;
  font-size: 14px;
  margin: 0 0 4px 0;
}

.beer-style {
  color: #67c23a;
  font-size: 13px;
  margin: 0 0 8px 0;
}

.beer-specs {
  margin-bottom: 8px;
}

.spec-tag {
  display: inline-block;
  background: #f0f2f5;
  color: #606266;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  margin-right: 4px;
  margin-bottom: 2px;
}

.tap-info {
  margin-top: 8px;
}

/* 模板选择 */
.template-selection-section {
  padding: 20px 0;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.template-card {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.template-card:hover {
  border-color: #409eff;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.template-card.selected {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.template-preview {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.template-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.template-card:hover .template-overlay {
  opacity: 1;
}

.template-info {
  padding: 16px;
}

.template-name {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin: 0 0 4px 0;
}

.template-desc {
  color: #909399;
  font-size: 13px;
  margin: 0 0 8px 0;
}

.template-tags {
  display: flex;
  gap: 4px;
}

/* 确认导出 */
.confirm-section {
  padding: 20px 0;
}

.confirm-section h4 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 16px;
}

.confirm-beer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.confirm-beer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.confirm-beer-image {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.confirm-beer-info {
  display: flex;
  flex-direction: column;
}

.confirm-beer-name {
  font-weight: 600;
  color: #303133;
  font-size: 13px;
}

.confirm-beer-brand {
  color: #909399;
  font-size: 12px;
}

.confirm-template-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

.confirm-template-image {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  object-fit: cover;
}

.confirm-template-details {
  display: flex;
  flex-direction: column;
}

.confirm-template-name {
  font-weight: 600;
  color: #303133;
  font-size: 16px;
  margin-bottom: 4px;
}

.confirm-template-size {
  color: #909399;
  font-size: 13px;
}

.export-format h4 {
  margin-bottom: 12px;
}

/* 操作按钮 */
.wizard-actions {
  text-align: right;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

.wizard-actions .el-button {
  margin-left: 10px;
}

/* 空状态和加载 */
.empty-state,
.loading-section {
  text-align: center;
  padding: 60px 20px;
}
</style>