<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    width="50%"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm"/>
  </BasicDrawer>
</template>
<script lang="ts">
import {defineComponent, ref, computed, unref} from 'vue';
import {BasicForm, useForm} from '/@/components/Form/index';
import {formSchema} from './menu.data';
import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';

// 加载菜单
import {getMenuList} from '/@/api/sys/menu';

import {saveMenuApi} from '/@/api/system/menu';
import {listToTree} from '/@/utils/menuUtil';

import {useI18n} from "/@/hooks/web/useI18n";
import {metaModel} from '/@/api/system/model/menuModel';


export default defineComponent({
  name: 'MenuDrawer',
  components: {BasicDrawer, BasicForm},
  emits: ['success', 'register'],
  setup(_, {emit}) {
    const isUpdate = ref(true);
    let menuId;

    const [registerForm, {resetFields, setFieldsValue, updateSchema, validate}] = useForm({
      labelWidth: 100,
      schemas: formSchema,
      showActionButtonGroup: false,
      baseColProps: {lg: 12, md: 24},
    });
    const {t} = useI18n(); //加载国际化

    //默认传递页面数据
    const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
      resetFields();
      setDrawerProps({confirmLoading: false});
      isUpdate.value = !!data?.isUpdate;

      //初始化，菜单名称为可用
      updateSchema({field: 'title', componentProps: {disabled: false}});
      //如果是编辑操作，设置页面数据
      if (unref(isUpdate)) {

        console.log("------------编辑时获得的值-----------------------");
        console.log(data.record);

        // // 动态设置 表单值
        //
        let menuObj: metaModel = Reflect.get(data.record, 'meta');
        Reflect.set(data.record, 'menuType', menuObj.menuType);//meta.menuType
        Reflect.set(data.record, 'title', menuObj.title);//meta.title
        Reflect.set(data.record, 'icon', menuObj.icon);//meta.icon
        Reflect.set(data.record, 'hideMenu', menuObj.hideMenu);//meta.hideMenu
        Reflect.set(data.record, 'ignoreKeepAlive', menuObj.ignoreKeepAlive);//meta.ignoreKeepAlive
        Reflect.set(data.record, 'isLink', menuObj.isLink);//meta.isLink
        Reflect.set(data.record, 'status', menuObj.status);//meta.status
        //为表单赋值
        setFieldsValue({
          ...data.record,
        });

        //编辑模式，菜单名称为不可用
        updateSchema({field: 'title', componentProps: {disabled: true,}});
      }
      if (isUpdate.value) {
        menuId = Reflect.get(data.record, 'id');
      }
      //加载菜单
      let treeData = await getMenuList();
      treeData = listToTree(treeData);
      updateSchema({
        field: 'parentId',
        componentProps: {treeData},
      });
    });

    //得到页面标题
    const getTitle = computed(() => (!unref(isUpdate) ? t('routes.common.system.pageSystemTitleCreateMenu') : t('routes.common.system.pageSystemTitleEditMenu')));

    //提交按钮
    async function handleSubmit() {
      try {
        const values = await validate();
        setDrawerProps({confirmLoading: true});
        // TODO custom api

        // 处理权限标识为null时，后台空指针
        let permissionStr: string = Reflect.get(values, 'permission');
        if (permissionStr === undefined || permissionStr === null) {
          Reflect.set(values, 'permission', " ");
        }

        // 添加属性;
        //当前作为默认管理员操作；
        Reflect.set(values, 'type', 'SYSADMIN');
        Reflect.set(values, 'name', Reflect.get(values, 'title'));
        //当前选择为菜单时操作
        let menuType: string = Reflect.get(values, 'menuType');
        if (menuType === '0') {
          Reflect.set(values, 'component', 'LAYOUT');
        }
        if (isUpdate.value) {
          Reflect.set(values, 'id', menuId);
        }

        //为meta设置值
        const metaTemp: metaModel = {
          icon: Reflect.get(values, 'icon'),
          title: Reflect.get(values, 'title'),
          isLink: Reflect.get(values, 'isLink'),
          menuType: Reflect.get(values, 'menuType'),
          ignoreKeepAlive: Reflect.get(values, 'ignoreKeepAlive'),  //[创建菜单，才需要]
          hideMenu: Reflect.get(values, 'hideMenu'),
          status: Reflect.get(values, 'status'),
        }
        Reflect.set(values, 'meta', metaTemp);

        // saveMenu
        const data = await saveMenuApi(values, isUpdate.value);
        console.log("_______保存返回结果____data:" + data);

        closeDrawer();//关闭侧框
        emit('success');
      } finally {
        setDrawerProps({confirmLoading: false});
      }
    }

    return {registerDrawer, registerForm, getTitle, handleSubmit};
  },
});
</script>