<script setup lang="ts">
import { ref, reactive } from "vue";
import { formRules } from "./rules";
import type { FormInstance, FormRules } from "element-plus";
import { FormItemProps } from "../utils/types";

const props = withDefaults(defineProps<FormItemProps>(), {
  id: 0,
  parentId: 0,
  permissionName: "",
  permissionCode: "",
  permissionType: 1,
  path: "",
  component: "",
  icon: "",
  apiUrl: "",
  apiMethod: "",
  sortOrder: 0,
  visible: 1,
  status: 1
});

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<FormItemProps>({ ...props });

const getRef = () => ruleFormRef.value;

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="formRules as FormRules"
    label-width="100px"
  >
    <el-form-item label="权限名称" prop="permissionName">
      <el-input
        v-model="ruleForm.permissionName"
        placeholder="请输入权限名称"
        clearable
      />
    </el-form-item>
    <el-form-item label="权限编码" prop="permissionCode">
      <el-input
        v-model="ruleForm.permissionCode"
        placeholder="请输入权限编码"
        clearable
      />
    </el-form-item>
    <el-form-item label="权限类型" prop="permissionType">
      <el-radio-group v-model="ruleForm.permissionType">
        <el-radio :label="1">菜单</el-radio>
        <el-radio :label="2">按钮</el-radio>
        <el-radio :label="3">接口</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="路由路径" prop="path">
      <el-input
        v-model="ruleForm.path"
        placeholder="请输入路由路径"
        clearable
      />
    </el-form-item>
    <el-form-item label="组件路径" prop="component">
      <el-input
        v-model="ruleForm.component"
        placeholder="请输入组件路径"
        clearable
      />
    </el-form-item>
    <el-form-item label="图标" prop="icon">
      <el-input
        v-model="ruleForm.icon"
        placeholder="请输入图标类名"
        clearable
      />
    </el-form-item>
    <el-form-item label="API地址" prop="apiUrl">
      <el-input
        v-model="ruleForm.apiUrl"
        placeholder="请输入API地址"
        clearable
      />
    </el-form-item>
    <el-form-item label="请求方法" prop="apiMethod">
      <el-select
        v-model="ruleForm.apiMethod"
        placeholder="请选择请求方法"
        clearable
        class="w-full"
      >
        <el-option label="GET" value="GET" />
        <el-option label="POST" value="POST" />
        <el-option label="PUT" value="PUT" />
        <el-option label="DELETE" value="DELETE" />
      </el-select>
    </el-form-item>
    <el-form-item label="排序" prop="sortOrder">
      <el-input-number
        v-model="ruleForm.sortOrder"
        :min="0"
        :max="999"
        controls-position="right"
        class="w-full"
      />
    </el-form-item>
    <el-form-item label="是否可见" prop="visible">
      <el-radio-group v-model="ruleForm.visible">
        <el-radio :label="1">可见</el-radio>
        <el-radio :label="0">隐藏</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-radio-group v-model="ruleForm.status">
        <el-radio :label="1">启用</el-radio>
        <el-radio :label="0">禁用</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
