<script setup>
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()
})

function handleChange(value, item, attr) {
  form.live_commodity_attrs[attr][item.id] = {
    id: item.id,
    attr_name: item.name,
    value: value,
  }
}

const importanceTotal = computed(() => {
  let total = 0
  Object.values(form.live_commodity_attrs.importance_attrs).forEach((item) => {
    if (item.value) total++
  })
  return total
})

const unimportanceTotal = computed(() => {
  let total = 0
  Object.values(form.live_commodity_attrs.unimportance_attrs).forEach((item) => {
    if (item.value) total++
  })
  return total
})
</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>
      <el-form-item
        v-for="item in attrs.importance_attrs.items"
        :key="item.id"
        :label="item.name"
        :required="item.is_importance == 1"
        style="width: 200px; margin-right: 20px">
        <el-input
          placeholder="请输入"
          :modelValue="form.live_commodity_attrs.importance_attrs[item.id]?.value"
          @input="(value) => handleChange(value, item, 'importance_attrs')"></el-input>
      </el-form-item>
    </el-form-item>
    <el-form-item
      :label="`非重要属性 ${unimportanceTotal}/${attrs.unimportance_attrs.total}`"
      prop="live_commodity_attrs.unimportance">
      <el-form-item
        v-for="item in attrs.unimportance_attrs.items"
        :key="item.id"
        :label="item.name"
        :required="item.is_importance == 1"
        style="width: 200px; margin-right: 20px">
        <el-input
          placeholder="请输入"
          :modelValue="form.live_commodity_attrs.unimportance_attrs[item.id]?.value"
          @input="(value) => handleChange(value, item, 'unimportance_attrs')"></el-input>
      </el-form-item>
    </el-form-item>
  </div>
</template>
