<template>
    <el-dialog v-model="data.dialogVisible" :title="data.title" :before-close="handleClose" style="width: 450px; padding-bottom: 20px">
        <el-form ref="formDataRef" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="租户姓名" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入租户姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="ruleForm.mobile" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button :loading="data.saveLoading" type="primary" @click="onClickSave">保存</el-button>
                <el-button @click="handleClose">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { checkMobile } from '~/utils/validateFuns.js';
import { tenantSave } from '@/api/sys.js';

const formDataRef = ref();
const emits = defineEmits(['success']);
const ruleForm = reactive({
    name: '',
    mobile: '',
});
const rules = reactive({
    name: [{ required: true, message: '请输入租户姓名', trigger: 'blur' }],
    mobile: [
        {
            required: true,
            validator(rule, value, callback) {
                if (!value) {
                    callback(new Error('请输入手机号'));
                }
                if (!checkMobile(value)) {
                    callback(new Error('请输入正确的手机号'));
                }
                callback();
            },
            trigger: 'blur',
        },
    ],
});
const data = reactive({
    dialogVisible: false,
    title: '',
    saveLoading: false,
});
const handleClose = () => {
    data.dialogVisible = false;
    if (formDataRef.value) {
        formDataRef.value.resetFields();
    }
};
const onClickSave = () => {
    if (formDataRef.value) {
        formDataRef.value.validate((valid) => {
            if (valid) {
                data.dataListLoading = true;
                tenantSave(ruleForm)
                    .then((res) => {
                        ElMessage({
                            type: 'success',
                            message: res.msg,
                        });
                        emits('success');
                        if (formDataRef.value) {
                            formDataRef.value.resetFields();
                        }
                        data.dialogVisible = false;
                    })
                    .catch((err) => {});
            } else {

            }
        });
    }
};
const onShowDialog = (row) => {
    data.title = row ? '编辑租户' : '新增租户';
    data.dialogVisible = true;
    if (formDataRef.value) {
        formDataRef.value.resetFields();
    }
    if (row) {
        nextTick(() => {
            ruleForm.id = row.id;
            ruleForm.name = row.name;
            ruleForm.mobile = row.mobile;
        });
    } else {
        ruleForm.id = '';
    }
};
defineExpose({
    onShowDialog,
});
</script>

<style lang="less" scoped></style>
