<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-form :inline="true">
				<el-form-item label="生日" style="margin-bottom: 0px;">
					<el-date-picker v-model="query.birthDate" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
						style="width: 200px;"></el-date-picker>
				</el-form-item>
				<el-form-item label="类型" style="margin-bottom: 5px;" prop="type">
					<el-input v-model="query.type" placeholder="请输入类型" clearable></el-input>
				</el-form-item>
				<el-form-item label="工号" style="margin-bottom: 5px;" prop="code">
					<el-input v-model="query.code" placeholder="请输入工号" clearable></el-input>
				</el-form-item>
				<el-form-item label="姓名" style="margin-bottom: 5px;" prop="name">
					<el-input v-model="query.name" placeholder="请输入姓名" clearable></el-input>
				</el-form-item>
				<el-form-item label="添加时间" style="margin-bottom: 0px;">
					<el-date-picker v-model="query.addTime" type="datetimerange" align="right" unlink-panels
						range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
						:picker-options="pickerOptions" style="width: 350px;" value-format="YYYY-MM-DD HH:mm:ss"
						format="YYYY-MM-DD HH:mm:ss">
					</el-date-picker>
				</el-form-item>
			</el-form>
		</el-card>
		<ButtonBar @search="handleSearch" @add="handleAdd" @remove="handleRemoveBatch" @edit="handleEditBatch"
			@upload="handleUpload" @download="handleDownload" @import="handleImport" @export="handleExport"></ButtonBar>
		<el-card :body-style="cardBodyStyle">
			<el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange">
				<el-table-column type="selection" fixed></el-table-column>
				<el-table-column type="index" label="序号" align="center" width="60">
					<template #default="scope">
						<span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column v-if="true" prop="birthDate" label="生日" width="120" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="sex" label="性别" width="120" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="type" label="类型" width="120" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="age" label="年龄" width="120" header-align="center" align="right"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="code" label="工号" width="120" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="true" prop="name" label="姓名" width="120" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="id" label="主键" width="120" header-align="center" align="center"
					show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="processInstanceId" label="流程id" width="240" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="processInstanceStatus" label="流程状态" width="240"
					header-align="center" align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="addId" label="添加人id" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="addCode" label="添加人编码" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="addName" label="添加人名称" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="addDeptId" label="添加部门id" width="360" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="addDeptCode" label="添加部门编码" width="360" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="addDeptName" label="添加部门名称" width="360" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="addTime" label="添加时间" width="240" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="modifyId" label="修改人id" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="modifyCode" label="修改人编码" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="modifyName" label="修改人名称" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="modifyTime" label="修改时间" width="240" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="cancelId" label="作废人id" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="cancelCode" label="作废人编码" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="cancelName" label="作废人名称" width="300" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="cancelTime" label="作废时间" width="240" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="cancelFlag" label="作废标记" width="240" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>
				<el-table-column v-if="false" prop="belongId" label="BELONG_ID" width="540" header-align="center"
					align="center" show-overflow-tooltip>
				</el-table-column>  
				<el-table-column label="操作" header-align="center" align="center" width="200px">
					<template #default="scope">
						<el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button plain type="danger" @click="handleDelete(scope.row )">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-card :body-style="cardBodyStyle">
			<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
				background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
				@current-change="handleCurrentChange">
			</el-pagination>
		</el-card>

		<el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="1200px" top="5vh"
			@open="openDialog">
			<el-form :model="form" label-width="80px" label-position="right" inline ref="ruleFormRef" :rules="rules">
				<el-form-item label="生日">
					<el-date-picker v-model="form.birthDate" type="date" style="width: 200px;" value-format="YYYY-MM-DD"
						format="YYYY-MM-DD"></el-date-picker>
				</el-form-item>
				<el-form-item label="性别">
					<el-input v-model="form.sex" clearable style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-input v-model="form.type" clearable style="width: 200px"></el-input> 
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="form.age" clearable style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="工号" prop="code">
					<el-input v-model="form.code" clearable style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="form.name" clearable style="width: 200px"></el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSave(ruleFormRef)">保存</el-button>
					<el-button type="danger" @click="handleCancelSave">取消</el-button>
				</div>
			</template>
		</el-dialog>


	</div>
</template>

