<template>
	<div class="index">
		<el-dialog v-model="dialogTableVisible" :title="form?.id ? '账号编辑' : '账号创建'" width="600" @closed="close">
			<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-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="mobile">
					<el-input v-model="form.mobile" placeholder="请输入手机号码" />
				</el-form-item>
				<el-form-item label="企业名称" prop="companyName">
					<el-select v-model="form.companyName" placeholder="请选择企业名称" value-key="id" clearable @change="handleChange">
						<el-option v-for="item of companyData" :key="item.id" :label="item.companyName" :value="item" />
					</el-select>
				</el-form-item>
				<el-form-item label="账号类型" prop="accountType">
					<el-select v-model="form.accountType" placeholder="自动关联企业类型" disabled>
						<el-option v-for="item of ACCOUNTTYPE_CONST" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-form-item>
				<el-form-item label="部门名称" prop="department">
					<el-input v-model="form.department" 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 { createTenantUser, getTenantList, updateTenantUser } from '/@/api/tenant';
import { ACCOUNTTYPE_CONST } from '../tenant/constant';

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

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

const loading = ref(false);
const companyData = ref([]);

// 获取数据
async function getData() {
	loading.value = true;
	let { code, data, total } = await getTenantList({
		page: 1,
		size: 9999,
	});
	loading.value = false;
	if (code == 200) {
		companyData.value = data;
	}
}

function handleChange(val) {
	form.accountType = val?.accountType ?? '';
}

function open(data) {
	getData();
	dialogTableVisible.value = true;
	if (data) {
		Object.assign(form, data);
	}
}
function close() {
	dialogTableVisible.value = false;
	form.name = '';
	form.mobile = '';
	form.companyName = '';
	form.accountType = '';
	form.department = '';
	emit('close');
}
const ruleFormRef = ref(null);
async function submit() {
	await ruleFormRef.value.validate();

	const params = {
		id: form?.id || undefined,
		name: form.name,
		mobile: form.mobile,
		companyName: form.companyName?.id,
		department: form.department,
		accountType: form.accountType,
	};
	console.log('output >>>>> params', params);
	if (form.id) {
		updateTenantUser(params).then((res) => {
			if (res.code === 200) {
				ElMessage.success('操作成功');
				close();
			} else {
				ElMessage.error(res.msg || '操作失败');
			}
		});
		return;
	} else {
		createTenantUser(params).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>
