<!-- 储备数量列表 -->
<template>
	<div>
		<a-space class="header">
			<div class="inputBox">
				<span class="title-box">{{ '市州' }}</span>
				<a-input :size="size" style="width: 200px" v-model:value="informationData.zcdzCity" class="select-box"
					placeholder="请输入"></a-input>
				<span class="title-box">{{ '企业名称' }}</span>
				<a-input :size="size" style="width: 200px" v-model:value="informationData.dwmc" class="select-box"
					placeholder="请输入"></a-input>
				<span class="title-box">{{ '库区名称' }}</span>
				<a-input :size="size" style="width: 200px" v-model:value="informationData.orgName" class="select-box"
					placeholder="请输入"></a-input>
			</div>
			<div class="btnBox">
				<a-button type="primary" style="margin-right: 24px" @click="searchData">查询</a-button>
				<a-button @click="reset">重置</a-button>
			</div>
		</a-space>
		<a-table :dataSource="tableData" @change="onChangePage" :pagination="informationData"
			:row-key="(record) => record.key" :columns="columns">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'orgName'">
					<a @click="rowClick(record)">
						{{ record.orgName }}
					</a>
				</template>
			</template>
		</a-table>
	</div>
</template>
<script setup name="reserveQuantityList">
import reserveQuantityApi from '@/api/reserve.info/reserveQuantityApi.js'
import { useRouter } from 'vue-router'
const router = useRouter()
const columns = [
	{
		title: '序号',
		dataIndex: 'Index',
		align: 'center',
		customRender: ({ text, record, index }) => {
			return `${index + 1}`
		}
	},
	{
		title: '市州',
		dataIndex: 'zcdzCity',
		align: 'center',
		key: 'zcdzCity'
	},
	{
		title: '企业名称',
		dataIndex: 'dwmc',
		align: 'center',
		key: 'dwmc'
	},
	{
		title: '库区名称',
		dataIndex: 'orgName',
		align: 'center',
		key: 'orgName'
	},
	{
		title: '库存总量',
		dataIndex: 'kcslSum',
		align: 'center',
		key: 'kcslSum'
	},
	{
		title: '省级储备数量',
		dataIndex: 'kcslPSum',
		align: 'center',
		key: 'kcslPSum'
	},
	{
		title: '市级储备数量',
		dataIndex: 'kcslCSum',
		align: 'center',
		key: 'kcslCSum'
	},
	{
		title: '县级储备数量',
		dataIndex: 'kcslCLSum',
		align: 'center',
		key: 'kcslCLSum'
	}
] //表头
const informationData = ref({
	zcdzCity: '',
	dwmc: '',
	orgName: '',
	current: 1,
	size: 10
})
const tableData = ref([])
// 分页列表
const getDataList = () => {
	const fd = { ...informationData.value }
	reserveQuantityApi.reserveQuantityPage(fd).then((res) => {
		console.log(res, 'rergw')
		tableData.value = []
		tableData.value = res.records
		informationData.value.total = res.total
		console.log(tableData.value, res.records, 'tableData')
	})
}
// 表格分页
const onChangePage = (ev) => {
	informationData.value = { ...ev }
	if (isShowName.value == '1') {
		informationData.value.zcdzCity = ''
		informationData.value.dwmc = ''
		informationData.value.orgName = ''
	}
	getDataList()
}
//查询
const isShowName = ref('1')
const searchData = () => {
	informationData.value.current = 1
	if (informationData.value.total > 10) {
		isShowName.value = '2'
	} else {
		isShowName.value = '1'
	}
	getDataList()
}

// 重置输入框
const reset = () => {
	informationData.value = {
		zcdzCity: '',
		dwmc: '',
		orgName: '',
		current: 1,
		size: 10
	}
	getDataList()
}
const rowClick = (row) => {
	router.push({
		path: '/basic.info/reserveQuantity',
		query: {
			unitId: row.unitId
		}
	})
}
onMounted(() => {
	getDataList()
});
</script>
<style lang="less" scoped>
.header {
	display: flex;
	padding-top: 20px;
	padding-left: 50px;
	margin-bottom: 32px;
}

.inputBox {
	display: flex;
}

.inputBoxContent {
	width: 400px;
}

.btnBox {
	width: 260px;
	margin-left: 20px;
	justify-content: start;
	display: flex;
}

.select-box {
	margin-left: 12px;
}

.title-box {
	margin-left: 20px;
	line-height: 30px;
}

.ant-input-group-addon {
	border: 0;
}

.ant-input,
.ant-btn {
	border-radius: 5px;
}

.check {
	background-color: rgba(112, 125, 233);
	color: #fff;
}

.edit {
	background-color: rgba(222, 186, 80);
	color: #fff;
}

.delete {
	background-color: rgba(255, 70, 70);
	color: #fff;
}

::v-deep .ant-table-wrapper {
	padding: 0 10px;
}

.audit {
	background-color: rgba(83, 184, 36);
	color: #fff;
}

.ant-table-thead>tr>th {
	text-align: center;
}

.ant-table-tbody>tr>td {
	text-align: center;
}

::v-deep .ant-pagination-options {
	display: none !important;
}
</style>