<template>
    <a-drawer title="新增工具" :visible="true" :width="540" :body-style="{ paddingBottom: '80px' }"
        :footer-style="{ textAlign: 'right' }" @close="onClose">
        <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item label="分组名称" name="group">
                <a-input v-model:value="form.group" style="width: 100%" placeholder="请输入分组名称" />
            </a-form-item>
            <a-form-item label="工具标题" name="label">
                <a-input v-model:value="form.label" style="width: 100%" placeholder="请输入标题" />
            </a-form-item>
            <a-form-item label="提示文字" name="tip">
                <a-input v-model:value="form.tip" style="width: 100%" placeholder="请输入提示文字" />
            </a-form-item>
            <a-form-item label="是否启用" name="show" :label-col="{span:6}" :wrapper-col="{span:6}">
                <a-radio-group v-model:value="form.show" button-style="solid">
                    <a-radio-button value="1">是</a-radio-button>
                    <a-radio-button value="0">否</a-radio-button>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="快捷定位" name="isQuick" :label-col="{span:6}" :wrapper-col="{span:6}">
                <a-radio-group v-model:value="form.isQuick" button-style="solid">
                    <a-radio-button value="1">是</a-radio-button>
                    <a-radio-button value="0">否</a-radio-button>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="工具配置" name="option">
                <a-textarea v-model:value="form.option" :rows="3" />
            </a-form-item>
            <a-form-item label="工具图标" name="icon">
                <a-input v-model:value="form.icon" style="width: 100%" placeholder="请输入图标标识" />
            </a-form-item>
            <a-form-item label="工具功能" name="action">
                <a-input v-model:value="form.action" style="width: 100%" placeholder="请输入工具功能" />
            </a-form-item>
            <a-form-item label="工具排序" name="idx">
                <a-input v-model:value="form.idx" style="width: 100%" placeholder="请输入工具排序" />
            </a-form-item>
        </a-form>
        <div :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
        }">
            <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
            <a-button type="primary" @click="onSubmit">确定</a-button>
        </div>
    </a-drawer>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch } from 'vue';
import { message } from 'ant-design-vue';
import { getAllTagsType, generateCodeByName, addTag, updateTag, checkTagCode } from '/@/api/sys/tag';
import { session } from '/@/utils/Memory';
import { addTools } from '/@/api/sys/mapTools';
import { v4 as uuidv4 } from 'uuid';

const props = {
}
export default defineComponent({
    name: 'ToolsDrawer',
    components: {},
    props,
    setup(props, { emit }) {
        const form = reactive({
            group: "",
            show: '1',
            isQuick: '1',
            label: "",
            option: "{\n\n}",
            idx: "",
            id: "",
            tip: "",
            icon: "",
            action: ""
        });
        const rules = {
            group: [{
                required: true,
                message: '请输入分组名称',
                trigger: 'blur'
            }],
            label: [{
                required: true,
                message: '请输入工具标题',
                trigger: 'blur'
            }],
            idx: [{
                required: true,
                message: '请输入工具排序',
                trigger: 'blur'
            }],
            tip: [{
                required: true,
                message: '请输入提示文字',
                trigger: 'blur'
            }],
            icon: [{
                required: true,
                message: '请选择工具图标',
                trigger: 'blur'
            }],
            action: [{
                required: true,
                message: '请输入工具功能',
                trigger: 'blur'
            }]
        };
        const formRef = ref()

        // 关闭弹窗
        const onClose = () => {
            emit('closeDialog')
            resetForm()
        };
        // 提交信息
        const onSubmit = () => {
            formRef.value.validate().then(() => {
                //在这里新增，新增之前处理一下form后再传
                let params = {
                    group: form.group,
                    show: form.show === '0' ? false : true,
                    isQuick: form.isQuick === '0' ? false : true,
                    label: form.label,
                    option: JSON.parse(form.option),
                    idx: parseInt(form.idx),
                    id: uuidv4(),
                    tip: form.tip,
                    icon: form.icon,
                    action: form.action
                }
                addTools(params).then(res => {
                    if(res.code===200 && res.data?.insertedId){
                        message.success('新增成功')
                        emit('onSubmit')
                        onClose();
                    }else{
                        message.error('新增失败')
                    }
                })
            }).catch((error) => {
                console.log('error', error);
            });
        };
        // 重置表单
        const resetForm = () => {
            formRef.value.resetFields();
        };
        return {
            form,
            rules,
            formRef,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            onClose,
            onSubmit,
            resetForm
        };
    },
});
</script>