<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import type { FormRules } from "element-plus";
import { getDepartmentListAPI } from "@/api/system";
import type { DepartmentInfo } from "types/system";
import { usePublicHooks } from "../../hooks";

defineOptions({
  name: "SystemRoleForm"
});

/** 自定义表单规则校验 */
const formRules = reactive<FormRules>({
  name: [{ required: true, message: "角色名称为必填项", trigger: "blur" }],
  code: [{ required: true, message: "角色标识为必填项", trigger: "blur" }]
});
interface FormItemProps {
  /**角色ID */
  id: string;
  /** 角色名称 */
  name: string;
  /** 角色编号 */
  code: string;
  /**角色状态 */
  status: number;
  /** 角色描述 */
  description: string;
  /** 角色部门ID */
  department_id: string;
}
interface FormProps {
  formInline: FormItemProps;
}
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    name: "",
    code: "",
    description: "",
    status: 1,
    department_id: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const departments = ref<DepartmentInfo[]>([]);
const { switchStyle } = usePublicHooks();
function getRef() {
  return ruleFormRef.value;
}
/**获取部门列表 */
const getDepartments = async () => {
  const res = await getDepartmentListAPI({ page: 1, pageSize: 9999 });
  if (res.code === 200) {
    departments.value = formatHigherOptions(res.data.result);
  } else {
    departments.value = [];
  }
};
const formatHigherOptions = treeList => {
  // 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示
  if (!treeList || !treeList.length) return;
  const newTreeList = [];
  for (let i = 0; i < treeList.length; i++) {
    treeList[i].disabled = treeList[i].status === 0 ? true : false;
    formatHigherOptions(treeList[i].children);
    newTreeList.push(treeList[i]);
  }
  return newTreeList;
};
defineExpose({ getRef });
/**组件挂载执行 */
onMounted(async () => {
  await getDepartments();
});
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-form-item label="角色名称" prop="name">
      <el-input
        v-model="newFormInline.name"
        clearable
        placeholder="请输入角色名称"
      />
    </el-form-item>

    <el-form-item label="角色标识" prop="code">
      <el-input
        v-model="newFormInline.code"
        clearable
        placeholder="请输入角色标识"
      />
    </el-form-item>

    <el-form-item label="角色描述">
      <el-input
        v-model="newFormInline.description"
        placeholder="请输入角色描述信息"
      />
    </el-form-item>
    <el-form-item label="所属部门" prop="department_id">
      <el-cascader
        v-model="newFormInline.department_id"
        class="w-full"
        :options="departments"
        :props="{
          value: 'id',
          label: 'name',
          emitPath: false,
          checkStrictly: true
        }"
        clearable
        filterable
        placeholder="请选择所属部门~"
      >
        <template #default="{ node, data }">
          <span>{{ data.name }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </el-cascader>
    </el-form-item>
    <el-form-item label="角色状态" prop="status">
      <el-switch
        v-model="newFormInline.status"
        inline-prompt
        :active-value="1"
        :inactive-value="0"
        active-text="启用"
        inactive-text="停用"
        :style="switchStyle"
      />
    </el-form-item>
  </el-form>
</template>
