<script setup>
import { useMapStore } from '@/stores/map'
import { useConnection } from '../composables/useConnection'
import { useIndustry } from '../composables/useIndustry'
import {
  getNameByValue,
  materialMethodList,
  materialUsageList,
  materialDesignUsageList,
  materialUsersList,
  materialPictureStyleList,
  textPurposeList,
} from '@/utils/dictionary'

defineProps(['action'])

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

const materialType = useMapStore().getMapValuesByKey('experiment_marketing_material_type')
const { connectionList } = useConnection()
const { industryList } = useIndustry()
const form = defineModel()

const formRef = ref()

const rules = ref({
  industry_id: [{ required: true, message: '请选择所属行业' }],
  scenario_type: [{ required: true, message: '请选择使用场景' }],
  personnel_type: [{ required: true, message: '请选择使用人员' }],
  channel: [{ required: true, message: '请选择内容投放渠道' }],
  'extend_info.text_count': [{ required: true, message: '请选择文本字数' }],
  'extend_info.picture_style': [{ required: true, message: '请选择图片风格' }],
  'extend_info.person_des': [{ required: true, message: '请输入人物描述' }],
  'extend_info.scene_des': [{ required: true, message: '请输入场景描述' }],
  'extend_info.important_info_desc': [{ required: true, message: '请输入突出重点信息描述' }],
  'extend_info.text_use': [{ required: true, message: '请选择文本用途' }],
})

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

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

async function handleNext() {
  await handleValidate()
  emit('next')
}
</script>

<template>
  <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="内容类型">{{ getNameByValue(form.type, materialType) }}</el-form-item>
      <el-form-item label="创作方式">{{ getNameByValue(form.way, materialMethodList) }}</el-form-item>
    </el-form>
    <el-divider></el-divider>
    <el-form
      label-suffix="："
      label-width="130"
      :model="form"
      :rules="rules"
      ref="formRef"
      :disabled="action === 'view'">
      <template v-if="form.type == 2 && form.way == 1">
        <!-- 图片AI -->
        <el-form-item label="图片风格" prop="extend_info.picture_style">
          <el-radio-group v-model="form.extend_info.picture_style">
            <el-radio v-for="item in materialPictureStyleList" :key="item.id" :value="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="人物描述" prop="extend_info.person_des">
          <el-input type="textarea" :rows="3" v-model="form.extend_info.person_des" />
        </el-form-item>
        <el-form-item label="场景描述" prop="extend_info.scene_des">
          <el-input type="textarea" :rows="3" v-model="form.extend_info.scene_des" />
        </el-form-item>
        <el-form-item label="突出重点信息描述" prop="extend_info.important_info_desc">
          <el-input type="textarea" :rows="3" v-model="form.extend_info.important_info_desc" />
        </el-form-item>
      </template>
      <template v-else-if="form.way == 3">
        <el-form-item label="所属行业" prop="industry_id">
          <el-select v-model="form.industry_id">
            <el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.id + ''"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用场景" prop="extend_info.scenario_type">
          <el-radio-group v-model="form.extend_info.scenario_type">
            <el-radio v-for="item in materialDesignUsageList" :key="item.id" :value="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item label="文本用途" prop="extend_info.text_use">
          <el-radio-group v-model="form.extend_info.text_use">
            <el-radio v-for="item in textPurposeList" :key="item.id" :value="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属行业" prop="industry_id">
          <el-select v-model="form.industry_id">
            <el-option v-for="item in industryList" :key="item.id" :label="item.name" :value="item.id + ''"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用场景" prop="scenario_type">
          <el-radio-group v-model="form.scenario_type">
            <el-radio v-for="item in materialUsageList" :key="item.id" :value="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="使用人员" prop="personnel_type">
          <el-radio-group v-model="form.personnel_type">
            <el-radio v-for="item in materialUsersList" :key="item.id" :value="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容投放渠道" prop="channel">
          <el-radio-group v-model="form.channel">
            <el-radio v-for="item in connectionList" :key="item.id" :value="item.id">{{ item.type_name }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文本字数" prop="extend_info.text_count" v-if="form.type == 1 && form.way == 1">
          <el-radio-group v-model="form.extend_info.text_count">
            <template v-if="form.extend_info.text_use !== '2' && form.extend_info.text_use !== '3'">
              <el-radio :value="50">50</el-radio>
              <el-radio :value="100">100</el-radio>
            </template>
            <template v-if="form.extend_info.text_use === '2'">
              <el-radio :value="300">300</el-radio>
              <el-radio :value="500">500</el-radio>
              <el-radio :value="1000">1000</el-radio>
            </template>
            <template v-if="form.extend_info.text_use === '3'">
              <el-radio :value="500">500</el-radio>
              <el-radio :value="1000">1000</el-radio>
            </template>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关键点" prop="key_points">
          <el-input
            type="textarea"
            :rows="4"
            v-model="form.key_points"
            placeholder="请输入内容的核心内容或者关键点，多个请使用英文“,”号进行隔离。" />
        </el-form-item>
      </template>
    </el-form>
    <el-row justify="center">
      <el-button type="primary" @click="handlePrev">上一步</el-button>
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </el-row>
  </el-card>
</template>

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