<script setup>
import { ElMessage } from 'element-plus'
import LiveProductSelect from '@/components/LiveProductSelect.vue'
import { createTalk, updateTalk, getTalk, getProduct } from '../api'
import { useChat } from '@/composables/useChat'
import Editor from '@tinymce/tinymce-vue'
import { useMapStore } from '@/stores/map'

const props = defineProps(['data', 'action'])

const emit = defineEmits(['update', 'update:modelValue'])

const liveTalkDuration = useMapStore().getMapValuesByKey('live_talk_duration')

const actonMap = { add: '添加', update: '编辑', view: '查看' }

const isUpdate = computed(() => props.action === 'update')
const title = computed(() => actonMap[props.action] + '直播话术')
const formRef = ref()
const form = reactive({
  name: '',
  live_commodity_id: '',
  selling_point: '',
  marketing_campaign: '',
  duration: liveTalkDuration[0]?.value || '10',
  content: ` <p>
      <span
        style="
          padding: 0 5px;
          display: inline-block;
          background-color: rgba(25, 102, 255, 0.08);
          color: rgb(25, 102, 255);
        "
        >1.开场欢迎：</span>
    </p>
    <p>
      "大家好，欢迎来到我的直播间！我是[你的名字]，今天我们将一起分享/探讨/体验[直播主题]。如果你喜欢我们今天的内容，别忘了点赞和关注哦！"
    </p>
    <p>
      <span
        style="
          padding: 0 5px;
          display: inline-block;
          background-color: rgba(25, 102, 255, 0.08);
          color: rgb(25, 102, 255);
        "
        >2.互动提问：</span>
    </p>
    <p>
      "我看到评论区有很多小伙伴在问我关于[话题]的问题，我现在就来一一为大家解答。如果你也有问题，可以在评论区留言，我会尽快回复大家！"
    </p>
    <p>
      <span
        style="
          padding: 0 5px;
          display: inline-block;
          background-color: rgba(25, 102, 255, 0.08);
          color: rgb(25, 102, 255);
        "
        >3.产品介绍：</span>
    </p>
    <p>
      "接下来我要给大家介绍的这款产品，它的特点是[特点]，使用起来非常[方便/舒适/有效]。我自己也是它的忠实粉丝，今天就来给大家详细展示一下它的使用方法和效果。"
    </p>
    <p>
      <span
        style="
          padding: 0 5px;
          display: inline-block;
          background-color: rgba(25, 102, 255, 0.08);
          color: rgb(25, 102, 255);
        "
        >4.引导互动：</span>
    </p>
    <p>
      "我知道大家都很聪明，那么我来出一个小问题考考大家，第一个答对的小伙伴将获得我们的小礼物一份，准备好了吗？问题是……"
    </p>`,
})
watchEffect(() => {
  if (props.data) Object.assign(form, props.data)
})

const rules = ref({
  name: [{ required: true, message: '请输入' }],
  live_commodity_id: [{ required: true, message: '请选择' }],
  selling_point: [{ required: true, message: '请输入' }],
  marketing_campaign: [{ required: true, message: '请输入' }],
  duration: [{ required: true, message: '请选择' }],
})

async function fetchInfo() {
  const res = await getTalk({ id: props.data.id })
  Object.assign(form, res.data.detail)
}
watchEffect(() => {
  if (props.action !== 'add') fetchInfo()
})

const product = ref()
watch(
  () => form.live_commodity_id,
  async (id) => {
    const res = await getProduct({ id })
    product.value = res.data.detail
  }
)

// 提交
async function handleSubmit() {
  await formRef.value?.validate()
  isUpdate.value ? handleUpdate() : handleAdd()
}

// 新建
async function handleAdd() {
  await createTalk(form)
  ElMessage({ message: '创建成功', type: 'success' })
  emit('update')
  emit('update:modelValue', false)
}

// 编辑
async function handleUpdate() {
  await updateTalk(form)
  ElMessage({ message: '修改成功', type: 'success' })
  emit('update')
  emit('update:modelValue', false)
}

const wrapWithStyle = (text) => {
  return `<span style=" padding: 0 5px;display: inline-block;background-color: rgba(25, 102, 255, 0.08);color: rgb(25, 102, 255);">${text}</span>`
}
const wrapWithStyle2 = (text) => {
  return `<span style="padding: 0 5px;color: rgb(25, 102, 255);border: 1px solid rgba(25, 102, 255, 0.12);">${text}</span>`
}

const { post, messages, isLoading } = useChat()
watch(
  messages,
  () => {
    const lastMessage = messages.value[messages.value.length - 1]
    if (lastMessage && aiActive.value === 1) {
      form.selling_point = lastMessage.content
    }
    if (lastMessage && aiActive.value === 2) {
      form.marketing_campaign = lastMessage.content
    }

    if (lastMessage && aiActive.value === 3) {
      form.content = lastMessage.content
        .replace(/(商品引入|商品讲解|引导转化)/g, wrapWithStyle)
        .replace(
          /(开场互动|引出话题|引出商品|目标人群锁定|产品卖点讲解|观众互动|价格福利|催单话术|强调购买方式|结尾互动)/g,
          wrapWithStyle2
        )
    }
  },
  { deep: true }
)

