<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"
					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="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" :row-key="(record) => record.key" :columns="columns">
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'sysOrgId'">
					<a @click="rowClick(record)">
						{{ record.sysOrgId }}
					</a>
				</template>
			</template>
		</a-table>
	</div>
</template>
<script setup name="unReporCity">
	import unReporCityApi from '@/api/basic.info/unReporCityApi.js'
	import downloadUtil from '@/utils/downloadUtil'
	import sysConfig from '@/config/index'
	import { useRouter } from 'vue-router'
	import service from "@/utils/request";
	const router = useRouter()
	const selectedValue = ref(null)
	const auditStatus = ref([])

	const dataSource = ref([])
	const columns = [
		{
			title: '序号',
			dataIndex: 'Index',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{
			title: '市州',
			dataIndex: 'sysOrgId',
			align: 'center',
			key: 'sysOrgId'
		},
		{
			title: '漏报次数',
			dataIndex: 'unReportCount',
			align: 'center',
			key: 'unReportCount'
		},
		{
			title: '错报次数',
			dataIndex: 'falseReportCount',
			align: 'center',
			key: 'falseReportCount'
		},
		{
			title: '未在实地采集次数',
			dataIndex: 'unSelfPriceMonitorCount',
			align: 'center',
			key: 'unSelfPriceMonitorCount'
		}
	] //表头

	// 获取市州列表数据
	const getListData = () => {
		unReporCityApi.unReporCityPage({ sysOrgId: selectedValue.value }).then((res) => {
			dataSource.value = res.records
		})
	}
	// 市州下拉框数据
	const getSearchData = () => {
		unReporCityApi.unReporCityquery().then((res) => {
			auditStatus.value = res
		})
	}
	//查询
	const searchData = () => {
		getListData()
	}
	// 导出
	let dataList = ref([])
	const add = () => {
		service({
			method: 'POST',
			url: '/basic.info/unReporCity/exportByEntity',
			data: { sysOrgId: selectedValue.value },
			responseType: 'blob',
		}).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 params = {
	// 	sysOrgId: selectedValue.value
	// }
	// unReporCityApi.exportData(params).then((res) => {
	// 	const a = document.createElement('a')
	// 	a.download = '文件名.xlsx'
	// 	a.href = res.n.file_url
	// 	document.body.appendChild(a)
	// 	a.click()
	// 	document.body.removeChild(a)
	// })

	// 重置输入框
	const reset = () => {
		selectedValue.value = ''
	}
	// 表格事件触发
	const rowClick = (row) => {
		router.push({
			path: '/basic.info/unReportPriceMonitor',
			query: {
				sysOrgId: row.sysOrgId,
				id: row.id
			}
		})
	}
	const token = JSON.parse(localStorage.getItem('TOKEN'))
	onMounted(() => {
		getListData(), getSearchData()
	})
</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: 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>
