<template>
	<xn-form-container
		:title="formData.id ? '编辑用户' : '增加用户'"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		:body-style="{ 'padding-top': '0px' }"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-tabs v-model:activeKey="activeTabsKey">
				<a-tab-pane key="1" tab="基础信息" force-render>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="账号：" name="account">
								<a-input v-model:value="formData.account" placeholder="请输入账号" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="姓名：" name="name">
								<a-input v-model:value="formData.name" placeholder="请输入姓名" allow-clear/>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="性别：" name="gender">
								<a-radio-group v-model:value="formData.gender" :options="Sys.gender"/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="选择组织：" name="orgId">
								<a-tree-select
									v-model:value="formData.orgId"
									style="width: 100%"
									:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
									placeholder="请选择组织"
									allow-clear
									tree-default-expand-all
									:tree-data="treeData"
									:tree-default-expanded-keys="treeDefaultExpandedKeys"
									:field-names="{
										children: 'children',
										label: 'name',
										value: 'id'
									}"
								/>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="手机号：" name="phone">
								<a-input v-model:value="formData.phone" placeholder="请输入手机" allow-clear/>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="16">
					</a-row>
				</a-tab-pane>
			</a-tabs>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" :loading="formLoading" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
import userApi from "@/api/sys/userApi";
import {Sys} from "@/utils/constant";
import {required} from "@/utils/formRules";
import tool from "@/utils/tool";
import orgApi from "@/api/sys/orgApi";
// 默认是关闭状态
const visible = ref(false);
const formRef = ref();
const activeTabsKey = ref("1");
const emit = defineEmits({successful: null});
const formLoading = ref(false);
const treeData = ref([]);
const treeDefaultExpandedKeys = ref([]);
// 表单数据
const formData = ref({});

// 打开抽屉
const onOpen = (record, orgId) => {
	visible.value = true;
	formData.value = {
		gender: 1
	};
	if (orgId) {
		formData.value.orgId = orgId;
		// 通过机构再查询职位、主管
		nextTick(() => {
			selePositionData(orgId);
		});
	}
	if (record) {
		convertFormData(record);
	}
	nextTick(() => {
		// 机构选择器数据
		orgApi.orgTree().then((res) => {
			if (res !== null) {
				treeData.value = res;
				// 默认展开2级
				treeData.value.forEach((item) => {
					// 因为0的顶级
					if (item.parentId === "0") {
						treeDefaultExpandedKeys.value.push(item.id);
						// 取到下级ID
						if (item.children) {
							item.children.forEach((items) => {
								treeDefaultExpandedKeys.value.push(items.id);
							});
						}
					}
				});
			}
		});
	});
};
// 关闭抽屉
const onClose = () => {
	treeData.value = [];
	treeDefaultExpandedKeys.value = [];
	visible.value = false;
};
// 回显数据
const convertFormData = (record) => {
	const param = {
		id: record.id
	};
	// 查询详情
	userApi.userDetail(param).then((data) => {
		formData.value = Object.assign(formData.value, data);
		if (data.gender) {
			formData.value.gender = data.gender.type
		}
	});
};

// 默认要校验的
const formRules = {
	account: [required("请输入账号")],
	name: [required("请输入姓名")],
	sex: [required("请选择性别")],
	positionId: [required("请选择职位")]
};
// 删减行
const delDomains = (index) => {
	formData.value.positionJson.splice(index, 1);
};

// 验证并提交数据
const onSubmit = () => {
	formRef.value.validate().then(() => {
		// 因为不切断，我下面转换数据格式，影响上面表单会报错
		let formDatas = JSON.parse(JSON.stringify(formData.value));
		if (formDatas.positionJson && formDatas.positionJson.length > 0) {
			formDatas.positionJson = JSON.stringify(formDatas.positionJson);
		} else {
			delete formDatas.positionJson;
		}
		formLoading.value = true;
		userApi
			.submitForm(formDatas, formDatas.id)
			.then(() => {
				onClose();
				emit("successful");
			})
			.finally(() => {
				formLoading.value = false;
			});
	});
};
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
	onOpen
});
</script>

<style scoped type="less">
.childAddButton {
	margin-bottom: 10px;
}

.form-row {
	background-color: var(--item-hover-bg);
	margin-left: 0px !important;
}

.form-row-con {
	padding-bottom: 5px;
	padding-top: 5px;
	padding-left: 15px;
}

.form-div {
	padding-top: 10px;
}
</style>
