<script setup>
import { Plus, Delete, QuestionFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { deliveryMode, deliveryTime, orderStockCount } from '@/utils/dictionary'
const form = inject('form')

// 初始化规格列表
if (!form.info.specs) {
  form.info.specs = []
}

// 初始化sku列表
if (!form.info.sku) {
  form.info.sku = [{ price: '', stock: 0, reference_price: '' }]
}

// 确保在没有规格时至少有一个SKU
onMounted(() => {
  ensureSkuExists()
})

function ensureSkuExists() {
  const hasValidSpecs = form.info.specs && form.info.specs.some((spec) => spec.name && spec.name.trim())
  if (!hasValidSpecs && (!form.info.sku || form.info.sku.length === 0)) {
    form.info.sku = [{ price: '', stock: 0, reference_price: '' }]
  }
}

// 添加规格
function addSpec() {
  form.info.specs.push({
    name: '',
    values: [''],
  })
}

// 删除规格
function removeSpec(index) {
  form.info.specs.splice(index, 1)
  generateSkuList()
}

// 添加规格值
function addSpecValue(specIndex) {
  form.info.specs[specIndex].values.push('')
}

// 删除规格值
function removeSpecValue(specIndex, valueIndex) {
  if (form.info.specs[specIndex].values.length > 1) {
    form.info.specs[specIndex].values.splice(valueIndex, 1)
    generateSkuList()
  }
}

// 笛卡尔积算法：生成所有规格值的组合
function cartesianProduct(arrays) {
  if (arrays.length === 0) return []
  if (arrays.length === 1) return arrays[0].map((item) => [item])

  const [first, ...rest] = arrays
  const restProduct = cartesianProduct(rest)
  const result = []

  for (const item of first) {
    for (const restItem of restProduct) {
      result.push([item, ...restItem])
    }
  }

  return result
}

// 生成SKU列表
function generateSkuList() {
  // 过滤掉名称为空的规格和值为空的规格值
  const validSpecs = form.info.specs.filter((spec) => spec.name && spec.name.trim())

  // 如果没有有效规格，确保至少有一个SKU
  if (validSpecs.length === 0) {
    if (!form.info.sku || form.info.sku.length === 0) {
      form.info.sku = [{ price: '', stock: 0, reference_price: '' }]
    } else if (form.info.sku.length === 1 && !form.info.sku[0].specs) {
      // 保持单个SKU，但不添加specs字段
      form.info.sku[0] = {
        price: form.info.sku[0].price || '',
        stock: form.info.sku[0].stock || 0,
        reference_price: form.info.sku[0].reference_price || '',
      }
    } else {
      // 如果之前有多个SKU（有规格时），现在没有规格了，只保留第一个或创建一个新的
      const firstSku = form.info.sku[0]
      form.info.sku = [
        {
          price: firstSku?.price || '',
          stock: firstSku?.stock || 0,
          reference_price: firstSku?.reference_price || '',
        },
      ]
    }
    return
  }

  // 获取所有规格的有效值数组
  const specValuesArrays = validSpecs.map((spec) =>
    spec.values.filter((val) => val && val.trim()).map((val) => val.trim())
  )

  // 如果任何规格没有有效值，确保至少有一个SKU
  if (specValuesArrays.some((arr) => arr.length === 0)) {
    if (!form.info.sku || form.info.sku.length === 0) {
      form.info.sku = [{ price: '', stock: 0, reference_price: '' }]
    } else if (form.info.sku.length === 1 && !form.info.sku[0].specs) {
      form.info.sku[0] = {
        price: form.info.sku[0].price || '',
        stock: form.info.sku[0].stock || 0,
        reference_price: form.info.sku[0].reference_price || '',
      }
    }
    return
  }

  // 生成笛卡尔积
  const combinations = cartesianProduct(specValuesArrays)

  // 生成SKU列表，保留已存在的价格、库存和参考价数据
  const existingSkuMap = new Map()
  form.info.sku.forEach((sku) => {
    // 如果有specs字段，使用specs作为key；否则使用空数组作为key
    const key = JSON.stringify(sku.specs || [])
    existingSkuMap.set(key, {
      price: sku.price || '',
      stock: sku.stock || 0,
      reference_price: sku.reference_price || '',
    })
  })

  form.info.sku = combinations.map((combo) => {
    const key = JSON.stringify(combo)
    const existing = existingSkuMap.get(key)
    return {
      specs: combo,
      price: existing?.price || '',
      stock: existing?.stock || 0,
      reference_price: existing?.reference_price || '',
    }
  })
}

// 计算已添加的规格数量
const specCount = computed(() => form.info.specs.length)
const maxSpecCount = 3 // 最多3个规格

// 判断是否有有效的规格
const hasSpecs = computed(() => {
  return (
    form.info.specs &&
    form.info.specs.some((spec) => {
      if (!spec.name || !spec.name.trim()) return false
      return spec.values && spec.values.some((val) => val && val.trim())
    })
  )
})

// 监听规格变化，当没有规格时确保SKU存在
watch(hasSpecs, (newVal) => {
  if (!newVal) {
    ensureSkuExists()
  }
})

// 批量设置相关
const batchPrice = ref('')
const batchStock = ref('')
const batchReferencePrice = ref('')

// 批量设置价格
function batchSetPrice() {
  if (batchPrice.value === '' || batchPrice.value === null || batchPrice.value === undefined) return
  const price = batchPrice.value
  form.info.sku.forEach((sku) => {
    sku.price = price
  })
  batchPrice.value = ''
}

// 批量设置库存
function batchSetStock() {
  if (batchStock.value === '' || batchStock.value === null || batchStock.value === undefined) return
  const stock = Number(batchStock.value)
  if (isNaN(stock) || stock < 0) {
    ElMessage({ message: '请输入有效的库存数量', type: 'warning' })
    return
  }
  form.info.sku.forEach((sku) => {
    sku.stock = stock
  })
  batchStock.value = ''
}

// 批量设置参考价
function batchSetReferencePrice() {
  if (batchReferencePrice.value === '' || batchReferencePrice.value === null || batchReferencePrice.value === undefined)
    return
  const referencePrice = batchReferencePrice.value
  form.info.sku.forEach((sku) => {
    sku.reference_price = referencePrice
  })
  batchReferencePrice.value = ''
}
</script>

<template>
  <div>
    <el-form-item label="发货模式" prop="info.delivery_mode" :rules="[{ required: true, message: '请选择' }]">
      <div class="form-tips">
        注：现货商品切勿虚设为预售商品，请合理配置发货模式，以免影响成交转化。若切换发货模式，系统将不会回增原发货模式下被取消订单库存。
      </div>
      <el-radio-group v-model="form.info.delivery_mode" style="display: block">
        <el-radio v-for="item in deliveryMode" :key="item.value" v-bind="item" style="display: block"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="商品规格">
      <div class="form-tips">准确填写规格信息，有助于商品在搜索场景获取更多流量</div>
      <div class="spec-list">
        <div v-for="(spec, specIndex) in form.info.specs" :key="specIndex" class="spec-item">
          <div class="spec-item-header">
            <el-input
              v-model="spec.name"
              placeholder="请输入规格名称（如：颜色、尺寸）"
              style="flex: 1"
              @blur="generateSkuList">
            </el-input>
            <el-button
              type="danger"
              plain
              :icon="Delete"
              circle
              size="small"
              @click="removeSpec(specIndex)"
              style="margin-left: 12px"
              title="删除规格">
            </el-button>
          </div>
          <div class="spec-values">
            <div v-for="(value, valueIndex) in spec.values" :key="valueIndex" class="spec-value-item">
              <el-input v-model="spec.values[valueIndex]" placeholder="请输入规格值" @blur="generateSkuList">
              </el-input>
              <el-button
                type="danger"
                plain
                :icon="Delete"
                circle
                size="small"
                @click="removeSpecValue(specIndex, valueIndex)"
                :disabled="spec.values.length <= 1"
                style="margin-left: 8px"
                title="删除规格值">
              </el-button>
            </div>
            <el-button
              type="primary"
              plain
              :icon="Plus"
              size="small"
              @click="addSpecValue(specIndex)"
              style="margin-top: 8px">
              添加规格值
            </el-button>
          </div>
        </div>
        <el-button type="primary" plain :icon="Plus" @click="addSpec" :disabled="specCount >= maxSpecCount">
          添加规格（{{ specCount }}/{{ maxSpecCount }}）
        </el-button>
      </div>
    </el-form-item>
    <el-form-item label="发货时效" prop="info.delivery_time">
      <div class="form-tips">
        发货时效计算：买家支付后开始计算发货时效，请合理配置发货时效（注！现货库存切勿虚设为预售时效）
      </div>
      <el-radio-group v-model="form.info.delivery_time">
        <el-radio v-for="item in deliveryTime" :key="item.value" v-bind="item"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="价格与库存" required>
      <div class="form-tips" v-if="hasSpecs">根据规格自动生成，请为每个SKU填写价格和库存</div>
      <div class="form-tips" v-else>请填写商品价格和库存</div>
      <div class="batch-set-container" v-if="form.info.sku && form.info.sku.length > 0">
        <div class="batch-set-item">
          <el-input v-model="batchPrice" placeholder="批量设置价格" type="number" style="width: 200px">
            <template #prefix>¥</template>
          </el-input>
          <el-button type="primary" plain @click="batchSetPrice" style="margin-left: 8px"> 批量设置价格 </el-button>
        </div>
        <div class="batch-set-item">
          <el-input v-model="batchStock" placeholder="批量设置库存" type="number" style="width: 200px">
            <template #suffix>件</template>
          </el-input>
          <el-button type="primary" plain @click="batchSetStock" style="margin-left: 8px"> 批量设置库存 </el-button>
        </div>
        <div class="batch-set-item">
          <el-input v-model="batchReferencePrice" placeholder="批量设置参考价" type="number" style="width: 200px">
            <template #prefix>¥</template>
          </el-input>
          <el-button type="primary" plain @click="batchSetReferencePrice" style="margin-left: 8px">
            批量设置参考价
          </el-button>
        </div>
      </div>
      <el-table :data="form.info.sku" border :header-cell-style="{ backgroundColor: '#f5f7fa' }" style="width: 100%">
        <el-table-column v-if="hasSpecs" label="规格组合" align="center" width="200">
          <template #default="{ row }">
            <span>{{ row.specs ? row.specs.join(' / ') : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" align="center">
          <template #default="{ row }">
            <el-input v-model="row.price" placeholder="请输入价格" type="number">
              <template #prefix>¥</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="reference_price" label="参考价" align="center">
          <template #default="{ row }">
            <el-input v-model="row.reference_price" placeholder="请输入参考价" type="number">
              <template #prefix>¥</template>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存" align="center">
          <template #default="{ row }">
            <el-input v-model.number="row.stock" placeholder="请输入库存" type="number">
              <template #suffix>件</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="参考价" prop="info.reference_price" v-if="false">
      <template #label>
        <span>参考价</span>
        <el-popover :width="200" trigger="hover" placement="right">
          <img src="/live/product.png" style="width: 100%" />
          <template #reference>
            <QuestionFilled style="width: 20px; vertical-align: middle"></QuestionFilled>
          </template>
        </el-popover>
      </template>
      ¥<el-input v-model="form.info.reference_price" placeholder="请输入" style="width: 300px; margin: 0 10px" />元
    </el-form-item>
    <el-form-item label="订单库存计数" prop="info.order_stock_count">
      <el-radio-group v-model="form.info.order_stock_count">
        <el-radio v-for="item in orderStockCount" :key="item.value" v-bind="item"></el-radio>
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<style scoped>
.spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.spec-item {
  flex: 1;
  min-width: 300px;
  padding: 16px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  background-color: #fafafa;
}

.spec-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.spec-values {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spec-value-item {
  display: flex;
  align-items: center;
}

.batch-set-container {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid var(--el-border-color-lighter);
}

.batch-set-item {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .spec-list {
    flex-direction: column;
  }

  .spec-item {
    min-width: 100%;
  }

  .batch-set-container {
    flex-direction: column;
    gap: 12px;
  }

  .batch-set-item {
    width: 100%;
  }

  .batch-set-item .el-input {
    flex: 1;
  }
}
</style>
