<script setup>
import { ElMessage } from 'element-plus'
import { liveTestDuration } from '@/utils/dictionary'
import LiveProductSelect from '@/components/LiveProductSelect.vue'
import { createTalk, updateTalk, getTalk } from '../api'

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

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

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: '10',
  content: '',
})
watchEffect(() => {
  if (props.data) Object.assign(form, props.data)
})

const rules = ref({
  name: [{ required: true, message: '请输入' }],
  product_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()
})

// 提交
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 show = ref(false)
</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">
            <el-input
              type="textarea"
              v-model="form.selling_point"
              placeholder="多个卖点请使用“；”分割。"
              :rows="4"></el-input>
          </el-form-item>
          <el-form-item label="营销活动" prop="marketing_campaign">
            <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 liveTestDuration" 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">
          <h2 style="margin-bottom: 20px">直播话术</h2>
          <el-button type="primary" size="large" @click="show = true">
            {{ show ? '再次生成直播话术' : 'AI生成直播话术' }}
          </el-button>
        </div>
        <div class="live-talk-content" v-if="show">
          <p class="t1">商品引入</p>
          <p>
            <span>开场互动</span>
            亲爱的家人们，欢迎来到默认主播的直播间呀！今天可是有超棒的宝贝要给大家分享哦，大家有没有对电脑硬件感兴趣的呀？快来跟主播互动一下吧！
          </p>
          <p>
            <span>引出话题</span>
            说到电脑，那可是我们生活和工作中不可或缺的一部分呢。大家平时使用电脑的时候有没有遇到过卡顿、运行不流畅的情况呀？今天我带来的这款
            1DIY 兼容机，就能完美解决这些问题哦！
          </p>
          <p>
            <span>引出商品</span>
            这款 1DIY
            兼容机，它可是经过精心设计和配置的呢。它能够满足大家各种不同的使用需求，无论是日常办公、学习，还是玩大型游戏，都能轻松应对。
          </p>
          <p>
            <span>目标人群场景锁定</span>
            对于那些对电脑性能有较高要求的朋友们，这款兼容机绝对是你们的最佳选择。比如那些经常需要处理大量数据、进行图形设计的专业人士，或者是喜欢玩高画质游戏的游戏爱好者们，它都能给你们带来超棒的体验哦！
          </p>
          <p class="t1">商品讲解</p>
          <p>
            <span>产品卖点讲解</span>
            咱们这款兼容机的第一个卖点就是它的强大性能。它配备了最新的处理器和高性能显卡，运行速度那叫一个快，让你在使用过程中感受不到丝毫卡顿。而且内存和硬盘的容量也非常大，能够存储大量的文件和数据。第二个卖点就是它的兼容性非常好，能够兼容各种软件和硬件，不用担心出现不兼容的情况。
          </p>
          <p>
            <span>观众互动</span>
            家人们，你们觉得什么样的电脑配置才是最适合自己的呢？快在评论区留言告诉主播哦，主播会根据大家的需求给大家更详细的介绍。
          </p>
          <p class="t1">引导转化</p>
          <p>
            <span>催单话术</span>
            这么好的一款兼容机，大家是不是已经心动啦？别再犹豫啦，赶紧下单把它带回家吧！现在下单还有特别的优惠活动哦，错过可就太可惜啦！
          </p>
          <p>
            <span>强调购买方式</span>
            购买的方式非常简单哦，大家只需要点击屏幕下方的购买按钮，按照提示填写好收货信息就可以啦。我们会尽快安排发货，让大家尽快收到心仪的电脑。
          </p>
          <p>
            <span>结尾互动</span>
            好啦，今天的直播就到这里啦，感谢家人们的陪伴和支持。如果大家还有什么问题或者建议，都可以随时在直播间里留言哦。下次直播我们还会有更多惊喜好物等着大家，再见啦，家人们！
          </p>
        </div>
      </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 @click="handleSubmit" v-if="action !== 'view'"
          >保存</el-button
        >
      </el-row>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.live-talk-content {
  font-size: 12px;
  p {
    line-height: 22px;
  }

  .t1 {
    padding: 0 5px;
    display: inline-block;
    background-color: rgba(25, 102, 255, 0.08);
    color: rgb(25, 102, 255);
    border: 1px solid transparent;
  }
  span {
    padding: 0 5px;
    color: rgb(25, 102, 255);
    border: 1px solid rgba(25, 102, 255, 0.12);
  }
}
</style>
