<template>
	<div>
		<a-space class="header">
			<div class="inputBox">
				<span class="title-box">{{ '市州' }}</span>
				<a-select
					class="select-box"
					v-model:value="selectedValue"
					:size="size"
					style="width: 200px"
					@change="firstSelectChange"
					placeholder="请选择"
				>
					<a-select-option v-for="item in auditStatus" :key="item.id" :value="item.id">
						{{ item.name }}
					</a-select-option>
				</a-select>
			</div>
			<div class="silt-title">
				<span style="width: 100px; display: block">{{ '站点名称' }}</span>
				<a-input v-model.trim="siteName" placeholder="请输入" @input="handleInput" />
			</div>
			<div class="btnBox">
				<a-button @click="searchData">查询</a-button>
				<a-button @click="reset">重置</a-button>
				<a-button type="primary" @click="add">导出</a-button>
			</div>
		</a-space>
		<a-table :dataSource="dataSource" :columns="columns" :customRow="rowClick">
			<template #bodyCell="{ column, record }"></template>
		</a-table>
	</div>
</template>
<script setup name="unReportPriceMonitor">
	import downloadUtil from '@/utils/downloadUtil'
	import unReporCityApi from '@/api/basic.info/unReporCityApi.js'
	import unReportPriceMonitorApi from '@/api/basic.info/unReportPriceMonitorApi.js'
	import { useRoute, useRouter } from 'vue-router'
	const selectedValue = ref(null)
	const siteName = ref('')
	const auditStatus = ref([]);

	const dataSource = ref([])
	const route = useRoute()
	const router = useRouter()
	const sysOrgId = ref(route.query)
	const columns = [
		{
			title: '序号',
			dataIndex: 'Index',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{
			title: '市州',
			dataIndex: 'sysOrgId',
			align: 'center',
			key: 'sysOrgId'
		},
		{
			title: '站点名称',
			dataIndex: 'stateName',
			align: 'center',
			key: 'stateName'
		},
		{
			title: '漏报次数',
			dataIndex: 'unReportCount',
			align: 'center',
			key: 'unReportCount'
		},
		{
			title: '错报次数',
			dataIndex: 'falseReportCount',
			align: 'center',
			key: 'falseReportCount'
		},
		{
			title: '未在实地采集次数',
			dataIndex: 'unSelfPriceMonitorCount',
			align: 'center',
			key: 'unSelfPriceMonitorCount'
		}
	] //表头
	// 下拉框数据
	const getSearchData = () => {
		unReporCityApi.unReporCityquery().then((res) => {
			auditStatus.value = res
		})
	}
	// 下拉框的选择
	const firstSelectChange = () => {}
	const obj = ref({
		priceMonitorId: '',
		sysOrgName: '',
		unReportCityId: ''
	})
	// 获取站点列表
	const getListData = (data) => {
		unReportPriceMonitorApi
			.unReportPriceMonitorPage({ sysOrgId: data.sysOrgId, searchKey: siteName.value })
			.then((res) => {
				console.log(res, 852963)
				dataSource.value = []
				const arr = ref([])
				arr.value = res.records
				arr.value.forEach((item) => {
					dataSource.value.push({
						...item,
						sysOrgId: data.sysOrgId
					})
				})
			})
	}
	//查询
	const searchData = () => {
		const objArr = reactive({
			sysOrgId: selectedValue.value
		})
		getListData(objArr)
	}

	// 重置输入框
	const reset = () => {
		selectedValue.value = ''
		siteName.value = ''
		getListData(selectedValue.value)
	}
	// 导出
	const add = () => {
		const fd = {
			priceMonitorId:route.query.sysOrgId||null,
			unReportCityId:selectedValue.value || null,
			sysOrgName:siteName.value || null
		}
		unReportPriceMonitorApi.unReportPriceMonitorExle(fd).then(({data}) => {
			const blob = new Blob([data], {
				type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
			});
			const BlobURL = window.URL.createObjectURL(blob);
			const link = document.createElement('a');
			link.href = BlobURL
			link.download = 'tableData.xlsx';
			link.click();
			window.URL.revokeObjectURL(BlobURL);
		})
	}
	// 禁止输入空格和特殊字符
	// const handleInput = (e) => {
	// 	// 使用正则表达式过滤特殊字符
	// 	const regex = /^[^\s~`!#$%\^&*()+=[\]{}:;<'>,.<>/?]+$/
	// 	const value = e.target.value
	// 	// 如果输入值包含非法字符，则将其设置回上一个合法的值
	// 	if (!regex.test(value)) {
	// 		e.target.value = siteName.value
	// 	} else {
	// 		siteName.value = value
	// 	}
	// }
	onMounted(() => {
		console.log(sysOrgId.value, 'sysOrgId.value')
		getListData(sysOrgId.value), getSearchData()
	})
</script>
<style lang="less" scoped>
	.header {
		width: 60%;
		display: flex;
		justify-content: space-evenly;
		padding-top: 20px;
		padding-left: 50px;
		margin-bottom: 32px;
	}
	.inputBox {
		width: 100%;
		display: flex;
	}
	.silt-title {
		width: 280px;
		display: flex;
		align-items: center;
	}
	.inputBoxContent {
		width: 400px;
	}
	.btnBox {
		width: 220px;
		margin-left: 20px;
		justify-content: space-evenly;
		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>