const aiActive = ref(1)

function handleAIGenerate(index) {
  aiActive.value = index
  let content = ''
  // 商品卖点
  if (index === 1) {
    content = `请根据下面的商品名称，生成3～6个商品卖点。
商品名称：${product.value.title}
要求：
1. 卖点应突出商品的特点和优势。
2. 每个卖点应简洁明了，不超过10个字。
3. 卖点应具有一定的吸引力，能够引起消费者的兴趣和购买欲望。
4. 卖点应真实反映商品的实际特点，不得夸大或误导消费者。
5. 每个卖点之间使用分号分割`
  }
  if (index === 2) {
    content = `请根据以下商品名称，生成2~6个商品的营销活动。
商品名称：${product.value.title}
要求：
1. 营销活动应围绕商品的特点和优势展开。
2. 营销活动应包含对目标受众的定位、产品策略、价格策略、渠道策略、促销策略等。
3. 营销活动应具有创意和吸引力，能够引起目标受众的共鸣和购买欲望。
4. 营销活动应考虑到市场竞争和消费者需求，确保活动的可行性和有效性。
5. 营销活动应简洁明了，易于理解和执行，不超过10个字。
6. 每个活动之间使用分号分割。`
  }
  if (index === 3) {
    content = `你是一位网络主播。请根据以下要求撰写直播话术：
1. 直播话术匹配的直播时长为：${form.duration}分钟。
2. 直播的商品是：${product.value.title}。
3. 商品的卖点有：${form.selling_point}。
4. 营销活动有：${form.marketing_campaign}。
5. 直播话术要求包含：商品引入（开场互动、引出话题、引出商品、目标人群锁定）、商品讲解（产品卖点讲解、观众互动、价格福利）、引导转化（催单话术、强调购买方式、结尾互动）等内容模块。而且按照模块进行内容区分。
请确保话术简洁明了，突出商品特点，并吸引观众购买。同时，注意控制直播时长，确保在${form.duration}分钟内完成。`
  }
  post({ role: 'user', content }, index === 3)
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" @closed="$emit('update:modelValue', false)" width="1000px">
    <el-row justify="center" :gutter="40">
      <el-col :sm="24" :md="12">
        <el-form ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="action === 'view'">
          <el-form-item label="直播话术名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="直播主题" prop="live_commodity_id">
            <LiveProductSelect v-model="form.live_commodity_id"></LiveProductSelect>
          </el-form-item>
          <el-form-item label="直播主题卖点" prop="selling_point">
            <div class="form-tips">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleAIGenerate(1)"
                :disabled="isLoading"
                :loading="isLoading && aiActive === 1"
                >AI一键生成</el-button
              >
            </div>
            <el-input
              type="textarea"
              v-model="form.selling_point"
              placeholder="多个卖点请使用“；”分割。"
              :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="营销活动" prop="marketing_campaign">
            <div class="form-tips">
              <el-button
                type="primary"
                plain
                size="small"
                @click="handleAIGenerate(2)"
                :disabled="isLoading"
                :loading="isLoading && aiActive === 2"
                >AI一键生成</el-button
              >
            </div>
            <el-input
              type="textarea"
              v-model="form.marketing_campaign"
              placeholder="多个营销活动请使用“；”分割。"
              :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="话术时长" prop="duration">
            <el-radio-group v-model="form.duration">
              <el-radio v-for="item in liveTalkDuration" v-bind="item" :key="item.value"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :sm="24" :md="12" style="border-left: 1px solid #dcdfe6">
        <div style="text-align: center; margin-bottom: 20px">
          <h2 style="margin-bottom: 20px">直播话术</h2>
          <el-button
            type="primary"
            size="large"
            @click="handleAIGenerate(3)"
            :disabled="isLoading"
            :loading="isLoading && aiActive === 3">
            {{ messages.length ? '再次生成直播话术' : 'AI生成直播话术' }}
          </el-button>
        </div>
        <Editor
          v-model="form.content"
          :init="{
            toolbar: false,
            quickbars_insert_toolbar: false,
            menubar: false,
            statusbar: false,
            height: 420,
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:13px }',
          }" />
      </el-col>
    </el-row>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button
          type="primary"
          round
          auto-insert-space
          :disabled="isLoading"
          @click="handleSubmit"
          v-if="action !== 'view'"
          >保存</el-button
        >
      </el-row>
    </template>
  </el-dialog>
</template>

<style scoped>
.form-tips {
  position: absolute;
  right: 0;
  top: -30px;
  z-index: 100;
  line-height: 22px;
  color: #92939a;
}
</style>
