<template>
	<!-- 粮库信息备案 -->
	<div class="pricemoitorrecord">
		<a-card :bordered="false">
			<a-space class="search">
				<div class="silt-title">
					<span style="width: 70px; margin-right: 12px; display: block; line-height: 30px">{{ '粮库名称' }}</span>
					<a-input @input="handleInput" style="width: 220px" v-model:value="username" placeholder="请输入" />
				</div>
				<div class="btnBox">
					<a-button type="primary" class="primarySele" @click="Search"> 查询 </a-button>
					<a-button class="snowy-buttom-left" @click="onReset"> 重置 </a-button>
				</div>
			</a-space>
		</a-card>

		<div class="list" style="margin-top: 10px">
			<a-table :dataSource="tableData" :pagination="pagination" :columns="tableColumns">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === '操作'">
						<a-button type="link" @click="onView('chenk', record)">查看</a-button>
					</template>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script setup>
	import business from '@/api/business/tank.js'

	import { reactive, ref } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { defineComponent } from 'vue'

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

	const handlePageChange = (current, size) => {
		pagination.current = current
		pagination.pageSize = size
		onSearch({ current: pagination.current, size: pagination.pageSize, orgName: username.value })
	}
	const pagination = reactive({
		current: 1,
		pageSize: 10,
		total: 0,
		showSizeChanger: true,
		showQuickJumper: true,
		pageSizeOptions: pageSizeOptions,
		showTotal: (total, range) => `共 ${total} 条`,
		onChange: handlePageChange
	})
	const tableColumns = [
		{
			title: '序号',
			dataIndex: 'Index',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{ title: '粮库名称', dataIndex: 'orgName' },
		{ title: '所属企业', dataIndex: 'qymc' },
		{ title: '库点类别', dataIndex: 'depotClass' },
		{ title: '仓容', dataIndex: 'effectiveCapacity' },
		{ title: '操作', key: '操作' }
	]
	const tableData = ref([])
	const SiteOptions = []
	const username = ref('')
	const onSearch = async (T) => {
		const res = await business.pageListOrgInfoPage({ current: currentPage.value, size: pageSize.value, ...T })
		tableData.value = res.records
		pagination.total = res.total
	}

	const Search = () => {
		pagination.current = 1
		pagination.pageSize = 10
		onSearch({ orgName: username.value })
	}
	function onReset() {
		username.value = ''
		pagination.current = 1
		pagination.pageSize = 10
		onSearch({ orgName: username.value })
	}

	const handleInput = async (row) => {}

	//
	const DEl = async (row) => {
		// const res = await business.EmPersonInfoDelete([{ id: row.id }])
		onSearch()
		console.log(res)
	}
	// 查看表单数据
	const onView = (record, row) => {
		switch (record) {
			case 'add':
				router.push('/business/personnelDel?add')
				break
			case 'del':
				DEl(row)
				break
			case 'chenk':
				router.push(`/business/grainDel?codeOOP=${2}&id=${row.orgId}&qymc=${row.qymc}`)
				break
			case 'edit':
				router.push(`/business/personnelDel?codeOOP=1&id=${row.id}`)
				break
			default:
				// router.push('/business/personnelDel')
				break
		}
	}

	const handleExpand = (expanded, record) => {
		// 处理展开分页的逻辑
		// 可以根据 record 的信息进行展开分页的操作
		// 例如根据 record 的 ID 获取分页数据等
		// 更新分页数据
		record.paginationData = [] // 假设 record.paginationData 是用于存储分页数据的属性
	}
</script>
<style lang="less" scoped>
	.search {
		padding-top: 20px;
		padding-left: 50px;
		margin-bottom: 32px;
		.btnBox {
			display: inline-block;
			width: 200px;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
	.silt-title {
		display: flex;
	}
</style>
