<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'

import { ElMessage } from 'element-plus'
import { useMapStore } from '@/stores/map'
import { useUserStore } from '@/stores/user'

import { useProjectList } from '@/composables/useGetProjectList'
import { getSemDetail, addSem, updateSem } from '../api'
const store = useMapStore()
const userStore = useUserStore()
const emit = defineEmits<Emits>()
const ruleFormRef = ref<FormInstance>()
const departmentList: any = useProjectList('', '79806610719731712').departmentList
const statusList = store.getMapValuesByKey('system_status')

const form: any = reactive({
  name: '',
  organ_id: '',
  start_time: '',
  end_time: '',
  length: '',
  status: '1'
})
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入学期名称', trigger: 'blur' }],
  organ_id: [{ required: true, message: '请选择所属部门/学校', trigger: 'change' }],
  status: [{ required: true, message: '请选择生效状态', trigger: 'change' }]
})
const props = defineProps({
  isShowAddSemDialog: {
    type: Boolean
  },
  title: {
    type: String
  },
  id: {
    type: String
  },
  isEdit: {
    type: String
  }
})
interface Emits {
  (e: 'update:isShowAddSemDialog', isShowAddSemDialog: boolean): void
  (e: 'create'): void
}
if (userStore.roles[0].name !== '超级管理员') {
  form.organ_id = userStore.organization?.id
}
// 取消
const handleCancel = () => {
  emit('update:isShowAddSemDialog', false)
}
// 确定
const handleConfirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      if (props.isEdit === '0') {
        form.organ_id = form.organ_id || userStore.organization?.id

        const params: any = Object.assign({}, form)
        addSem(params).then(() => {
          ElMessage.success('新增学期成功')
          emit('update:isShowAddSemDialog', false)
          emit('create')
        })
      } else if (props.isEdit === '1') {
        form.organ_id = form.organ_id || userStore.organization?.id

        const params: any = Object.assign({ id: props.id }, form)
        updateSem(params).then(() => {
          ElMessage.success('更新学期成功')
          emit('update:isShowAddSemDialog', false)
          emit('create')
        })
      } else {
        emit('update:isShowAddSemDialog', false)
        emit('create')
      }
    }
  })
}
// 获取详情
if (props.isEdit === '2' || props.isEdit === '1') {
  const params: any = { id: props.id }
  getSemDetail(params).then((res: any) => {
    Object.keys(form).forEach(key => {
      form[key] = res.data[key]
    })
  })
}
</script>
<template>
  <el-dialog :model-value="isShowAddSemDialog" draggable :before-close="handleCancel" :title="props.title" width="30%">
    <el-form :model="form" label-position="right" label-width="auto" :rules="rules" ref="ruleFormRef" label-suffix="：">
        <el-form-item label="学期名称" prop="name">
          <el-input v-model="form.name" :disabled="props.isEdit === '2'"></el-input>
        </el-form-item>
        <el-form-item label="所属部门/学校" prop="organ_id">
          <el-select
            clearable
            v-model="form.organ_id"
            :disabled="props.isEdit === '2'"
            style="width: 100%"
            v-if="userStore.roles[0].name === '超级管理员'"
            placeholder="请选择所属部门/学校"
          >
            <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-input :placeholder="userStore.organization?.name" v-model="form.organ_id_name" v-else disabled>
          </el-input>
        </el-form-item>
        <el-form-item label="学期开始日期" prop="start_time">
          <el-date-picker
            v-model="form.start_time"
            type="date"
            placeholder="学期开始日期"
            :disabled="props.isEdit === '2'"
          />
        </el-form-item>
        <el-form-item label="学期结束日期" prop="end_time">
          <el-date-picker
            v-model="form.end_time"
            type="date"
            placeholder="学期结束日期"
            :disabled="props.isEdit === '2'"
          />
        </el-form-item>
        <el-form-item label="教学周" prop="length">
          <el-input v-model="form.length" :disabled="props.isEdit === '2'"></el-input>
        </el-form-item>
        <el-form-item label="生效状态" prop="status">
          <el-radio-group v-model="form.status" :disabled="props.isEdit === '2'">
            <el-radio v-for="(item, id) in statusList" :key="id" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    <template #footer v-if="props.isEdit !== '2'">
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm(ruleFormRef)">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
