<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>

		<el-card :body-style="cardBodyStyle">
			<el-row>
				<el-col :span="12">
					分页
					<el-button type="primary" @click="handleSearchPage('structurePage')">构造器方式</el-button>
					<el-button type="primary" @click="handleSearchPage('annotatePage')">注解方式</el-button>
					<el-button type="primary" @click="handleSearchPage('xmlPage')">xml方式</el-button>
				</el-col>
				<el-col :span="12">
					不分页
					<el-button type="primary" @click="handleSearch('structure')">构造器方式</el-button>
					<el-button type="primary" @click="handleSearch('annotate')">注解方式</el-button>
					<el-button type="primary" @click="handleSearch('xml')">xml方式</el-button>
				</el-col>
			</el-row>

		</el-card>

		<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 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" v-if="showPage">
			<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>

	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

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

	onMounted(() => {
		getTableData()
	})

	const type = ref('xmlPage')


	/**
	 *   查询
	 */

	const query = ref({
		birthDate: '',
		type: '',
		code: '',
		name: '',
		addTime: ['', '']
	})
	const tableData = ref([])
	const showPage = ref(true)
	const handleSearchPage = (val) => {
		currentPage.value = 1
		type.value = val
		getTableDataPage()
	}
	const getTableDataPage = () => {
		showPage.value = true
		var url = 'exp/Search/' + type.value
		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 handleSearch = (val) => {
		type.value = val
		getTableData()
	}
	const getTableData = () => {
		showPage.value = false
		var url = 'exp/Search/' + type.value
		var param = {
			params: JSON.stringify(query.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data
			} 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
		getTableDataPage()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableDataPage()
	}
	/**
	 * 分页
	 */

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

<style>
</style>
