<template>
	<div>
		<a-space class="header">
			<div class="input-box">
				<div class="silt-title">
					<span style="width: 70px; margin-right: 12px; display: block">{{ '站点名称' }}</span>
					<a-input @input="handleInput" style="width: 220px" v-model:value="pagination.username" placeholder="请输入" />
				</div>
				<div class="input-box-sle">
					<span class="title-box">{{ '审核状态' }}</span>
					<a-select
						class="select-box"
						v-model:value="status"
						:size="size"
						style="width: 200px"
						@change="handleMenuClick"
						placeholder="请选择"
					>
						<a-select-option v-for="(item, i) in statusArray" :key="item.key">
							{{ item.name }}
						</a-select-option>
					</a-select>
				</div>
			</div>
			<div class="btnBox">
				<a-button style="margin-right: 16px" @click="searchData">查询</a-button>
				<a-button @click="reset">重置</a-button>
			</div>
		</a-space>
		<a-table :dataSource="dataSource" :row-key="(record) => record.key" :pagination="false" :columns="columns">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'action'">
					<span>
						<a-button class="check" @click="check(record)">查看</a-button>
						<a-button v-if="record.status != 1" class="edit" @click="edit(record)">编辑</a-button>
						<a-button v-if="record.status === 2" class="delete" @click="deleteData">驳回</a-button>
						<a-button v-if="record.status != 1" class="audit" @click="audit">审核</a-button>
					</span>
				</template>
			</template>
		</a-table>
		<a-pagination
			@change="onChange"
			size="small"
			:total="pagination.total"
			:show-total="(total) => `共 ${pagination.total} 条`"
		/>
		<!-- 抽屉开关 -->
		<a-drawer
			:visible="visible"
			:closable="false"
			width="1000px"
			placement="right"
			@close="handleClose"
			class="custom-class"
			root-class-name="root-class-name"
			:root-style="{ color: 'blue' }"
			:title="titleData"
		>
			<!-- 查看抽屉 -->
			<Form v-if="showData" :detailsData="detailData" />
			<!--编辑抽屉  -->
			<draft v-if="showEdit" @getClose="getClose" :detailsData="detailData" />
		</a-drawer>
	</div>
</template>
<script setup name="bizGrainPriceCollect">
	import Form from './querySee.vue'
	import draft from './draft.vue'
	import bizGrainPriceCollectApi from '@/api/basic.info/bizGrainPriceCollectApi'
	const status = ref(null)
	const pagination = ref({
		// 分页配置
		pageSize: 10, // 每页显示的条数
		showSizeChanger: true, // 是否可以改变每页显示的条数
		showQuickJumper: true, // 是否可以快速跳转到指定页
		current: 1, // 当前页数
		total: null, // 总条数
		username: ''
	})
	const detailData = ref({})
	const titleData = ref('')
	// 抽屉是否打开
	const visible = ref(false)
	const showData = ref(false) //查看抽屉
	const showEdit = ref(false) //编辑抽屉
	// 列表数据
	const dataSource = ref([])
	const statusArray = ref([
		{
			key: 0,
			name: '待审核'
		},
		{
			key: 1,
			name: '已审核'
		},
		{
			key: 2,
			name: '驳回'
		}
	]) // 下拉框数据
	const columns = ref([
		{
			title: '序号',
			dataIndex: 'Index',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{
			title: '监测点名称',
			dataIndex: 'monitorName',
			align: 'center',
			key: 'monitorName'
		},
		{
			title: '价格采集人',
			dataIndex: 'userCollectName',
			align: 'center',
			key: 'userCollectName'
		},
		{
			title: '所属州市',
			dataIndex: 'orgName',
			align: 'center',
			key: 'orgName'
		},
		{
			title: '采集时间',
			dataIndex: 'userCollectTime',
			align: 'center',
			key: 'userCollectTime'
		},
		{
			title: '审核状态',
			dataIndex: 'status',
			align: 'center',
			key: 'status'
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			key: 'action'
		}
	])

	// 审核状态修改
	const handleMenuClick = (value) => {
		status.value = value
	}
	// 抽屉关闭事件
	const handleClose = () => {
		visible.value = false
	}
	// 子组件的自定义方法
	function getClose(item) {
		console.log(item, 'hhhhhh')
		visible.value = item
		handleClose()
	}

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

	// 重置输入框
	const reset = () => {
		pagination.value.username = ''
		status.value = null
		getListData()
	}
	// 列表数据
	const getListData = () => {
		dataSource.value = []
		console.log(pagination.value.username, ' pagination.value.username')
		const params = ref({
			current: pagination.value.current, //当前页码
			isApp: 0, //是否移动端
			monitorName: pagination.value.username, //监测点名称
			size: pagination.value.pageSize, //每页条数
			status: status.value //审核状态
		})
		bizGrainPriceCollectApi.bizGrainPriceCollectPage(params.value).then((res) => {
			console.log(res, 'res')
			pagination.value.total = res.total
			dataSource.value = res.records.map((i) => {
				return {
					...i,
					status: i.status === 0 ? '待审核' : i.status === 1 ? '已审核' : '驳回'
				}
			})
		})
	}
	// 分页
	const onChange = (page, pageSize) => {
		pagination.value.current = page
		getListData()
	}
	//列表操作栏方法实现
	// 查看
	const check = (val) => {
		console.log('detailData.value', val)
		detailData.value = val
		titleData.value = '粮食价格采集查看'
		showEdit.value = false
		showData.value = true
		visible.value = true
	}
	// 编辑
	const edit = (val) => {
		detailData.value = val
		titleData.value = '粮食价格采集编辑'
		showData.value = false
		showEdit.value = true
		visible.value = true
	}
	// 驳回
	const deleteData = () => {}
	// 审核
	const audit = () => {}
	onMounted(() => {
		getListData()
	})
</script>
<style scoped>
	.header {
		display: flex;
		padding: 20px;
		width: 100%;
	}
	.input-box {
		display: flex;
		width: 100%;
	}
	.input-box-sle {
		width: 56%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 24px;
	}
	.title-box {
		margin-right: 12px;
	}
	.inputBoxContent {
		width: 400px;
	}
	.silt-title {
		width: 280px;
		display: flex;
		align-items: center;
		margin-right: 32px;
	}
	.btnBox {
		display: flex;
	}
	.ant-input-group-addon {
		border: 0;
	}
	.ant-input,
	.ant-btn {
		border-radius: 5px;
	}
	.ant-pagination {
		margin-top: 12px;
		float: right;
		margin-right: 16px;
	}
	.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;
	}
	.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>
