<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.userName" 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.nickName" 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.userType" :options="userTypeList"
                                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.email" label="用户邮箱" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.phonenumber" label="手机号码" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12">
                            <q-select class="text-h6" outlined v-model="addOrEditFormData.sex" :options="sexList" emit-value
                                map-options label="用户性别" :rules="[(val) => (val && val.length > 0) || '请选择用户性别']" />
                        </div>
                        <div class="col-xl-6 col-lg-12 col-sm-12" v-if="!addOrEditFormData.id">
                            <q-input class="text-h6" outlined v-model="addOrEditFormData.password" label="密码"
                                :rules="!addOrEditFormData.id ? [(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.activated"
                                :options="activatedList" emit-value map-options label="用户状态" />
                        </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 { loginApi } from 'src/api/login/loginApi';
import { SysUserEntity } from 'src/api/login/model/login';
import { ref } from 'vue';

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

const userTypeList = ref([
    { label: '系统用户', value: 'admin' },
    { label: '普通用户', value: 'normal' },
])

const sexList = ref([
    { label: '男', value: '0' },
    { label: '女', value: '1' },
    { label: '未知', value: '2' }
])

const activatedList = ref([
    { label: '启用', value: true },
    { label: '停用', value: false }
])

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

const addOrEditFormData = ref(new SysUserEntity());
const clickForm = (e?: any) => {
    if (e) {
        //获取class 添加弹窗文本（新增/编辑）
        addOrEditFormData.value = JSON.parse(JSON.stringify(e)); // 改为深拷贝;
        addOrEditFormTitle.value = '修改用户';
    } else {
        addOrEditFormData.value = new SysUserEntity();
        addOrEditFormData.value.userType = 'admin'
        addOrEditFormData.value.sex = '0'
        addOrEditFormData.value.activated = true;
        addOrEditFormTitle.value = '新增用户';
    }
    visible.value = true;
};

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