<template>
	<div class="index">
		<el-dialog v-model="dialogTableVisible" :title="form.id ? '账号编辑' : '账号创建'" width="600" @closed="closeDialog">
			<el-form :model="form" label-width="auto" :rules="rules" ref="ruleFormRef">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" placeholder="请输入姓名" />
				</el-form-item>

				<el-form-item label="部门名称" prop="department">
					<el-input v-model="form.department" placeholder="请输入部门名称" />
				</el-form-item>

				<el-form-item label="手机号码" prop="mobile">
					<el-input v-model="form.mobile" placeholder="请输入手机号码" />
				</el-form-item>
			</el-form>

			<template #footer>
				<div class="dialog-footer">
					<el-button @click="close">取消</el-button>
					<el-button type="primary" @click="submit()"> 确认 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage, ElMessageBox } from 'element-plus';
import { addOrUpdate } from '/@/api/jnh';

const emit = defineEmits(['close']);
const rules = reactive({
	name: [{ required: true, message: '必须填写姓名', trigger: 'blur' }],
	mobile: [{ required: true, message: '必须填写手机号码', trigger: 'blur' }],
});

const form = ref({});
const dialogTableVisible = ref(false);

function open(data) {
	console.log('🚀 ~ open ~ data:', data);
	dialogTableVisible.value = true;
	if (data) {
		form.value = data;
	}
}
function close() {
	dialogTableVisible.value = false;
	emit('close');
}
const ruleFormRef = ref(null);
async function submit() {
	await ruleFormRef.value.validate();

	addOrUpdate(form.value).then((res) => {
		if (res.code === 200) {
			ElMessage.success('操作成功');
			close();
		} else {
			ElMessage.error(res.msg || '操作失败');
		}
	});
}

// 页面加载时
onMounted(() => {
	NextLoading.done();
});

defineExpose({
	open,
	close,
});
</script>

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