<template>
	<!-- 承储资格延续审核 -->
	<div class="pricemoitorrecord">
		<a-space class="search">
			<div class="silt-title" style="margin-right: 12px">
				<span style="text-align: right; width: 70px; margin-right: 0px; display: block; line-height: 30px">{{
					'企业名称 &nbsp;'
				}}</span>
				<a-input @input="handleInput" style="width: 220px" v-model:value="username" placeholder="请输入" />
			</div>
			<div class="silt-title" style="margin-right: 12px">
				<span style="text-align: right; width: 70px; margin-right: 0px; display: block; line-height: 30px">{{
					'品种 &nbsp; '
				}}</span>
				<a-input @input="handleInput" style="width: 220px" v-model:value="username" placeholder="请输入" />
			</div>
			<div class="silt-title" style="margin-right: 12px">
				<span style="width: 70px; margin-right: 0px; display: block; line-height: 30px">{{ '性质&nbsp; ' }}</span>
				<a-input @input="handleInput" style="width: 220px" v-model:value="username" placeholder="请输入" />
			</div>
			<div class="btnBox">
				<a-button style="margin-right: 4px" type="primary" class="primarySele" @click="onSearch"> 查询 </a-button>
				<a-button style="margin-right: 4px" class="snowy-buttom-left" @click="onReset"> 重置 </a-button>
				<a-button class="btnl colro" type="primary" :disabled="!hasSelected" aria-disabled="loading" @click="start">
					批量下发
				</a-button>
			</div>
		</a-space>
		<div class="list">
			<a-table
				:dataSource="tableData"
				:pagination="pagination"
				:columns="tableColumns"
				:row-key="(record) => record.INDEX"
				:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === '操作'">
						<a-button type="link" @click="onView(record)">查看</a-button>
						<a-button type="link" @click="onView(record)">编辑</a-button>
						<a-button type="link" @click="onView(record)">删除</a-button>
					</template>
				</template>
				<!-- 自定义分页器 -->
				<template #custom-row="{ current, pageSize }">
					<a-pagination
						:total="total"
						:current="current"
						:page-size="pageSize"
						show-size-changer
						:page-size-options="pageSizeOptions"
						show-total
						show-quick-jumper
						@change="handlePageChange"
					></a-pagination>
				</template>
			</a-table>
		</div>
	</div>
	<Form ref="formRef" @successful="tableRef.refresh()" />
</template>
<script setup>
	import { onMounted } from 'vue'
	import Form from './form.vue'
	import { reactive, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { defineComponent } from 'vue'

	const formRef = ref(null)
	onMounted(() => {
		onSearch()
	})
	const dataSource = ref([]) // 响应式表格数据
	const total = ref(0) // 总记录数
	const currentPage = ref(1) // 当前页码
	const pageSize = ref(10) // 每页显示的记录数
	const pageSizeOptions = ['1', '2', '30', '40'] // 每页显示记录数选项

	const handlePageChange = (current, size) => {
		// 更新当前页码和每页显示的记录数
		pagination.current = current
		pagination.pageSize = size
		// 根据新的页码和每页显示的记录数获取数据
	}
	const router = useRouter()
	const tableColumns = [
		{ title: '序号', key: 'INDEX' },
		{ title: '企业名称', dataIndex: 'dataIndex1' },
		{ title: '品种', dataIndex: 'dataIndex2' },
		{ title: '性质', dataIndex: 'dataIndex3' },
		{ title: '储备规模计划数量', dataIndex: 'dataIndex4' },
		{ title: '操作', key: '操作' }
	]
	const tableData = ref([
		{
			INDEX: 1,
			dataIndex1: '企业名称1',
			dataIndex2: '企业代码1',
			dataIndex3: '法定代表人1',
			dataIndex4: '企业性质1'
		},
		{
			INDEX: 2,
			dataIndex1: '企业名称2',
			dataIndex2: '企业代码2',
			dataIndex3: '法定代表人2',
			dataIndex4: '企业性质2'
		}
	])
	const SiteOptions = []
	const username = ref('')
	const SearchForm = reactive({
		siteName: ''
	})

	const state = reactive({
		selectedRowKeys: [],
		loading: false
	})
	const hasSelected = computed(() => state.selectedRowKeys.length > 0)
	const start = () => {
		state.loading = true
		setTimeout(() => {
			state.loading = false
			state.selectedRowKeys = []
		}, 4000)
	}
	const onSelectChange = (selectedRowKeys) => {
		console.log('selectedRowKeys changed: ', selectedRowKeys)
		state.selectedRowKeys = selectedRowKeys
	}
	function onSearch() {
		// let fd = JSON.parse(JSON.stringify(SearchForm))
		// fd.current = tablePage.current
		// fd.size = tablePage.size
		// priceMoitorRecordApi.priceMoitorRecordPage(fd).then((reg) => {
		// 	console.log(reg.records, 123)
		// 	tableData.value = reg.records
		// 	tablePage.total = reg.total
		// })
	}
	function onReset() {
		SearchForm.siteName = ''
		tablePage.current = 1
		onSearch()
	}
	const handleInput = () => {}

	function onViewRow() {
		// router.push('/basic.info/pricemoitorrecordDetail')
	}
	function onChangePage(ev) {
		// Object.assign(tablePage, ev)
		onSearch()
	}

	const pagination = reactive({
		current: currentPage.value,
		pageSize: pageSize.value,
		total: total.value,
		showSizeChanger: true,
		pageSizeOptions: pageSizeOptions,
		showTotal: (total, range) => `共 ${total} 条`,
		onChange: handlePageChange
	})

	const handleExpand = (expanded, record) => {
		// 处理展开分页的逻辑
		// 可以根据 record 的信息进行展开分页的操作
		// 例如根据 record 的 ID 获取分页数据等
		// 更新分页数据
		record.paginationData = [] // 假设 record.paginationData 是用于存储分页数据的属性
	}

	// 查看表单数据
	const onView = (record) => {
		formRef.value.onOpen(record, true)
		// router.push('/basic.info/continuationDetails?code=1')
	}
</script>
<style lang="less" scoped>
	.search {
		padding-top: 20px;
		padding-left: 50px;
		margin-bottom: 32px;
		.btnBox {
			display: inline-block;
			width: 250px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.btnl {
				width: 100px;
			}
			.colro {
				background: #777de3;
				color: #fff;
			}
		}
	}
	.silt-title {
		display: flex;
		span {
			text-align: right;
		}
	}
</style>
