<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1000px" :close-on-click-modal="false"
			draggable destroy-on-close @close="onCancel">
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column label="序号" width="60">
					<template #default="scope">
						{{ scope.$index + 1 + (state.tableData.param.pageIndex - 1) * state.tableData.param.pageSize }}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="操作类型" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createdTime" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="address" label="操作地址" min-width="110" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="securityStationName" label="所属临保岗点" min-width="110" align="center" show-overflow-tooltip></el-table-column>
               <el-table-column prop="securityStationAddress" label="临保岗点地址" align="center" min-width="100" show-overflow-tooltip></el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
				:pager-count="5" :page-sizes="[10, 20, 30, 100, 200, 300, 1000]"
				v-model:current-page="state.tableData.param.pageIndex" background
				v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total">
			</el-pagination>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="configDialog">
import { reactive, ref, defineAsyncComponent, nextTick, toRaw } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { ConfigApi } from '/@/api/api'
// 引入组件

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageIndex: 1,
			pageSize: 10,
            employeeId:''
		},
	},
	propsParam:{},
	configForm: {
		employeeId: '',
		organizationId:""
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});
// 打开弹窗
const openDialog = (type: string, row: targetDataType,param:object) => {
	state.propsParam=param

	if (type === 'edit') {
		let rowobj = JSON.parse(JSON.stringify(row))
		console.log('rowobj', rowobj)
		state.configForm = rowobj;
		state.dialog.title = '签到/签退记录明细';
		// state.dialog.submitTxt = '修 改';
		// state.dialog.type = 'edit'
		getTableData()
	} else {
		/**
		 * JS对象分为基础类型和引用类型，基础类型(Number, String, Boolean…)直接存储于栈中，引用类型(Object…)栈中存储指向存储在堆中的对象的指针。
		 * Object.assign() 拷贝的是属性值，如果源对象的属性值是一个指向对象的指针，那也只拷贝那个指针。所以如果对象的属性值为基础类型，对于通过Object.assign()拷贝的那个属性而言是深拷贝；如果对象的属性值为引用，对于通过通过Object.assign()拷贝的那个属性而言其实是浅拷贝的。
		 * Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
		 * 简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利用这个特性可以实现对象属性的合并。
		 */
		state.configForm = Object.assign({});//新增重置空对象，基础类型是深拷贝，对象引用类型是浅拷贝
		state.dialog.title = '新增';
		state.dialog.submitTxt = '保 存';
		state.dialog.type = 'add'
	}
	state.dialog.isShowDialog = true;//打开弹窗-显示
};
// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageIndex = val;
	getTableData();
};
// 初始化表格数据
const getTableData = () => {
	// debugger
	state.tableData.loading = true;
	let obj = state.tableData.param
	obj.employeeId=state.configForm.employeeId
	state.propsParam.pageIndex=state.tableData.param.pageIndex
	state.propsParam.pageSize=state.tableData.param.pageSize

	let obj2 = JSON.parse(JSON.stringify(state.propsParam))
	delete obj2.options
	delete obj2.superviseDepartIdArr
	delete obj2.createdStarEndDate
	obj2.hasSecurityCertificateNo=obj2.hasSecurityCertificateNo===null||obj2.hasSecurityCertificateNo===''?null:obj2.hasSecurityCertificateNo
    obj2.recordStatuses=obj2.recordStatuses?[obj2.recordStatuses]:[]
	obj2.organizationId=state.configForm.organizationId
	obj2.deskTypes = ['TemporarySecurity']
	ConfigApi().attendanceDetailApi(obj,obj2).then(response => {
		console.log('response查询11', response)
		console.log('response.data', response.data)
		if (response.status == 200) {
			state.tableData.data = response.data.data
			state.tableData.total = response.data.totalCount;
		}
	})
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
	nextTick(() => {
		// DialogFormRef.value?.resetFields();//清空表单，此项需加表单验证才能使用--关闭窗口重重输入框值
	});
};
// 取消
const onCancel = () => {
	closeDialog();
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.dialog-container {}
</style>
