<template>
	<div class="pricemoitorrecord">
		<a-space class="search">
			<div class="silt-title">
				<span style="width: 70px; margin-right: 12px; display: block; line-height: 30px">{{ '站点名称' }}</span>
				<a-input style="width: 220px" v-model:value="informationData.name" placeholder="请输入" />
			</div>
			<div class="btnBox">
				<a-button type="primary" class="primarySele" @click="onSearch"> 查询 </a-button>
				<a-button class="snowy-buttom-left" @click="onReset"> 重置 </a-button>
			</div>
		</a-space>
		<div class="list">
			<a-table :dataSource="dataSource" :row-key="(record) => record.key" :pagination="informationData"
				@change="onChangePage" :columns="tableColumns">
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'locationSwitch'">
						<a-switch v-model:checked="record['locationSwitch']"
							@change="(ev) => onChangeRowPosSwitch(ev, record)"></a-switch>
					</template>
					<template v-if="column.key === 'action'">
						<span>
							<a-button class="check" @click="onViewRow(record)">查看</a-button>
						</span>
					</template>
				</template>
			</a-table>
		</div>
	</div>
</template>
<script setup name="positioningManagement">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import priceMoitorRecordApi from '@/api/basic.info/priceMoitorRecordApi'
onMounted(() => {
	getSearchData()
})
const router = useRouter()
const tableColumns = [
	{
		title: '序号',
		dataIndex: 'Index',
		align: 'center',
		customRender: ({ text, record, index }) => {
			return `${index + 1}`
		}
	},
	{ title: '监测点名称', align: 'center', key: 'name', dataIndex: 'name' },
	{ title: '监测点地址', align: 'center', key: 'address', dataIndex: 'address' },
	{ title: '操作人', align: 'center', key: 'createUser', dataIndex: 'createUser' },
	{ title: '操作时间', align: 'center', key: 'createTime', dataIndex: 'createTime' },
	{ title: '定位开关', key: 'locationSwitch' },
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		key: 'action',
		width: '300px'
	}
]
const informationData = ref({
	name: '',
	current: 1,
	size: 10,
})
const dataSource = ref([])
const isShowName = ref('1')
// 查询
const onSearch = () => {
	informationData.value.current = 1
	if (informationData.value.total > 10) {
		isShowName.value = '2'
	} else {
		isShowName.value = '1'
	}
	getSearchData()
}
// 重置
const onReset = () => {
	informationData.value.name = ''
	informationData.value.current = 1
	informationData.value.size = 10
	getSearchData()
}
// 分页change
const onChangePage = (val) => {
	informationData.value = { ...val }
	if (isShowName.value == '1') {
		informationData.value.name = ''
	}
	getSearchData()
}
// 列表分页
const getSearchData = () => {
	const fd = { ...informationData.value }
	// const userInfo = JSON.parse(localStorage.getItem('USER_INFO'))
	// console.log(userInfo.orgId, 'userInfo')
	// fd.orgId = userInfo.orgId
	priceMoitorRecordApi.priceMoitorRecordPage(fd).then((reg) => {
		dataSource.value = []
		dataSource.value = reg.records.map(item => {
			return {
				...item,
				locationSwitch: item.locationSwitch === 1 ? true : false
			}
		})
		informationData.value.total = reg.total
	})
}
// 路由跳转
function onViewRow(val) {
	router.push({
		path: '/basic.info/pricemoitorrecordDetail',
		query: val
	})
}
function onChangeRowPosSwitch(ev, row) {
	const params = {
		locationSwitch: null,
		priceMonitorId: row.priceMonitorId,
	}
	if (ev) {
		params.locationSwitch = 1
	} else {
		params.locationSwitch = 0
	}
	console.log(row, 'params')
	priceMoitorRecordApi.addFrom(params).then((res) => {
	})
}
</script>
<style lang="less" scoped>
.search {
	padding-top: 20px;
	padding-left: 50px;
	margin-bottom: 32px;

	.btnBox {
		display: inline-block;
		width: 200px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
}

.silt-title {
	display: flex;
}

.ant-select-selector {
	display: none !important;
}

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