<template>
  <vxe-modal
    resize
    v-model="showModal"
    :title="modalTitle"
    @hide="onHide"
    width="800px"
    show-maximize
    show-footer
    esc-closable
  >
    <el-form ref="formRef" :model="form" inline label-width="80px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item class="w-full" label="菜单类型" prop="type">
            <el-radio-group v-model="form.type">
              <el-radio-button label="一级菜单" value="0" />
              <el-radio-button label="子菜单" value="1" />
              <el-radio-button label="按钮" value="2" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="form.type != '0'">
          <el-form-item class="w-full" label="父级菜单" prop="parent">
            <el-tree-select
              ref="treeSelectRef"
              v-model="form.parent"
              :data="props.menuList"
              highlight-current
              check-strictly
              :current-node-key="form.parent"
              :props="{
                label: 'title',
                children: 'children',
              }"
              node-key="id"
              :render-after-expand="false"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="w-full" label="菜单名称" prop="title">
            <el-input v-model="form.title" placeholder="标题" />
          </el-form-item>
        </el-col>
        <template v-if="form.type != '2'">
          <el-col :span="12">
            <el-form-item class="w-full" label="访问路径" prop="path">
              <el-input v-model="form.path" placeholder="访问路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="菜单图标" prop="icon">
              <el-input v-model="form.icon" placeholder="菜单图标" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="重定向" prop="redirect">
              <el-input v-model="form.redirect" placeholder="重定向路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="菜单Name" prop="name">
              <el-input v-model="form.name" placeholder="菜单Name" />
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="12">
          <el-form-item class="w-full" label="权限编码" prop="code">
            <el-input v-model="form.code" placeholder="权限编码" />
          </el-form-item>
        </el-col>
        <template v-if="form.type != '2'">
          <el-col :span="12">
            <el-form-item class="w-full" label="组件路径" prop="component">
              <el-input v-model="form.component" placeholder="组件路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="外链地址" prop="link">
              <el-input v-model="form.link" placeholder="外链地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="w-full" label="显示菜单" prop="activeMenu">
              <el-input v-model="form.activeMenu" placeholder="显示菜单路径" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否隐藏" prop="hide">
              <el-checkbox v-model="form.hide" true-value="Y" false-value="N" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否全屏" prop="full">
              <el-checkbox v-model="form.full" true-value="Y" false-value="N" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否固定" prop="affix">
              <el-checkbox v-model="form.affix" true-value="Y" false-value="N" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否缓存" prop="keepAlive">
              <el-checkbox v-model="form.keepAlive" true-value="Y" false-value="N" />
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>

    <template #footer>
      <el-button type="default" @click="showModal = false">取消</el-button>
      <el-button :loading="loading" type="primary" @click="submitForm">提交</el-button>
    </template>
  </vxe-modal>
</template>

<script setup name="menuFormModal">
  import { ref, computed } from 'vue';
  import { saveMenu } from '@/api/menu';
  import { ElMessage } from 'element-plus';

  const emits = defineEmits(['success']);
  const props = defineProps({
    menuList: {
      type: Array,
      default: () => [],
    },
  });
  const currentMenu = ref(null);
  const showModal = ref(false);
  const formRef = ref(null);
  const treeSelectRef = ref(null);
  const loading = ref(false);

  const isEdit = computed(() => !!currentMenu.value);
  const modalTitle = computed(() => (isEdit.value ? '编辑菜单' : '新增菜单'));

  const form = ref({
    type: '0',
    parent: null,
    path: '', // 访问路径
    name: '', // 组件 name
    component: '', // 组件路径
    redirect: '', // 重定向
    code: '', // 权限编码
    icon: '', // icon
    title: '', // 标题
    link: '', // 外链地址,
    hide: 'N', // 是否隐藏
    full: 'N', // 是否全屏
    affix: 'N', // 是否固定
    activeMenu: '', // 选中菜单的地址
    keepAlive: 'Y', // 是否缓存
    sortNo: 1,
  });

  const submitForm = async () => {
    const params = {
      ...form.value,
      parent: form.value.type == '0' ? null : treeSelectRef.value.getCurrentNode(),
    };
    try {
      await formRef.value.validate();

      loading.value = true;
      await saveMenu(params);

      ElMessage({
        type: 'success',
        message: isEdit.value ? '修改成功！' : '新增成功！',
        plain: true,
      });
      emits('success');
      showModal.value = false;
    } catch {}
    loading.value = false;
  };
  const onHide = () => {
    form.value = {
      type: 'first',
      parent: '',
      path: '', // 访问路径
      name: '', // 组件 name
      component: '', // 组件路径
      redirect: '', // 重定向
      code: '', // 权限编码
      icon: '', // icon
      title: '', // 标题
      link: '', // 外链地址,
      hide: 'N', // 是否隐藏
      full: 'N', // 是否全屏
      affix: 'N', // 是否固定
      activeMenu: '', // 选中菜单的地址
      keepAlive: 'Y', // 是否缓存
      sortNo: 1,
    };
    formRef.value.clearValidate();
    currentMenu.value = null;
  };
  const openModal = (menu) => {
    menu && (form.value = menu);
    currentMenu.value = menu;
    showModal.value = true;
  };

  defineExpose({
    openModal,
  });
</script>
