<template>
  <view class="marketing-combination-create">
    <view class="page-header">
      <view class="back-btn" @click="handleBack">
        <text class="back-ic">←</text>
        <text class="back-txt">返回</text>
      </view>
      <text class="page-title">{{ isEdit ? '编辑拼团商品' : '添加拼团商品' }}</text>
    </view>

    <view class="steps-card border-shadow">
      <view class="steps-container">
        <view v-for="(step, index) in steps" :key="index" :class="['step-item', currentStep >= index ? 'active' : '']">
          <view class="step-icon">
            <text class="step-num" v-if="currentStep <= index">{{ index + 1 }}</text>
            <text class="step-check" v-else>✓</text>
          </view>
          <text class="step-text">{{ step }}</text>
          <view class="step-line" v-if="index < steps.length - 1"></view>
        </view>
      </view>
    </view>

    <!-- 步骤1: 选择商品 -->
    <view v-if="currentStep === 0" class="step-content border-shadow">
      <view class="form-item row-center">
        <text class="label required">选择商品：</text>
        <view class="goods-selector" @click="openGoodsSelector">
          <view v-if="selectedGood" class="selected-inner">
            <image class="good-img" :src="selectedGood.image" mode="aspectFill"></image>
            <text class="good-name">{{ selectedGood.title }}</text>
          </view>
          <view v-else class="selector-empty">
            <text class="empty-ic">🛍️</text>
            <text class="empty-txt">选择商品</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 步骤2: 填写基础信息 -->
    <view v-if="currentStep === 1" class="step-content border-shadow">
      <view class="form-scroll">
        <view class="form-section">
          <text class="section-title">基础配置</text>
          <view class="form-item">
            <text class="label required">拼团名称：</text>
            <input class="input" v-model="form.title" placeholder="请输入拼团名称" />
          </view>
          <view class="form-item">
            <text class="label required">拼团简介：</text>
            <textarea class="textarea" v-model="form.info" placeholder="请输入拼团简介" />
          </view>
          <view class="form-item">
            <text class="label required">拼团时间：</text>
            <view class="date-range">
              <input class="input-half" v-model="form.start_time" placeholder="开始日期" />
              <text class="range-sep">-</text>
              <input class="input-half" v-model="form.stop_time" placeholder="结束日期" />
            </view>
          </view>
        </view>

        <view class="form-section">
          <text class="section-title">拼团规则</text>
          <view class="form-item">
            <text class="label required">拼团时效：</text>
            <view class="input-unit">
              <input class="input" type="number" v-model="form.effective_time" />
              <text class="unit">小时</text>
            </view>
          </view>
          <view class="form-item">
            <text class="label required">拼团人数：</text>
            <view class="input-unit">
              <input class="input" type="number" v-model="form.people" />
              <text class="unit">人</text>
            </view>
          </view>
          <view class="form-item">
            <text class="label">虚拟成团：</text>
            <view class="input-unit">
              <input class="input" type="number" v-model="form.virtual_people" />
              <text class="unit">人</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 步骤3: 修改商品详情 -->
    <view v-if="currentStep === 2" class="step-content border-shadow">
      <view class="spec-table">
        <view class="table-head">
          <view class="th">规格</view>
          <view class="th">拼团价</view>
          <view class="th">成本价</view>
          <view class="th">限量</view>
          <view class="th">库存</view>
        </view>
        <view class="table-row" v-for="(spec, index) in specs" :key="index">
          <view class="td">{{ spec.name }}</view>
          <view class="td"><input class="inp-small" v-model="spec.price" /></view>
          <view class="td"><input class="inp-small" v-model="spec.cost" /></view>
          <view class="td"><input class="inp-small" v-model="spec.quota" /></view>
          <view class="td">{{ spec.stock }}</view>
        </view>
      </view>
      
      <view class="detail-section">
        <text class="label">商品详情：</text>
        <view class="editor-placeholder">
          <text class="p-txt">这里是编辑器区域 (WangEditor 映射)</text>
        </view>
      </view>
    </view>

    <view class="footer-actions">
      <view v-if="currentStep > 0" class="btn outline" @click="prevStep">上一步</view>
      <view class="btn primary" @click="nextStep">{{ currentStep === 2 ? '提交' : '下一步' }}</view>
    </view>

    <!-- 商品选择弹窗 -->
    <view v-if="showSelector" class="modal">
      <view class="modal-mask" @click="showSelector = false"></view>
      <view class="modal-content">
        <view class="modal-header">
          <text class="modal-title">选择商品</text>
          <text class="close" @click="showSelector = false">✕</text>
        </view>
        <view class="modal-body">
          <view v-for="g in goodsList" :key="g.id" class="good-item" @click="selectGood(g)">
            <image :src="g.image" class="g-thumb"></image>
            <text class="g-title">{{ g.title }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, reactive } from 'vue'

const steps = ['选择拼团商品', '填写基础信息', '修改商品详情']
const currentStep = ref(0)
const isEdit = ref(false)
const showSelector = ref(false)

