<template>
	<a-modal v-model:visible="openAddModel" :title="title" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%">
		<a-form :model="createForm" :label-col="{span: 4}" labelAlign="right" style="margin-top: 20px;">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item label="手机号(必填项)" name="mobile">
						<a-input v-model:value="createForm.mobile" placeholder="请输入手机号" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="密码(必填项)" name="password">
						<a-input-password v-model:value="createForm.password" placeholder="请输入密码" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="确认密码(必填项)" name="repassword">
						<a-input-password v-model:value="createForm.repassword" placeholder="请输入密码" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="昵称" name="nickname">
						<a-input v-model:value="createForm.nickname" placeholder="请输入确认密码" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="头像" name="avatar">
						<a-input v-model:value="createForm.avatar" placeholder="请输入头像" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="邮箱" name="email">
						<a-input v-model:value="createForm.email" placeholder="请输入邮箱" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="选择角色(必填项)" name="roleids">
						<a-select @change="getRoleValue" v-model:value="addOtherForm.roleids" placeholder="请选择角色" mode="multiple">
							<a-select-option v-for="(item,index) in role_list" :key="index"
								:value="item.value">{{item.label}}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { GetRoleList, addAccount, updateAccount } from '@/apis/models';
	import { dataForm, otherDataForm, reset } from '@/views/permission/account/add/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, message, } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record']);
	let title = ref<String>('新增账号');

	let createForm = ref<companyDepartmentType.addFormType>(dataForm)
	let addOtherForm = ref<companyDepartmentType.addOtherFormType>(otherDataForm)

	onMounted(() => {
		companyRole({ page: 1, pagesize: 100 })
	})
	
	// 选择角色
	let role_list = ref<Object[]>([])
	const companyRole = (val : Object) => {
		GetRoleList(val).then((res : object) => {
			const data = res.data.roles.map((item : object) => ({
				label: item.name,
				value: item.id,
			}));
			role_list.value = data;
		})
	}
	const getRoleValue = (val : Number[]) => {
		createForm.value.roleids = val.join(',');
	}

	const sumbitForm = () => {
		if (!createForm.value.id) {
			if (createForm.value.password != createForm.value.repassword) {
				message.warning('两次密码不一致');
				return false;
			}
			if (createForm.value.mobile && createForm.value.password && createForm.value.repassword && createForm.value.roleids) {
				addAccount(createForm.value).then(res => {
					message.success('新增账号成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				message.warning('请补充完整信息');
			}
		} else {
			updateAccount(createForm.value).then(res => {
				message.success('修改账号成功');
				hideModal();
				resetForm();
				emit('successAdd');
			}).catch(err => {
			})
		}

	}

	const resetForm = () => {
		createForm.value = reset().dataForm;
		addOtherForm.value = reset().otherDataForm;
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
	}


	openAddModel = computed(() => {
		return store.state.openAddModel;
	})

	watch(() => props.edit_record, (newVal) => {
		if (newVal) {
			title.value = "编辑账号";
			createForm.value = {
				id: newVal.id,
				mobile: newVal.mobile,
				password: newVal.password,
				repassword: newVal.repassword,
				nickname: newVal.nickname,
				avatar: newVal.avatar,
				email: newVal.email,
				roleids: newVal.roleids
			}
			addOtherForm.value = {
				roleids: newVal.roleids.split(",").map(Number)
			}
		} else {
			title.value = "新增账号"
		}
	})
</script>

<style>

</style>
