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

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: '请输入内容名称' }]
})

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
}
</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="way">
        <el-radio-group v-model="form.way">
          <el-radio v-for="item in materialMethodList" :key="item.value" :value="item.value" :disabled="wayDisabled(item, form.type)">{{
            item.label
          }}</el-radio>
        </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>
