<template>
    <a-form-model layout="vertical" :model="form" :rules="rules">
        <a-form-model-item label="父级" v-if="isAdd">
            <a-tree
                v-model="checkedKeys"
                :selectable="false"
                checkable
                checkStrictly
                :replaceFields="replaceFields"
                :tree-data="treeData"
                @check="onCheck"
                style="max-height:400px"
                class="tw-overflow-y-auto"
            />
        </a-form-model-item>
        <a-form-model-item label="类型">
            <a-radio-group v-model="form.menuType" :disabled="isEdit">
                <a-radio value="CATALOG">目录</a-radio>
                <a-radio value="MENU">菜单</a-radio>
            </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="中文名称">
            <a-input v-model="form.menuName" />
        </a-form-model-item>
        <a-form-model-item label="英文名称">
            <a-input />
        </a-form-model-item>
        <a-form-model-item label="模块URL" prop="menuUrl">
            <a-input v-model="form.menuUrl" />
        </a-form-model-item>
        <a-form-model-item label="显示排序" prop="viewIndex">
            <a-input-number v-model="form.viewIndex" />
        </a-form-model-item>
        <a-form-model-item label="显示图标" prop="menuIcon">
            <a-input v-model="form.menuIcon" />
        </a-form-model-item>
        <a-form-model-item label="说明" prop="menuRemark">
            <a-textarea v-model="form.menuRemark" />
        </a-form-model-item>
    </a-form-model>
</template>

<script>
import { getMenuDataApi, addMenuApi } from '@/api';
import { convertListToTree } from '@/utils';

export default {
    data: () => ({
        type: 0,
        form: {
            menuType: 'CATALOG',
            parentMenuId: 0,
            menuName: '',
        },
        rules: {
            menuUrl: [{ required: true }],
        },
        replaceFields: {
            title: 'menuName',
            key: 'menuId',
        },
        checkedKeys: {
            checked: [],
            halfChecked: [],
        },
        treeData: [],
    }),
    mounted() {
        this.getMenuData();
    },
    computed: {
        isAdd() {
            return this.type === 0;
        },
        isEdit() {
            return this.type === 1;
        },
    },
    methods: {
        async getMenuData() {
            this.treeData = convertListToTree(await getMenuDataApi(), true);
            console.log(this.treeData);
        },
        submit() {
            return addMenuApi({ ...this.form, parentMenuId: this.checkedKeys.checked[0] ?? 0 });
        },
        onCheck(checkedKeys) {
            this.checkedKeys.checked = checkedKeys.checked.slice(-1);
        },
        setEdit(data) {
            this.type = 1;
            this.form = data;
        },
    },
};
</script>
