<template>
  <n-drawer
    v-model:show="state.isDrawer"
    :width="props.width"
    :placement="state.placement"
  >
    <n-drawer-content :title="props.title" closable>
      <n-form
        :model="state.formParams"
        :rules="rules"
        ref="formRef"
        label-placement="left"
        :label-width="100"
      >
        <!-- path -->
        <n-form-item label="path" path="subtitle">
          <n-input v-model:value="state.formParams.path" />
        </n-form-item>
        <!-- 组件 -->
        <n-form-item label="component" path="subtitle">
          <n-input v-model:value="state.formParams.component" />
        </n-form-item>
        <!-- name -->
        <n-form-item label="name" path="subtitle">
          <n-input v-model:value="state.formParams.name" />
        </n-form-item>
        <!-- icon -->
        <n-form-item label="icon" path="subtitle">
          <n-input v-model:value="state.formParams.icon" />
        </n-form-item>
        <!-- redirect -->
        <n-form-item label="redirect" path="subtitle">
          <n-input v-model:value="state.formParams.redirect" />
        </n-form-item>
        <!-- tilte -->
        <n-form-item label="tilte" path="label">
          <n-input v-model:value="state.formParams.title" />
        </n-form-item>
        <!-- frameSrc -->
        <n-form-item label="frameSrc" path="label">
          <n-input v-model:value="state.formParams.frameSrc" />
        </n-form-item>

        <div style="display: flex; flex-wrap: wrap; align-items: center">
          <!-- affix -->
          <n-form-item label="affix">
            <n-switch v-model:value="state.formParams.affix" />
          </n-form-item>
          <!-- isRoot -->
          <n-form-item label="isRoot">
            <n-switch v-model:value="state.formParams.isRoot" />
          </n-form-item>
          <!-- keepAlive -->
          <n-form-item label="keepAlive">
            <n-switch v-model:value="state.formParams.keepAlive" />
          </n-form-item>
          <!-- disabled -->
          <n-form-item label="disabled">
            <n-switch v-model:value="state.formParams.disabled" />
          </n-form-item>
          <!-- alwaysShow -->
          <n-form-item label="alwaysShow">
            <n-switch v-model:value="state.formParams.alwaysShow" />
          </n-form-item>
          <!-- hidden -->
          <n-form-item label="hidden">
            <n-switch v-model:value="state.formParams.hidden" />
          </n-form-item>
        </div>
        <!-- activeMenu -->
        <n-form-item label="activeMenu">
          <n-input v-model:value="state.formParams.activeMenu" />
        </n-form-item>

        <n-form-item label="permissions" path="auth">
          <n-input v-model:value="state.formParams.permissions" />
        </n-form-item>

        <n-form-item label="sort">
          <n-input v-model:value="state.formParams.sort" />
        </n-form-item>
      </n-form>

      <template #footer>
        <n-space>
          <n-button
            type="primary"
            :loading="state.subLoading"
            @click="formSubmit"
            >提交</n-button
          >
          <n-button @click="handleReset">重置</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
import { insertMenu } from "@/api/system";
const props = defineProps({
  title: {
    type: String,
    default: "添加顶级菜单",
  },
  width: {
    type: Number,
    default: 500,
  },
  parentId: {
    type: Number,
    default: 0,
  },
});

watch(
  () => props.parentId,
  (newParentId) => {
    state.formParams.parentId = newParentId;
  }
);

const rules = {};

const formRef = ref();
const defaultValueRef = () => ({
  path: "",
  name: "",
  component: "",
  redirect: "",
  title: "",
  icon: "",
  sort: null,
  keepAlive: false,
  hidden: false,
  disabled: false,
  alwaysShow: false,
  activeMenu: "",
  isRoot: false,
  affix: false,
  frameSrc: "",
  permissions: null,
  parentId: 0,
});

const state = reactive({
  isDrawer: false,
  subLoading: false,
  formParams: defaultValueRef(),
  placement: "right" as const,
});

console.log(state.formParams, "123");

const openDrawer = () => {
  state.isDrawer = true;
};

const closeDrawer = () => {
  state.isDrawer = false;
};

const formSubmit = () => {
  formRef.value.validate(async (errors: any) => {
    if (!errors) {
      const res = await insertMenu(state.formParams);
      console.log(res);
      handleReset();
      closeDrawer();
    } else {
      // 处理错误逻辑
    }
  });
};

const handleReset = () => {
  formRef.value.restoreValidation();
  state.formParams = Object.assign(state.formParams, defaultValueRef());
};

defineExpose({
  openDrawer,
  closeDrawer,
});
</script>
