<script setup>
import { useMapStore } from '@/stores/map'
import { materialMethodList } from '@/utils/dictionary'
import { useQuestion } from '@/composables/useQuestion'

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

defineProps(['action'])

const emit = defineEmits(['next'])

const form = defineModel()

const formRef = ref()

const rules = ref({
  type: [{ required: true, message: '请选择营销内容类型' }],
  name: [{ required: true, message: '请输入内容名称' }],
  teacher_id: [{ required: true, message: '请选择老师标签' }],
})

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

async function handleNext() {
  await handleValidate()
  emit('next')
}

function wayDisabled(item, type) {
  if (item.value == 1) {
    return !['1', '2'].includes(type)
  }
  if (item.value == 3) {
    return !['2', '8'].includes(type)
  }
  return false
}
const questionType = computed(() => {
  const questionTypes = {
    1: '401',
    2: '402',
    3: '403',
    4: '404',
    5: '405',
    6: '406',
    7: '407',
    8: '408',
  }
  return questionTypes[form.value.type]
})

const { hasQuestion, teacherMaterialList } = useQuestion(questionType, form.value.type)
</script>

<template>
  <el-card shadow="never">
    <template #header>基础信息</template>
    <el-form
      label-suffix="："
      label-width="130"
      :model="form"
      :rules="rules"
      ref="formRef"
      :disabled="action === 'view'">
      <el-form-item label="营销内容类型" prop="type">
        <el-radio-group v-model="form.type" :disabled="action === 'update'" @change="form.way = '2'">
          <el-radio
            v-for="item in materialType"
            :key="item.id"
            :value="item.value"
            :disabled="$route.query.type ? item.value !== $route.query.type : false"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="内容名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入内容名称" />
      </el-form-item>
      <el-form-item label="匹配老师标签" prop="teacher_id" v-if="hasQuestion">
        <el-select v-model="form.teacher_id" style="width: 100%">
          <el-option v-for="item in teacherMaterialList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创作方式" prop="way">
        <el-radio-group v-model="form.way">
          <template v-for="item in materialMethodList" :key="item.value">
            <el-radio :value="item.value" v-show="!wayDisabled(item, form.type)">{{ item.label }}</el-radio>
          </template>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-row justify="center">
      <el-button type="primary" @click="handleNext">下一步</el-button>
    </el-row>
  </el-card>
</template>
