<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { CategoryTree, Country, Tag } from '@/types'
import { goodsApi } from '@/api/goods'
import { countriesApi } from '@/api/countries'
import { buildCascader } from '@/utils/category-tree'

const props = defineProps<{
  visible: boolean
  countries: Country[]
  categories: CategoryTree[]
  /** 分组后的标签选项 {id,label,tags} */
  tagOptionGroups: Array<{ id: string; label: string; tags: Tag[] }>
}>()

const emit = defineEmits<{
  (e: 'update:visible', v: boolean): void
  (e: 'created', good: any): void
  /** 快捷新建国家后由父级刷新字典 */
  (e: 'dictionaries-changed'): void
}>()

const loading = ref(false)
const form = ref({
  goodName: '', goodImage: '', goodPrice: '', countryId: '',
  cascaderCategory: [] as string[], categoryId: '', tagIds: [] as string[],
  goodPriority: 0,
})

watch(() => props.visible, (v) => {
  if (v) {
    form.value = {
      goodName: '', goodImage: '', goodPrice: '', countryId: '',
      cascaderCategory: [], categoryId: '', tagIds: [], goodPriority: 0,
    }
  }
})

const categoryCascader = computed(() => buildCascader(props.categories))

function onCascaderChange(val: any) {
  const path = Array.isArray(val) ? val : []
  form.value.categoryId = path.length ? String(path[path.length - 1]) : ''
}

async function quickCreateCountry() {
  try {
    const { value } = await ElMessageBox.prompt('请输入国家名称', '新增国家', {
      confirmButtonText: '新增', cancelButtonText: '取消', inputPlaceholder: '国家名称',
    })
    if (!value.trim()) return
    const created = await countriesApi.createCountry({ countryName: value.trim() } as any)
    emit('dictionaries-changed')
    if (created?.id) form.value.countryId = created.id
    ElMessage.success('已创建并选中')
  } catch {}
}

async function handleSubmit() {
  if (!form.value.goodName.trim()) { ElMessage.warning('请输入商品名称'); return }
  if (!form.value.countryId) { ElMessage.warning('请选择国家'); return }
  if (!form.value.categoryId) { ElMessage.warning('请选择分类'); return }
  loading.value = true
  try {
    const created = await goodsApi.createCustomGood({
      goodName: form.value.goodName.trim(),
      goodImage: form.value.goodImage || undefined,
      goodPrice: form.value.goodPrice || null,
      countryId: Number(form.value.countryId),
      categoryId: Number(form.value.categoryId),
      tagIds: form.value.tagIds.map(Number),
      goodPriority: form.value.goodPriority,
      detail: {},
    })
    ElMessage.success('自定义商品已创建，可继续完善详情、尺码、包装和 SKU')
    emit('update:visible', false)
    emit('created', created)
  } catch (error: any) {
    ElMessage.error(error?.response?.data?.message || '自定义商品创建失败')
  } finally { loading.value = false }
}
</script>

<template>
  <el-dialog :model-value="visible" title="新增自定义商品" width="620px" destroy-on-close @update:model-value="emit('update:visible', $event)">
    <el-alert
      title="自定义商品不关联 SDS 原产品，名称、图片、价格、详情、尺码、包装和 SKU 均可维护。"
      type="info"
      :closable="false"
      style="margin-bottom:16px"
    />
    <el-form label-width="90px">
      <el-form-item label="商品名称" required><el-input v-model="form.goodName" /></el-form-item>
      <el-form-item label="商品图片"><ImageUpload v-model="form.goodImage" label="上传图片" /></el-form-item>
      <el-form-item label="基础价格"><el-input v-model="form.goodPrice" placeholder="例如 28.00" /></el-form-item>
      <el-form-item label="国家" required>
        <div class="select-inline">
          <el-select v-model="form.countryId" filterable placeholder="请选择国家" style="width:100%">
            <el-option v-for="c in countries" :key="c.id" :label="c.countryName" :value="c.id" />
          </el-select>
          <el-button text :icon="Plus" @click="quickCreateCountry" />
        </div>
      </el-form-item>
      <el-form-item label="分类" required>
        <el-cascader v-model="form.cascaderCategory" :options="categoryCascader as any" :props="{ checkStrictly: true }" placeholder="请选择分类" style="width:100%" @change="onCascaderChange" />
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="form.tagIds" multiple filterable placeholder="请选择标签" style="width:100%">
          <el-option-group v-for="g in tagOptionGroups" :key="g.id" :label="g.label">
            <el-option v-for="t in g.tags" :key="t.id" :label="t.tagName" :value="t.id" />
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label="优先级"><el-input-number v-model="form.goodPriority" :min="0" /></el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="emit('update:visible', false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">创建并完善详情</el-button>
    </template>
  </el-dialog>
</template>
