<!-- 库区半月报表阈值设置 -->
<template>
	<div>
		<a-space class="header">
			<div class="input-box">
				<div class="input-box-sle">
					<span class="title-box">{{ '预警名称' }}</span>
					<a-input style="width: 220px" v-model:value="informationData.yjmc" placeholder="请输入" />
				</div>
			</div>
			<div class="btnBox">
				<a-button style="margin-right: 16px" @click="searchData">查询</a-button>
				<a-button style="margin-right: 16px" @click="reset">重置</a-button>
				<a-button type="primary" @click="addData">新增</a-button>
			</div>
		</a-space>
		<a-table
			:dataSource="dataSource"
			:row-key="(record) => record.key"
			:pagination="tablePage"
			@change="onChangePage"
			:columns="columns"
		>
			<template #bodyCell="{ column, record }">
				<template v-if="column.key === 'action'">
					<span>
						<a-button class="check" @click="check(record)">查看</a-button>
						<a-button class="edit" @click="edit(record)">编辑</a-button>
						<a-popconfirm title="确定删除此条数据？" @confirm="deleteData(record)">
							<a-button class="delete">删除</a-button>
						</a-popconfirm>
					</span>
				</template>
			</template>
		</a-table>
		<!-- 查看--编辑--新增等操作 -->
		<Detailed :dataObj="dataObj" @isVisible="isVisible" />
	</div>
</template>
<script setup name="thresholdSetup">
	import Detailed from './detailed.vue'
	const columns = [
		{
			title: '序号',
			dataIndex: 'Index',
			align: 'center',
			customRender: ({ text, record, index }) => {
				return `${index + 1}`
			}
		},
		{
			title: '预警名称',
			dataIndex: 'yjmc',
			align: 'center',
			key: 'yjmc'
		},
		{
			title: '预警值',
			dataIndex: 'yjz',
			align: 'center',
			key: 'yjz'
		},
		{
			title: '操作',
			dataIndex: 'action',
			align: 'center',
			key: 'action',
			width: '320px'
		}
	]
	const dataSource = ref([
		{
			wjmc: '测试数据',
			yjmc: '测试人员',
			yjz: '19'
		}
	])
	const dataObj = ref({
		visible: false,
		titleText: '',
		showLock: false,
		isType: '',
		id: ''
	})
	const informationData = ref({
		tjmc: '',
		current: 1,
		size: 10
	})
	// 表格分页
	const onChangePage = (ev) => {
		Object.assign(informationData, ev)
		onSearch()
	}
	// 列表分页
	const onSearch = () => {
		// const fd = { ...informationData.value }
		// console.log(fd, 'fa')
		// unitInfoApi.unitInfoPage(fd).then((res) => {})
	}
	// 查询
	const searchData = () => {
		onSearch()
	}
	// 重置
	const reset = () => {
		dataObj.value.isType = ''
		informationData.value = {
			yjmc: '',
			current: 1,
			size: 10
		}
		onSearch()
	}
	// 新增
	const addData = () => {
		dataObj.value.isType = '1'
		dataObj.value.titleText = '新增预警'
		dataObj.value.visible = true
		dataObj.value.showLock = false
	}
	// 查看
	const check = (row) => {
		dataObj.value.id = row.id
		dataObj.value.isType = '3'
		dataObj.value.titleText = '查看预警'
		dataObj.value.visible = true
		dataObj.value.showLock = true
	}
	// 编辑
	const edit = (row) => {
		dataObj.value.id = row.id
		dataObj.value.isType = '2'
		dataObj.value.titleText = '编辑预警'
		dataObj.value.visible = true
		dataObj.value.showLock = false
	}
	// 删除
	const deleteData = (row) => {
		// unitInfoApi.unitInfoDelete(unitInfoIdParamList.value).then((res) => {
		// 	onSearch()
		// })
	}
	// 子组件传递
	const isVisible = (val) => {
		console.log(val, 'valaaa')
		dataObj.value.visible = false
		dataObj.value.showLock = false
		dataObj.value.titleText = ''
		onSearch()
	}

	onMounted(() => {
		// onSearch()
	})
</script>
<style scoped>
	.header {
		display: flex;
		padding: 20px;
		width: 100%;
	}
	.input-box {
		display: flex;
		width: 100%;
	}
	.input-box-sle {
		width: 92%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 24px;
	}
	.title-box {
		width: 68px;
	}
	.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;
	}
	.add-btn {
		background-color: rgba(112, 125, 233);
	}
	.check {
		background-color: rgba(112, 125, 233);
		color: #fff;
		margin-left: 8px;
	}
	.edit {
		background-color: rgba(222, 186, 80);
		color: #fff;
		margin-left: 8px;
	}
	.flow {
		background-color: #22ce8d;
		color: #fff;
		margin-left: 8px;
	}
	.delete {
		background-color: rgba(255, 70, 70);
		color: #fff;
		margin-left: 8px;
	}
	.audit {
		background-color: rgba(83, 184, 36);
		color: #fff;
		margin-left: 8px;
	}
	.ant-table-thead > tr > th {
		text-align: center;
	}
	.ant-table-tbody > tr > td {
		text-align: center;
	}
</style>
