<template>
    <q-dialog v-model="visible" persistent>
        <q-card class="shadow-24" style="max-width: 40vw">
            <q-card-section class="no-padding">
                <q-card-actions class="bg-light-blue-10 text-white">
                    <q-card-actions class="text-h6">{{ addOrEditFormTitle }}</q-card-actions>
                    <q-space />
                    <q-btn dense flat round icon="close" @click="visible = false">
                        <q-tooltip content-class="bg-amber text-black shadow-4">关闭</q-tooltip>
                    </q-btn>
                </q-card-actions>
            </q-card-section>
            <q-card-section style="max-width: 40vw" class="scroll">
                <q-form ref="myForm">
                    <div class="row q-col-gutter-md">
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.configName" label="参数名称"
                                :rules="[(val) => (val && val.length > 0) || '请填写参数名称']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.configKey" label="参数键名"
                                :rules="[(val) => (val && val.length > 0) || '请填写参数键名']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.configValue" label="参数键值"
                                :rules="[(val) => (val && val.length > 0) || '请填写参数键值']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.configType"
                                :options="configTypeList" emit-value map-options label="系统内置"
                                :rules="[(val) => (val && val.length > 0) || '请选择系统内置']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.remark" label="备注" />
                        </div>
                    </div>
                </q-form>
            </q-card-section>
            <q-separator />
            <q-card-actions align="right">
                <q-btn color="white" text-color="black" style="margin-right: 25px" @click="visible = false">关闭</q-btn>
                <q-btn color="primary" @click="submitForm()">提交</q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>
<script lang="ts" setup>
import { sysConfigApi } from 'src/api/sysConfig/sysConifgApi';
import { SysConfigEntity } from 'src/api/sysConfig/model/sysConfig';
import { ref } from 'vue';

// const props = defineProps<{
//   areaPropertyList: any[];
//   warehouseList: any[];
// }>();
const emit = defineEmits(['refresh']);

const configTypeList = ref([
    { label: '是', value: 'Y' },
    { label: '否', value: 'N' },
])

//新增或修改
const visible = ref(false);
const addOrEditFormTitle = ref('');

const addOrEditFormData = ref(new SysConfigEntity());
const clickForm = (e?: any) => {
    if (e) {
        //获取class 添加弹窗文本（新增/编辑）
        addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
        addOrEditFormTitle.value = '修改系统参数';
    } else {
        addOrEditFormData.value = new SysConfigEntity();
        addOrEditFormData.value.configType = 'Y';
        addOrEditFormTitle.value = '新增系统参数';
    }
    visible.value = true;
};

const myForm = ref();
const submitForm = () => {
    myForm.value.validate().then((success: any) => {
        if (success) {
            if (addOrEditFormData.value.id !== undefined) {
                sysConfigApi.edit(addOrEditFormData.value).then(() => {
                    visible.value = false;
                    emit('refresh');
                });
            } else {
                sysConfigApi.add(addOrEditFormData.value).then(() => {
                    visible.value = false;
                    emit('refresh');
                });
            }
        }
    });
};
defineExpose({
    clickForm,
});
</script>