<script setup lang="ts">
import { createTeacher } from '../api'
import VEditor from '@/components/tinymce/Index.vue'
import AppUpload from '@/components/base/AppUpload.vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useMapStore } from '@/stores/map'

const store = useMapStore()
const levelList = store.getMapValuesByKey('teacher_level')

const router = useRouter()
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive({
  id: '',
  status: '1',
  name: '', // 姓名
  title: '', // 职位
  education: '', // 学历
  office: '', // 讲师任职机构
  avatar: '', // 头像
  summarize: '' // 讲师简介
})
const rules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: '请输入讲师姓名',
      trigger: 'blur'
    }
  ],
  title: [
    {
      required: true,
      message: '请输入讲师职位',
      trigger: 'blur'
    }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      if (ruleForm.education !== '') {
        ruleForm.education = store
          .getMapValuesByKey('teacher_level')
          .filter(item => item.value === ruleForm.education)[0].label
      }
      const params = Object.assign({}, ruleForm)
      createTeacher(params).then(() => {
        ElMessage.success('创建讲师成功')
        router.push('/admin/teacher')
      })
    }
  })
}
</script>

<template>
  <AppCard title="添加讲师">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      label-suffix="："
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="讲师姓名" prop="name">
            <el-input v-model="ruleForm.name" style="width: 300px" placeholder="请输入讲师姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="讲师职位" prop="title">
            <el-input v-model="ruleForm.title" style="width: 300px" placeholder="请输入讲师职位" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="讲师学历" prop="education">
            <el-select v-model="ruleForm.education" clearable style="width: 300px" placeholder="请选择讲师学历">
              <el-option v-for="(item, index) in levelList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="讲师任职机构" prop="office">
            <el-input v-model="ruleForm.office" style="width: 300px" placeholder="请输入讲师任职机构" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="讲师头像" prop="avatar">
            <AppUpload v-model="ruleForm.avatar" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="讲师简介" prop="summarize">
            <v-editor v-model="ruleForm.summarize" class="editor" style="width: 1000px"></v-editor>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      </el-form-item>
    </el-form>
  </AppCard>
</template>