<script setup>
	import ButtonBar from '@/components/ButtonBar.vue'  
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const {
		proxy
	} = getCurrentInstance()

	import tools from '@/tools'
	const cardBodyStyle = ref(tools.style.card)
	const inputStyle = ref(tools.style.input)

	onMounted(() => {
		handleSearch()
	})



	/**
	 *   查询
	 */ 
	const query = ref({
		birthDate: proxy.$dayjs().format('YYYY-MM-DD'),
		type: '',
		code: '',
		name: '',
		addTime: [proxy.$dayjs().format('YYYY-MM-DD') + ' 00:00:00', proxy.$dayjs().format('YYYY-MM-DD') +
			' 23:59:59'
		]
	})
	const tableData = ref([])
	const handleSearch = () => {
		currentPage.value = 1
		getTableData()
	}

	const getTableData = () => {
		
		console.log(JSON.stringify(query.value))
		var url = 'exp/DataPermission/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			params: JSON.stringify(query.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	/**
	 *   查询
	 */

	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(5)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页
	 */


	/**
	 * 新增
	 */
	const dialogVisible = ref(false)
	const form = ref({
		birthDate: '',
		sex: '',
		type: '',
		age: '',
		code: '',
		name: ''
	})
	const ruleFormRef = ref()
	const rules = reactive({
		code: [{
			required: true,
			message: '请输入工号',
			trigger: 'change' | 'blur'
		}],
		name: [{
			required: true,
			message: '请输入姓名',
			trigger: 'change' | 'blur'
		}]
	})

	const handleAdd = () => {
		form.value = {
			birthDate: '',
			sex: '',
			type: '',
			age: '',
			code: '',
			name: ''
		}
		dialogVisible.value = true
	}
	/**
	 * 新增
	 */


	/**
	 * 保存、修改、删除
	 */

	const openDialog = () => {}

	const handleSave = (ruleFormRef) => {
		ruleFormRef.validate((valid, fields) => {
			if (valid) {
				var url = 'exp/Auto/save'
				var param = {
					json: JSON.stringify(form.value),
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						form.value = response.data.data
						ElMessage({
							message: '保存成功',
							type: 'success',
						})
						getTableData()
						dialogVisible.value = false
					} else {
						// ElMessage.error('操作失败！' + response.data.msg)
						ElMessage({
							message: '操作失败' + response.data.msg,
							type: 'error'
						})
					}
				})

			} else {
				console.log('error submit!', fields)
			}
		})
	}
	const handleCancelSave = () => {
		dialogVisible.value = false
	}
	const handleEdit = (row) => {
		dialogVisible.value = true
		form.value = row
	}
	const handleDelete = (row) => {
		ElMessageBox.confirm(
				'确定删除本条记录?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					draggable: true,
				}
			)
			.then(() => {
				var url = 'exp/Auto/remove'
				var param = {
					id: row.id
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
						getTableData()
					} else {
						ElMessage({
							type: 'error',
							message: '删除失败' + response.data.msg
						});
					}
				});
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消',
				})
			})
	}

	/**
	 * 保存、修改、删除
	 */

	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const handleRemoveBatch = () => {
		console.log('handleRemoveBatch')

		if (multipleSelection.value.length < 1) {
			ElMessage({
				type: 'warning',
				message: '请选择要删除的数据!'
			})
			return
		}

		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var ids = []
			multipleSelection.value.forEach((item, index) => {
				ids.push(item.id)
			})
			var url = 'exp/Auto/removeBatch'
			var param = {
				ids: JSON.stringify(ids)
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					ElMessage({
						type: 'success',
						message: '操作成功!',
					});
					getTableData()
					dialogVisible.value = false
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败!' + response.data.msg
					});
				}
			})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			})
		})
	}

	const handleEditBatch = () => {
		console.log('handleEditBatch')
		if (multipleSelection.value.length != 1) {
			ElMessage({
				type: 'warning',
				message: '请选择一条数据编辑!'
			})
			return
		}
		handleEdit(multipleSelection.value[0])
	}

	const handleUpload = () => {
		console.log('handleUpload')
	}

	const handleDownload = () => {
		console.log('handleDownload')
	}

	const handleImport = () => {
		console.log('handleImport')
	}

	const handleExport = () => {
		console.log('handleExport')
	}
	 
	
</script>

<style>
</style>