<!-- 
 * @Description: 表单
 * @Author: huguodong 
 * @Date: 2023-12-15 15:45:28
!-->
<template>
  <div>
    <form-container v-model="visible" :title="`${majorProps.opt}专业`" form-size="600px">
      <el-form
        ref="majorFormRef"
        :rules="rules"
        :disabled="majorProps.disabled"
        :model="majorProps.record"
        :hide-required-asterisk="majorProps.disabled"
        label-width="auto"
        label-suffix=" :"
      >
        <s-form-item label="专业编号" prop="code">
          <s-input v-model="majorProps.record.code"></s-input>
        </s-form-item>
        <s-form-item label="专业名称" prop="name">
          <s-input v-model="majorProps.record.name"></s-input>
        </s-form-item>
        <s-form-item label="所属院系" prop="depId">
          <s-select v-model="majorProps.record.depId" :options="treeData" label="name" value="id"></s-select>
          <!-- <org-selector v-model:org-value="majorProps.record.depId" :org-tree-api="userManageDepartmentApi.list" :show-all="false" /> -->
        </s-form-item>
        <s-form-item label="专业简介" prop="introduce">
          <s-input v-model="majorProps.record.introduce" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"></s-input>
        </s-form-item>
        <s-form-item label="排序" prop="sort">
          <el-slider v-model="majorProps.record.sort" show-input :min="0" />
        </s-form-item>
      </el-form>
      <template #footer>
        <el-button @click="onClose"> 取消 </el-button>
        <el-button v-show="!majorProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
      </template>
    </form-container>
  </div>
</template>

<script setup lang="ts">
import { SysMajor, userManageMajorApi, userManageDepartmentApi } from "@/api";
import { FormOptEnum, SysDictEnum } from "@/enums";
import { required } from "@/utils/formRules";
import { FormInstance } from "element-plus";
import { useDictStore } from "@/stores/modules";

const visible = ref(false); //是否显示表单
const dictStore = useDictStore(); //字典仓库
const treeData = ref<any>([]);
const getRequestData = async () => {
  const { data } = await userManageDepartmentApi.list({});
  treeData.value = data;
};
// 表单参数
const majorProps = reactive<FormProps.Base<any>>({
  opt: FormOptEnum.ADD,
  record: {},
  disabled: false
});

// 表单验证规则
const rules = reactive({
  code: [required("请输入专业编号")],
  name: [required("请输入专业名称")],
  depId: [required("请选择所属院系")],
  introduce: [required("请输入专业简介")]
});

/**
 * 打开表单
 * @param props 表单参数
 */
function onOpen(props: FormProps.Base<SysMajor.MajorInfo>) {
  getRequestData();
  Object.assign(majorProps, props); //合并参数
  if (props.opt == FormOptEnum.ADD) {
    //如果是新增,设置默认值
    // majorProps.record.sortCode = 99;
    // majorProps.record.status = statusOptions[0].value;
  }
  visible.value = true; //显示表单
  if (props.record.id) {
    majorProps.record = props.record;
    //如果传了id，就去请求api获取record

    userManageMajorApi.detail({ id: props.record.id }).then(res => {
      majorProps.record = res.data;
    });
  }
}

// 提交数据（新增/编辑）
const majorFormRef = ref<FormInstance>();
/** 提交表单 */
async function handleSubmit() {
  majorFormRef.value?.validate(async valid => {
    if (!valid) return; //表单验证失败
    console.log(majorProps);
    // return;
    //提交表单
    if (majorProps.opt == FormOptEnum.ADD) {
      await userManageMajorApi
        .add(majorProps.record, majorProps.record.id != undefined)
        .then(() => {
          majorProps.successful!(); //调用父组件的successful方法
        })
        .finally(() => {
          onClose();
        });
    } else {
      await userManageMajorApi
        .update(majorProps.record, majorProps.record.id != undefined)
        .then(() => {
          majorProps.successful!(); //调用父组件的successful方法
        })
        .finally(() => {
          onClose();
        });
    }
  });
}

/** 关闭表单*/
function onClose() {
  visible.value = false;
}

// 暴露给父组件的方法
defineExpose({
  onOpen
});
</script>

<style lang="scss" scoped></style>
