<script setup>
import { Plus, Delete } from '@element-plus/icons-vue'
import { useChat } from '@/composables/useChat'
import { getAttrList } from '../api'
const form = inject('form')

const { post } = useChat()

const descLoading = ref(false)
function handleAIGenerate() {
  descLoading.value = true
  post({
    role: 'user',
    content: `请根据以下内容，给出1个用于抖音电商使用的推荐的“导购短标题”内容：${form.title}
要求：
1. 标题要简洁明了，能够吸引消费者的注意力。
2. 标题要突出${form.title}的特点和优势，如设计、材质、功能等。
3. 标题要具有吸引力，能够激发消费者的购买欲望。
4. 标题要简洁明了，不要过于冗长或复杂。
5. 输出结果以“推荐导购短标题：”开始`,
  }).then((res) => {
    form.shopping_guide_short_title = res.content.replace('推荐导购短标题：', '')
    descLoading.value = false
  })
}

const titleLoading = ref(false)
function handleAIGenerateTitle() {
  titleLoading.value = true
  post({
    role: 'user',
    content: `
请根据以下内容，给出1个用于抖音电商使用的推荐的“商品标题”内容：${form.title}
要求：
1. 标题要简洁明了，能够吸引消费者的注意力。
2. 标题要突出商品的特点和优势，如设计、材质、功能等。
3. 标题要具有吸引力，能够激发消费者的购买欲望。
4. 标题要简洁明了，不要过于冗长或复杂。
5. 字数控制在8-30个字（16-60字符）以内
6. 输出结果以“推荐商品标题：”开始
`,
  }).then((res) => {
    form.title = res.content.replace('推荐商品标题：', '')
    titleLoading.value = false
  })
}

const attrs = reactive({
  importance_attrs: {
    items: [],
    total: 0,
  },
  unimportance_attrs: {
    items: [],
    total: 0,
  },
})
async function fetchList() {
  if (!form.live_commodity_type_id) return
  const res = await getAttrList({ live_commodity_type_id: form.live_commodity_type_id })
  Object.assign(attrs, res.data)
}
watchEffect(() => {
  fetchList()
})

// 获取可选的属性列表（排除已选择的，但包含当前项选中的）
const getAvailableAttrs = (type, currentItemId = null) => {
  const selectedIds = form.live_commodity_attrs[type].map((item) => item.id).filter((id) => id && id !== currentItemId)
  return attrs[type].items.filter((item) => !selectedIds.includes(item.id))
}

// 添加属性项
function addAttrItem(type) {
  form.live_commodity_attrs[type].push({
    id: '',
    attr_name: '',
    value: '',
  })
}

// 删除属性项
function removeAttrItem(type, index) {
  form.live_commodity_attrs[type].splice(index, 1)
}

// 选择属性
function handleAttrSelect(attrId, item, type) {
  const selectedAttr = attrs[type].items.find((attr) => attr.id === attrId)
  if (selectedAttr) {
    item.attr_name = selectedAttr.name
  }
}

const importanceTotal = computed(() => {
  return form.live_commodity_attrs.importance_attrs.filter((item) => item.id && item.value).length
})

const unimportanceTotal = computed(() => {
  return form.live_commodity_attrs.unimportance_attrs.filter((item) => item.id && item.value).length
})
</script>

<template>
  <div>
    <el-form-item label="商品标题" prop="title" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
      <div class="form-tips">标题不规范会有可能引起商品下架，影响您的正常销售，请点击学习商品发布规范认真填写</div>
      <div style="display: flex; width: 100%; align-items: center; gap: 20px">
        <el-input
          placeholder="至少输入8个字（16个字符）以上，30个字（60个字符）以下"
          size="large"
          v-model="form.title" />
        <el-button type="primary" plain @click="handleAIGenerateTitle" :loading="titleLoading">一键智能优化</el-button>
      </div>
    </el-form-item>
    <el-form-item label="导购短标题" prop="shopping_guide_short_title">
      <div class="form-tips">短标题可用于商品搜索、首页推荐、物流单等场景，请提炼商品关键信息，客观准确填写</div>
      <div style="display: flex; width: 100%; align-items: center; gap: 20px">
        <el-input
          placeholder="建议填写简明准确的标题内容，避免重复表达"
          size="large"
          v-model="form.shopping_guide_short_title"
          style="flex: 1" />
        <el-button type="primary" plain @click="handleAIGenerate" :loading="descLoading">一键智能推荐</el-button>
      </div>
    </el-form-item>
    <el-form-item
      :label="`重要属性 ${importanceTotal}/${attrs.importance_attrs.total}`"
      prop="live_commodity_attrs.importance_attrs">
      <div class="form-tips">错误填写属性，会引起商品下架，请认真准确填写。</div>
      <div style="display: flex; flex-direction: column; gap: 16px">
        <div
          v-for="(item, index) in form.live_commodity_attrs.importance_attrs"
          :key="index"
          style="display: flex; align-items: flex-start; gap: 12px">
          <el-select
            v-model="item.id"
            placeholder="请选择属性"
            style="width: 200px"
            @change="(value) => handleAttrSelect(value, item, 'importance_attrs')">
            <el-option
              v-for="attr in getAvailableAttrs('importance_attrs', item.id)"
              :key="attr.id"
              :label="attr.name"
              :value="attr.id">
            </el-option>
          </el-select>
          <el-input v-model="item.value" placeholder="请输入属性值" style="flex: 1; max-width: 300px"> </el-input>
          <el-button type="danger" plain :icon="Delete" circle @click="removeAttrItem('importance_attrs', index)">
          </el-button>
        </div>
        <el-button type="primary" plain :icon="Plus" @click="addAttrItem('importance_attrs')"> 添加属性 </el-button>
      </div>
    </el-form-item>
    <el-form-item
      :label="`非重要属性 ${unimportanceTotal}/${attrs.unimportance_attrs.total}`"
      prop="live_commodity_attrs.unimportance_attrs">
      <div style="display: flex; flex-direction: column; gap: 16px">
        <div
          v-for="(item, index) in form.live_commodity_attrs.unimportance_attrs"
          :key="index"
          style="display: flex; align-items: flex-start; gap: 12px">
          <el-select
            v-model="item.id"
            placeholder="请选择属性"
            style="width: 200px"
            @change="(value) => handleAttrSelect(value, item, 'unimportance_attrs')">
            <el-option
              v-for="attr in getAvailableAttrs('unimportance_attrs', item.id)"
              :key="attr.id"
              :label="attr.name"
              :value="attr.id">
            </el-option>
          </el-select>
          <el-input v-model="item.value" placeholder="请输入属性值" style="flex: 1; max-width: 300px"> </el-input>
          <el-button type="danger" plain :icon="Delete" circle @click="removeAttrItem('unimportance_attrs', index)">
          </el-button>
        </div>
        <el-button type="primary" plain :icon="Plus" @click="addAttrItem('unimportance_attrs')"> 添加属性 </el-button>
      </div>
    </el-form-item>
  </div>
</template>
