<template>
	<div>
		<a-modal v-model:visible="visible" width="50%" :closable="false" :maskClosable="false" :title="titleText"
			:footer="null">
			<a-form style="margin-left: 16%;" ref="formRef" :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData"
				:rules="formRules">
				<a-form-item label="监测点名称：" name="name">
					<a-input autocomplete="off" v-model:value="formData.name" :disabled="showLock" placeholder="请输入" allow-clear />
				</a-form-item>
				<a-form-item label="所属市州：" name="cityAddress">
					<a-input autocomplete="off" v-model:value="formData.cityAddress" :disabled="showLock" placeholder="请输入所属市州"
						allow-clear />
				</a-form-item>
				<a-form-item label="所属行政管理部门" name="sysOrgId">
					<a-select class="select-box" :disabled="showLock" v-model:value="formData.sysOrgId" :size="size"
						style="width: 100%" @change="monitoringCahnge" placeholder="请选择">
						<a-select-option v-for="item in auditStatus" :key="item.id" :value="item.id">{{ item.name }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="详细位置" name="address">
					<a-input autocomplete="off" :maxlength="maxLength" v-model:value="formData.address" :disabled="showLock"
						placeholder="请输入" allow-clear />
				</a-form-item>
				<a-form-item label="定位开关" name="locationSwitch">
					<a-select @change="onLocation" :size="size" :disabled="showLock" style="width: 100%"
						v-model:value="formData.locationSwitch" placeholder="请选择">
						<a-select-option v-for="item in arrList" :key="item.value" :value="item.value">
							{{ item.label }}
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="经度：" name="longitude">
					<a-input autocomplete="off" v-model:value="formData.longitude" :disabled="showLock" placeholder="请输入经度"
						allow-clear />
				</a-form-item>
				<a-form-item label="纬度：" name="latitude">
					<a-input autocomplete="off" v-model:value="formData.latitude" :disabled="showLock" placeholder="请输入纬度"
						allow-clear />
				</a-form-item>
			</a-form>
			<div class="btn-box">
				<a-button v-if="dataObj.isType !== '3'" style="margin-right: 16px" type="primary" @click="handleOk">保存</a-button>
				<a-button @click="handleCancel">关闭</a-button>
			</div>
		</a-modal>
	</div>
</template>
<script setup>
import { isLongitude, isLatitude, latLngValidator } from '@/utils/validator'
import { message } from 'ant-design-vue'
import priceMonitorApi from '@/api/basic.info/priceMonitorApi'
import unReporCityApi from '@/api/basic.info/unReporCityApi.js'
const props = defineProps({
	dataObj: {
		type: Object,
		default: () => { }
	}
})
const formData = ref({})
const formRules = ref({
	name: [{ required: true, message: '请输入监测点名称', trigger: 'blur' }],
	cityAddress: [{ required: true, message: '请输入所属市州', trigger: 'blur' }],
	sysOrgId: [{ required: true, message: '请选择所属行政管理部门', trigger: 'change' }],
	address: [{ required: true, message: '请输入详细位置', trigger: 'blur' }],
	locationSwitch: [{ required: true, message: '请选择定位开关', trigger: 'change' }],
	longitude: [{ required: true, message: '请输入经度', trigger: 'blur' }, { validator: latLngValidator, trigger: 'blur' }
	],
	latitude: [{ required: true, message: '请输入纬度', trigger: 'blur' }, { validator: latLngValidator, trigger: 'blur' }
	]
})
const arrList = ref([
	{ label: '关', value: 0 }, { label: '开', value: 1 }
])
const isTypeData = ref('')
const showLock = ref(false)
const visible = ref(false)
const titleText = ref('')
const formRef = ref(null)
const emit = defineEmits(['isVisible'])

const auditStatus = ref([])
// 所属行政管理部门
const getSearchData = () => {
	unReporCityApi.unReporCityquery().then((res) => {
		auditStatus.value = res
	})
}
const orgId = ref('')
const monitoringCahnge = (val) => {
	auditStatus.value.filter(item => {
		item.name === val ? orgId.value = item.id : ''
	})
}
const onLocation = (val) => {
	console.log(val, 'val')
	formData.value.locationSwitch = val
}
// 取消按钮
const handleCancel = () => {
	closeData()
}
// 确定按钮
const handleOk = () => {
	console.log(formData.value, 'formData.value')
	formRef.value
		.validate()
		.then(() => {
			// isTypeData === '1' 新增  2是编辑 3是查看
			if (isTypeData.value === '1') return addData()
			if (isTypeData.value === '2') return editData()
		})
		.catch((error) => {
			message.warning('请填写完善')
			console.log('error', error)
		})
}
// 新增
const addData = () => {
	priceMonitorApi.priceMonitorAdd(formData.value).then((res) => {
		closeData()
	})
}
// 编辑
const editData = () => {
	formData.value.id = props.dataObj.id
	priceMonitorApi.priceMonitorEdit(formData.value).then((res) => {
		closeData()
	})
}
// 用于查看调用
const detailData = (val) => {
	priceMonitorApi.priceMonitorDetail({ id: val }).then((res) => {
		formData.value = {}
		formData.value.name = res.name
		formData.value.cityAddress = res.cityAddress
		formData.value.sysOrgId = res.sysOrgId
		formData.value.address = res.address
		formData.value.longitude = res.geoPoint.lng
		formData.value.latitude = res.geoPoint.lat
		formData.value.locationSwitch = res.locationSwitch
	})
}

const closeData = () => {
	visible.value = false
	emit('isVisible', false)
	formData.value = {}
	formRef.value.resetFields() //resetFields()函数是组件库提供的
}
// 监听点击事件更新数据
watch(
	() => props.dataObj,
	async (newValue, oldvalue) => {
		await nextTick()
		titleText.value = newValue.titleText
		visible.value = newValue.visible
		showLock.value = newValue.showLock
		isTypeData.value = newValue.isType
		// isType字段用于查看接口
		if (newValue.isType == '2' || newValue.isType == '3') {
			detailData(newValue.id)
		} else {
			// 用于新增时清空表格数据
			formData.value = {}
		}
	},
	{ deep: true, immediate: true }
)
onMounted(() => {
	getSearchData()
});
</script>
<style lang="less" scoped>
.ant-input {
	width: 80%;
}

/* 针对 a-form-item 的 label 应用样式 */
::v-deep .ant-form-item-label {
	width: 140px;
	text-align: right;
}

::v-deep .ant-form-item-control-input {
	width: 60%;
}

.title-box {
	width: 91.7%;
}

.ant-picker {
	width: 92%;
}

.ant-select {
	width: 100% !important;
}

.from-input {
	width: 60%;
}

::v-deep.ant-modal-footer {
	display: none !important;
}

.text-box {
	margin: 0 auto;
	width: 60%;
}

.btn-box {
	text-align: center;
}

.btn-type {
	background-color: #22ce8d;
	color: #fff;
}
</style>
