<template>
  <vxe-modal
    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="parent">
            <el-tree-select
              clearable
              v-model="form.parent"
              :data="props.menuList"
              check-strictly
              node-key="name"
              :render-after-expand="false"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="w-full" label="菜单名称" prop="meta.title">
            <el-input v-model="form.meta.title" placeholder="标题" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="w-full" label="图标" prop="meta.icon">
            <el-input v-model="form.meta.icon" placeholder="图标" />
          </el-form-item>
        </el-col>
        <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="path">
            <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>
        <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="isLink">
            <el-input v-model="form.isLink" placeholder="外链地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="w-full" label="显示菜单" prop="activeMenu">
            <el-input v-model="form.meta.activeMenu" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否隐藏" prop="isHide">
            <el-checkbox v-model="form.meta.isHide" :true-value="1" :false-value="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否全屏" prop="isFull">
            <el-checkbox v-model="form.meta.isFull" :true-value="1" :false-value="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否固定" prop="isAffix">
            <el-checkbox v-model="form.meta.isAffix" :true-value="1" :false-value="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否缓存" prop="isKeepAlive">
            <el-checkbox v-model="form.meta.isKeepAlive" :true-value="1" :false-value="0" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

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

<script setup name="menuFormModal">
  import { ref, reactive, computed, unref } from 'vue';

  const props = defineProps({
    menuList: {
      type: Array,
      default: () => [],
    },
  });

  const currentMenu = ref(null);
  const showModal = ref(false);
  const formRef = ref(null);

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

  const form = reactive({
    parent: '',
    path: '', // 访问路径
    name: '', // 组件 name
    component: '', // 组件名称
    redirect: '', // 重定向
    meta: {
      icon: '', // icon
      title: '', // 标题
      isLink: '', // 是否外链接
      isHide: 0, // 是否隐藏
      isFull: 0, // 是否全屏
      isAffix: 1, // 是否固定
      activeMenu: '', // 用于详情时，选中菜单路径
      isKeepAlive: 1, // 是否缓存
    },
  });

  const submitForm = () => {};
  const onHide = () => {
    formRef.value.resetFields();
    currentMenu.value = null;
  };
  const openModal = (menu) => {
    Object.assign(form, menu);
    currentMenu.value = menu;
    showModal.value = true;
  };

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