<script setup>
import { useMapStore } from '@/stores/map'
import { getNameByValue, materialMethodList } from '@/utils/dictionary'
import AppUpload from '@/components/base/AppUpload.vue'
import AIChat from './AIChat.vue'

const ImageDesign = defineAsyncComponent(() => import('./ImageDesign.vue'))

defineProps(['action'])

const emit = defineEmits(['prev', 'submit'])

const materialType = useMapStore().getMapValuesByKey('experiment_marketing_material_type')

const form = defineModel()

const formRef = ref()

const rules = ref({
  content: [{ required: true, message: '请输入' }],
})

const typeName = computed(() => {
  return getNameByValue(form.value.type, materialType)
})

async function handleValidate() {
  await formRef.value.validate()
}

async function handlePrev() {
  emit('prev')
}

async function handleSubmit() {
  await handleValidate()
  emit('submit')
}
</script>

<template>
  <div class="three">
    <el-card shadow="never" v-if="form.way == 1">
      <AIChat v-model="form" @submit="handleSubmit" v-if="form.id"></AIChat>
    </el-card>
    <el-card shadow="never">
      <template #header>内容创作</template>
      <el-form label-suffix="：" inline class="info-form">
        <el-form-item label="内容名称">{{ form.name }}</el-form-item>
        <el-form-item label="内容类型">{{ typeName }}</el-form-item>
        <el-form-item label="创作方式">{{ getNameByValue(form.way, materialMethodList) }}</el-form-item>
      </el-form>
      <el-divider></el-divider>
      <el-form :model="form" :rules="rules" ref="formRef" :disabled="action === 'view'">
        <el-form-item prop="content">
          <template v-if="form.type == 1">
            <!-- 文本 -->
            <el-input type="textarea" :rows="14" v-model="form.content"></el-input>
          </template>
          <template v-if="['2', '6', '7', '8'].includes(form.type)">
            <!-- 图片|二维码|小程序｜卡券 -->
            <template v-if="form.way == 3">
              <ImageDesign v-model="form.content" :kindId="parseInt(form.scenario_type)"></ImageDesign>
            </template>
            <template v-else>
              <AppUpload v-model="form.content" accept="image/*"></AppUpload>
            </template>
          </template>
          <template v-if="form.type == 3">
            <!-- 语音 -->
            <div>
              <AppUpload v-model="form.content" accept=".mp3">
                <el-button type="primary">上传语音</el-button>
              </AppUpload>
              <audio :src="form.content" controls v-if="form.content"></audio>
            </div>
          </template>
          <template v-if="form.type == 4">
            <!-- 视频 -->
            <div>
              <AppUpload v-model="form.content" accept=".mp4">
                <el-button type="primary">上传视频</el-button>
              </AppUpload>
              <video controls :src="form.content" style="max-width: 600px; width: 100%" v-if="form.content"></video>
            </div>
          </template>
          <template v-if="form.type == 5">
            <el-input v-model="form.content" placeholder="请输入">
              <template #prepend>https://</template>
              <template #append v-if="form.content">
                <a :href="form.content" target="_blank">查看</a>
              </template>
            </el-input>
          </template>
        </el-form-item>
      </el-form>

      <el-row justify="center">
        <el-button type="primary" @click="handlePrev">上一步</el-button>
        <el-button type="primary" @click="handleSubmit" v-if="action !== 'view'">提交</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<style lang="scss">
.info-form {
  display: flex;
  justify-content: space-evenly;
  .el-form-item {
    margin-bottom: 0;
  }
}
.three {
  display: flex;
  gap: 20px;
  .el-card {
    flex: 1;
  }
}
</style>