const selectedGood = ref<any>(null)

const form = reactive({
  title: '',
  info: '',
  start_time: '',
  stop_time: '',
  effective_time: 24,
  people: 2,
  virtual_people: 0,
})

const specs = ref([
  { name: '默认规格', price: '0.01', cost: '0.00', quota: '100', stock: '999' }
])

const goodsList = ref([
  { id: 1, title: 'UR2024夏季新款女装...', image: 'https://img14.360buyimg.com/n1/jfs/t1/172605/32/17036/114175/609a473eE6997455c/df82c6168e36712b.jpg' },
  { id: 2, title: 'FOMIX 蛋壳椅...', image: 'https://img12.360buyimg.com/n1/jfs/t1/185449/19/11995/4379/60d96d27E6a877c8e/3c38d4e92a2a7a5a.jpg' }
])

const handleBack = () => {
  uni.navigateBack()
}

const openGoodsSelector = () => {
  showSelector.value = true
}

const selectGood = (g: any) => {
  selectedGood.value = g
  form.title = g.title
  showSelector.value = false
}

const nextStep = () => {
  if (currentStep.value === 0 && !selectedGood.value) {
    uni.showToast({ title: '请先选择商品', icon: 'none' })
    return
  }
  if (currentStep.value < 2) {
    currentStep.value++
  } else {
    uni.showToast({ title: '提交成功' })
    setTimeout(() => uni.navigateBack(), 1500)
  }
}

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

<style scoped lang="scss">
.marketing-combination-create {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

.border-shadow {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 24px;
  gap: 16px;
}

.back-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}
.back-ic { font-size: 18px; color: #606266; margin-right: 4px; }
.back-txt { font-size: 14px; color: #606266; }

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.steps-card {
  padding: 30px 60px;
  margin-bottom: 24px;
}

.steps-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.step-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.step-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  z-index: 2;
}

.step-num { font-size: 14px; color: #909399; }
.step-check { font-size: 14px; color: #fff; }

.step-text { font-size: 14px; color: #909399; }

.step-line {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: #f0f2f5;
  z-index: 1;
}

.step-item.active .step-icon { background-color: #2d8cf0; }
.step-item.active .step-num { color: #fff; }
.step-item.active .step-text { color: #2d8cf0; font-weight: 600; }
.step-item.active .step-line { background-color: #2d8cf0; }

.step-content {
  padding: 40px;
  margin-bottom: 80px;
  min-height: 400px;
}

.form-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
}
.row-center { align-items: center; }

.label {
  width: 120px;
  font-size: 14px;
  color: #606266;
  text-align: right;
  margin-right: 16px;
}
.required::before { content: '*'; color: #f56c6c; margin-right: 4px; }

.goods-selector {
  width: 80px;
  height: 80px;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.selector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-ic { font-size: 24px; }
.empty-txt { font-size: 12px; color: #909399; margin-top: 4px; }

.selected-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.good-img { width: 60px; height: 60px; border-radius: 2px; }
.good-name { font-size: 10px; color: #333; margin-top: 2px; width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.input { 
  flex: 1; 
  max-width: 460px;
  height: 36px; 
  border: 1px solid #dcdfe6; 
  border-radius: 4px; 
  padding: 0 12px;
  font-size: 14px;
}

.textarea {
  flex: 1;
  max-width: 460px;
  height: 100px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
}

.date-range {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.input-half { width: 220px; height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 14px; }

.input-unit {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.input-unit .input { width: 200px; padding-right: 40px; }
.unit { position: absolute; left: 160px; font-size: 13px; color: #909399; }

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #2d8cf0;
}

.spec-table {
  border: 1px solid #e8eaec;
  border-radius: 4px;
  margin-bottom: 30px;
}
.table-head { display: flex; background: #f8f8f9; border-bottom: 1px solid #e8eaec; }
.table-row { display: flex; border-bottom: 1px solid #e8eaec; }
.th, .td { flex: 1; padding: 12px; font-size: 13px; text-align: center; }
.inp-small { width: 80px; border: 1px solid #dcdfe6; border-radius: 2px; height: 28px; text-align: center; }

.editor-placeholder {
  height: 300px;
  background-color: #fafafa;
  border: 1px solid #dcdfe6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-txt { color: #c0c4cc; }

.footer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  z-index: 10;
}

.btn {
  padding: 10px 32px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.btn.primary { background-color: #2d8cf0; color: #fff; }
.btn.outline { border: 1px solid #dcdfe6; color: #606266; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.modal-content { position: relative; width: 600px; background: #fff; border-radius: 8px; padding: 20px; }
.modal-header { display: flex; justify-content: space-between; margin-bottom: 20px; }
.modal-body { display: flex; flex-direction: column; gap: 12px; }
.good-item { display: flex; flex-direction: row; align-items: center; padding: 10px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.g-thumb { width: 40px; height: 40px; margin-right: 12px; }
.g-title { font-size: 14px; }
</style>
