<template>
	<template v-if="state">
		<a-form :model="createForm" layout="vertical"  class="resume-form">
			<a-row :gutter="20">
				<a-col span="12">
					<a-form-item label="部门名称" name="name">
						<a-input v-model:value="createForm.name" placeholder="请输入部门名称" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="联系人" name="contact">
						<a-input v-model:value="createForm.contact" placeholder="请输入联系人" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="企业固话" name="phone">
						<a-input v-model:value="createForm.phone" placeholder="请输入联系电话" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="手机号" name="mobile">
						<a-input v-model:value="createForm.mobile" placeholder="请输入手机" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="12">
					<a-form-item label="电子邮箱" name="email">
						<a-input v-model:value="createForm.email" placeholder="请输入邮箱" size="large" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-flex justify="flex-end">
						<a-space>
							<a-button  @click="resetForm" size="large">取消</a-button>
							<a-button type="primary" @click="saveForm" size="large">保存</a-button>
						</a-space>
					</a-flex>
				</a-col>
			</a-row>
		</a-form>
	</template>
	<template v-else>
		<!-- <a-search @searchData="searchData"></a-search> -->
		<a-list :data-source="departmengList">
			<template #loadMore  v-if="departmengList.length > 0">
				<a-flex justify="center">
					<a-space>
						<div v-if="!loading" >
							<a-button @click="onLoadMore">加载更多</a-button>
						</div>
					</a-space>
				</a-flex>
			</template>
			<template #renderItem="{ item }">
				<a-list-item>
					<template #actions>
						<a-space>
							<a-button @click="toEdit(item)" type="primary" size="small">
								编辑
							</a-button>
							<a-popconfirm title="是否删除该部门" @confirm="del(item.id)">
								<a-button size="small" danger>
									删除
								</a-button>
							</a-popconfirm>
						</a-space>
					</template>
					<a-skeleton avatar :title="false" :loading="!!loading" active>
						<a-list-item-meta>
							<template #title>
								{{item.name}}
							</template>
							<template #description>
								<div>
									{{item.contact}}
									<a-divider type="vertical" />
									{{item.phone}}
									<a-divider type="vertical" />
									{{item.email}}
								</div>
							</template>
						</a-list-item-meta>
					</a-skeleton>
				</a-list-item>
			</template>
		</a-list>
	</template>
</template>

<script setup lang="ts">
	import { ref, onMounted, defineEmits,computed, watch } from 'vue';
	import { PostCompanyDepartmentAdd, GetCompanyDepartmentList, PostCompanyDepartmentDel, PostCompanyDepartmentEdit } from '@/apis/models';
	import ASearch from '@/components/company/information/department/search.vue';
	import { cols } from '@/components/company/information/department/columns';
	import { intersectionAlike } from '@/utils/dataHelper';
	import { warnToast, successToast } from '@/utils/toastHelper';
	import { dataForm, otherDataForm, reset } from '@/components/company/information/department/data.ts';
	import { useCommon } from '@/hooks/useCommon';
	let { store, commomParams, dayjs, richOption, ExclamationCircleOutlined, Modal } = useCommon();
	let props = defineProps(['form_state']);
	const emit = defineEmits();
	let state = ref<Boolean>(false)
	let loading = ref<Boolean>(true);
	let departmengList = ref([]);
	let createForm = ref<CompanyDepartmentType.DepartmentFormType>(dataForm)

	onMounted(() => {
		getData();
	})

	const searchData = (data : object) => {
		commomParams.value.search = data
		getData();
	}

	const clearData = (data : object) => {
		if (data) {
			commomParams.value.search = data
		} else {
			commomParams.value.search = {
				page: 1,
				pagesize: 10,
				sort: 'id',
				sortby: 'asc',
				keyword: ''
			}
		}
		getData();
	}


	const getPage = (data : object) => {
		commomParams.value.search.page = data.current;
		commomParams.value.search.pagesize = data.pageSize;
		getData();
	}
	const getData = async () => {
		try {
			loading.value = true;
			let res = await GetCompanyDepartmentList(commomParams.value.search);
			loading.value = false;
			commomParams.value.table.data = res.data.rows
			departmengList.value = res.data.rows ? departmengList.value.concat(res.data.rows) : departmengList.value.concat([]);
			commomParams.value.table.columns = cols;
			commomParams.value.page = {
				current: commomParams.value.search.page,
				pageSize: commomParams.value.search.pagesize,
				total: res.data.total,
				pageSizeOptions: ['10', '20', '30', '40'],
				hideOnSinglePage: false,
				showSizeChanger: true
			};
		} catch {
			loading.value = false;
		}
	}


	const onLoadMore = () => {
		commomParams.value.search.page = commomParams.value.search.page + 1;
		getData();
	}


	const saveForm = () => {
		if (createForm.value.id) {
			PostCompanyDepartmentEdit(createForm.value).then(res => {
				successToast('修改成功')
				resetForm()
			})
		} else {
			PostCompanyDepartmentAdd(createForm.value).then(res => {
				successToast('保存成功')
				resetForm()
			})
		}

	}





	const resetForm = () => {
		departmengList.value = [];
		createForm.value = reset().dataForm as CompanyDepartmentType.DepartmentFormType;
		state.value = false;
		getData();
		emit("quitEdit")
	}

	watch(() => [props.form_state], (newVal) => {
		state.value = newVal[0];
	})

	const toEdit = (item : Object) => {
		createForm.value = intersectionAlike(createForm.value, item)
		createForm.value.id = item.id;
		emit("editEdit")
	}

	const del = (id : number) => {
		commomParams.value.delParam = { id: id };
		PostCompanyDepartmentDel(commomParams.value.delParam).then(res => {
			successToast('删除成功');
			departmengList.value = [];
			getData();
		})
	}
</script>


<style scoped>
	:deep(.ant-list-item:last-child) {
		border-block-end: none !important;
	}
</style>
