<!-- 轮换数量预警 -->
<template>
	<div>
		<a-space class="header">
			<div class="inputBox">
				<span class="title-box">{{ '承储企业' }}</span>
				<a-input
					:size="size"
					style="width: 200px"
					v-model:value="enterprise"
					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="dataSource" :row-key="(record) => record.key" :columns="columns"> </a-table>
	</div>
</template>
<script setup name="rotationProgram">
	const dataSource = ref([
		{
			nd: '2024',
			qymc: '测试数据',
			kqmc: '测试的数据',
			yjsj: '2024-04-22'
		}
	])
	const enterprise = ref('')
	const columns = [
		{
			title: '序号',
			dataIndex: 'Index',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{
			title: '年度',
			dataIndex: 'nd',
			align: 'center',
			key: 'nd'
		},
		{
			title: '企业名称',
			dataIndex: 'qymc',
			align: 'center',
			key: 'qymc'
		},
		{
			title: '库区名称',
			dataIndex: 'kqmc',
			align: 'center',
			key: 'kqmc'
		},
		{
			title: '预警时间',
			dataIndex: 'yjsj',
			align: 'center',
			key: 'yjsj'
		}
	] //表头

	//查询
	const searchData = () => {}

	// 重置输入框
	const reset = () => {
		enterprise.value = ''
	}
</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 {
		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;
	}
</style>
