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

const store = useMapStore()
const router = useRouter()
const route = useRoute()
const appList = ref()
const levelList = computed(() => {
  return store.getMapValuesByKey('teacher_level')
})
const imgDefault = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
const courseList = ref([])
const id = route.query.id as string
const title = route.query.title as string
const isEdit = route.query.isEdit as string
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  id: '',
  name: '',
  title: '', // 职位
  education: '', // 学历
  office: '', // 讲师任职机构
  summarize: '', // 讲师简介
  avatar: '', //讲师图片
  status: '1'
})
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入讲师姓名', trigger: 'blur' }],
  title: [{ required: true, message: '  请输入职位', trigger: 'blur' }]
})
const listOptions = computed(() => {
  return {
    remote: {
      params: { type: '' }
    },
    columns: [
      { label: '#', type: 'index', align: 'center' },
      { label: '课程图片', slots: 'table-img', align: 'center' },
      { label: '课程名称', prop: 'name', align: 'center' },
      { label: '分类名称', prop: 'classification_name', align: 'center' },
      { label: '线上类型', prop: 'online_type_name', align: 'center' },
      { label: '选课类型', prop: 'elective_type_name', align: 'center' },
      { label: '课程学分', prop: 'credit', align: 'center' },
      { label: '是否可用', prop: 'status_name', align: 'center' },
      { label: '创建时间', prop: 'created_time', align: 'center' },
      { label: '编辑', prop: 'created_operator_name', align: 'center' },
      { label: '操作', slots: 'table-operate', width: 300, align: 'center', fixed: 'right' }
    ],
    data: courseList.value
  }
})

const getTeacherInfo = () => {
  getTeacherDetail({ id: id }).then(res => {
    courseList.value = res.data.course_list
    Object.keys(ruleForm).forEach(key => {
      ruleForm[key] = res.data[key]
    })
    if (ruleForm.avatar === '') {
      ruleForm.avatar = imgDefault
    }
  })
}
// 更新讲师
const handleUpdate = 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.label === ruleForm.education)[0].label
      } else {
        ruleForm.education = ''
      }
      if (ruleForm.avatar === '') {
        ruleForm.avatar = imgDefault
      }
      const params = Object.assign({}, ruleForm)

      updateTeacher(params).then(() => {
        ElMessage.success('更新讲师成功')
        router.push('/admin/teacher')
      })
    }
  })
}

onMounted(() => {
  // 更新获取讲师信息
  getTeacherInfo()
})
</script>

<template>
  <AppCard :title="title">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-position="right" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="讲师图片:" prop="avatar">
            <el-image v-if="isEdit === '1'" :src="ruleForm.avatar || imgDefault" class="avatar_box1" fit="contain" />
            <AppUpload v-model="ruleForm.avatar" v-else />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-left: 80px">
          <el-form-item label="讲师姓名:" prop="name">
            <el-input v-model="ruleForm.name" :disabled="isEdit === '1'" />
          </el-form-item>
          <el-form-item label="讲师职位:" prop="title">
            <el-input v-model="ruleForm.title" :disabled="isEdit === '1'" />
          </el-form-item>
          <el-form-item label="讲师学历:" prop="education">
            <el-select
              v-model="ruleForm.education"
              clearable
              style="width: 250px"
              placeholder="请选择讲师学历"
              :disabled="isEdit === '1'"
            >
              <el-option v-for="(item, index) in levelList" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="讲师任职机构:" prop="office">
            <el-input v-model="ruleForm.office" :disabled="isEdit === '1'" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="讲师简介:" prop="summarize">
        <v-editor v-model="ruleForm.summarize" style="width: 70%" :disabled="isEdit === '1'"></v-editor>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-if="isEdit !== '1'" @click="handleUpdate(ruleFormRef)">保存</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <div class="form_title">讲授课程：</div>
      <AppList v-bind="listOptions" ref="appList" border stripe>
        <template #table-img="{ row }">
          <img :src="row.cover" style="width: 100px; display: block" />
        </template>
        <template #table-operate="{ row }">
          <el-space>
            <router-link :to="`/course/my/view?id=${row.id}`" v-if="row.auth_view">
              <el-link type="primary" plain>查看</el-link>
            </router-link>
          </el-space>
        </template>
      </AppList>
    </el-card>
  </AppCard>
</template>
<style lang="scss" scoped>
.form_title {
  font-size: 14px;
  color: #606266;
}
.avatar_box {
  width: 150px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  color: #ccc;
  border: 1px dashed #ccc;
}
.avatar_box1 {
  max-width: 150px;
  height: 200px;
}
</style>
