<template>
	<a-card title="预警责任人" :bordered="false" style="margin-bottom: 10px">
		<template #extra>
			<a-space :size="10">
				<a-button type="primary" @click="savePerson">保存</a-button>
			</a-space>
		</template>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="inline">
			<div style="width: 100%">
				<a-row class="row_bottom" :gutter="16" align="middle">
					<a-col :span="3">
						<span>第一责任人</span>
					</a-col>
					<a-col :span="4">
						<a-form-item label="姓名" name="firstId">
							<a-select v-model:value="formData.firstId" placeholder="请选择人员" @change="firstChange">
								<a-select-option v-for="item in personList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="5">
						<a-form-item label="手机号" name="firstPhone">
							<a-input type="number" disabled v-model:value="formData.firstPhone" placeholder="请输入手机号"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="row_bottom" :gutter="16" align="middle">
					<a-col :span="3">
						<span>第二责任人</span>
					</a-col>
					<a-col :span="4">
						<a-form-item label="姓名" name="twoId">
							<a-select v-model:value="formData.twoId" @change="twoChange" placeholder="请选择人员">
								<a-select-option v-for="item in personList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="5">
						<a-form-item label="手机号" name="twoPhone">
							<a-input disabled v-model:value="formData.twoPhone" type="number" placeholder="请输入手机号"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="row_bottom" :gutter="5" align="middle">
					<a-col :span="2">
						<a-form-item name="warningUpgradeTime">
							<a-input v-model:value="formData.warningUpgradeTime" type="number"></a-input>
						</a-form-item>
					</a-col>
					<a-col>分钟内预警未排除，将自动转任务给一级责任人</a-col>
				</a-row>
			</div>
		</a-form>
	</a-card>
	<a-collapse v-model:activeKey="active" expand-icon-position="right" accordion>
		<a-collapse-panel v-for="item in thresholdList" :key="item.buildingId" :header="item.buildingName">
			<template #extra>
				<div @click.stop>
					<a-switch @change="checkedChange($event, item)" v-model:checked="item.checked">
						<template #checkedChildren><check-outlined /></template>
						<template #unCheckedChildren><close-outlined /></template>
					</a-switch>
				</div>
			</template>
			<template v-for="(i, k) in item.list">
				<a-collapse v-model:activeKey="activeKey" accordion style="margin-bottom: 10px" @change="changeKey($event, i, k)">
					<a-collapse-panel :key="i.unitId" :header="i.unitName" accordion>
						<template #extra>
							<a-space>
								<a-button type="primary" @click.stop="sync(i, k, item)">同步</a-button>
								<a-button type="primary" @click.stop="saveForm(i, k)">保存</a-button>
							</a-space>
						</template>
						<a-form :ref="'myForm' + k" :model="formSle" :rules="formRuleSle">
							<a-row :gutter="20">
								<a-col :span="6">
									<a-form-item label="春季温度上限" name="springTemUpper">
										<a-input v-model:value="formSle.springTemUpper" type="number">
											<template #addonAfter>
												<span>℃</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="春季温度下限" name="springTemLower">
										<a-input v-model:value="formSle.springTemLower" type="number">
											<template #addonAfter>
												<span>℃</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="春季湿度上限" name="springHumiUpper">
										<a-input v-model:value="formSle.springHumiUpper" type="number">
											<template #addonAfter>
												<span>RH</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="春季湿度下限" name="springHumiLower">
										<a-input v-model:value="formSle.springHumiLower" type="number">
											<template #addonAfter>
												<span>RH</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
							</a-row>
							<a-row :gutter="20">
								<a-col :span="6">
									<a-form-item label="夏季温度上限" name="summerTemUpper">
										<a-input v-model:value="formSle.summerTemUpper" type="number">
											<template #addonAfter>
												<span>℃</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="夏季温度下限" name="summerTemLower">
										<a-input v-model:value="formSle.summerTemLower" type="number">
											<template #addonAfter>
												<span>℃</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="夏季湿度上限" name="summerHumiUpper">
										<a-input v-model:value="formSle.summerHumiUpper" type="number">
											<template #addonAfter>
												<span>RH</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="夏季湿度下限" name="summerHumiLower">
										<a-input v-model:value="formSle.summerHumiLower" type="number">
											<template #addonAfter>
												<span>RH</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
							</a-row>
							<a-row :gutter="20">
								<a-col :span="6">
									<a-form-item label="秋季温度上限" name="autumnTemUpper">
										<a-input v-model:value="formSle.autumnTemUpper" type="number">
											<template #addonAfter>
												<span>℃</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="秋季温度下限" name="autumnTemLower">
										<a-input v-model:value="formSle.autumnTemLower" type="number">
											<template #addonAfter>
												<span>℃</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="秋季湿度上限" name="autumnHumiUpper">
										<a-input v-model:value="formSle.autumnHumiUpper" type="number">
											<template #addonAfter>
												<span>RH</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="秋季湿度下限" name="autumnHumiLower">
										<a-input v-model:value="formSle.autumnHumiLower" type="number">
											<template #addonAfter>
												<span>RH</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
							</a-row>
							<a-row :gutter="20">
								<a-col :span="6">
									<a-form-item label="冬季温度上限" name="winterTemUpper">
										<a-input v-model:value="formSle.winterTemUpper" type="number">
											<template #addonAfter>
												<span>℃</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="冬季温度下限" name="winterTemLower">
										<a-input v-model:value="formSle.winterTemLower" type="number">
											<template #addonAfter>
												<span>℃</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="冬季湿度上限" name="winterHumiUpper">
										<a-input v-model:value="formSle.winterHumiUpper" type="number">
											<template #addonAfter>
												<span>RH</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
								<a-col :span="6">
									<a-form-item label="冬季湿度下限" name="winterHumiLower">
										<a-input v-model:value="formSle.winterHumiLower" type="number">
											<template #addonAfter>
												<span>RH</span>
											</template>
										</a-input>
									</a-form-item>
								</a-col>
							</a-row>
						</a-form>
					</a-collapse-panel>
				</a-collapse>
			</template>
		</a-collapse-panel>
	</a-collapse>
</template>

<script setup name="threshold">
	import bizWarnApi from "@/api/biz/bizWarnApi"
	import bizThresholdApi from "@/api/biz/bizThresholdApi"
	import { required, rules } from "@/utils/formRules"
	import { message } from "ant-design-vue";
	const { proxy } = getCurrentInstance()
	const formRef = ref()
	const formData = ref({
		firstId: '',
		firstPhone: '',
		twoId: '',
		twoPhone: '',
		warningUpgradeTime: ''
	})
	const formRules = ref({
		firstId: [required('请选择姓名')],
		twoId: [required('请选择姓名')],
		warningUpgradeTime: [required('请输入时间'), rules.integer]
	})
	const personList = ref([])
	const initCrew = async () => {
		await bizWarnApi.getPersonList().then((res) => {
			personList.value = res
		})
	}
	const initPerson = async () => {
		let params = {
			type: 0
		}
		await bizWarnApi.getWarnPerson(params).then((res) => {
			formData.value = {
				firstId: res.firstManager[0]?.userId ? res.firstManager[0]?.userId : '',
				firstPhone: res.firstManager[0]?.phone ? res.firstManager[0]?.phone : '',
				twoId: res.secondManager[0]?.userId ? res.secondManager[0]?.userId : '',
				twoPhone: res.secondManager[0]?.phone ? res.secondManager[0]?.phone : '',
				warningUpgradeTime: res.warningUpgradeTime ? res.warningUpgradeTime : ''
			}
		})
	}

	const firstChange = (val) => {
		personList.value.forEach((item) => {
			if (item.id === val) {
				formData.value.firstPhone = item.phone
			}
		})
	}

	const twoChange = (val) => {
		personList.value.forEach((item) => {
			if (item.id === val) {
				formData.value.twoPhone = item.phone
			}
		})
	}
	const savePerson = () => {
		formRef.value.validate().then(() => {
			let params = {
				firstManagerId: formData.value.firstId,
				secondManagerId: formData.value.twoId,
				type: 0,
				warningUpgradeTime: formData.value.warningUpgradeTime
			}
			bizWarnApi.saveWarnPerson(params).then(() => {
				message.success('保存成功')
			})
		})
	}
	const active = ref('')
	const activeKey = ref('')
	const thresholdList = ref([])
	const initThreshold = () => {
		bizThresholdApi.getThresholdList().then(res => {
			res.forEach(item => {
				item.checked = item.isEnable ? true : false
			})
			thresholdList.value = res
			if (res.length > 0) {
				active.value = res[0].buildingId
			}
		})
	}

	const checked = ref(true)

	const formSle = ref({})
	const myForm = ref()
	const changeKey = (val, item) => {
		if (val) {
			formSle.value = item
		}
	}
	const formRuleSle = ref({
		autumnHumiLower: [required('请输入秋季湿度下限')],
		autumnHumiUpper: [required('请输入秋季湿度上限')],
		autumnTemLower: [required('请输入秋季温度下限')],
		autumnTemUpper: [required('请输入秋季温度上限')],
		springHumiLower: [required('请输入春季湿度下限')],
		springHumiUpper: [required('请输入春季湿度上限')],
		springTemLower: [required('请输入春季温度下限')],
		springTemUpper: [required('请输入春季温度上限')],
		summerHumiLower: [required('请输入夏季湿度下限')],
		summerHumiUpper: [required('请输入夏季湿度上限')],
		summerTemLower: [required('请输入夏季温度下限')],
		summerTemUpper: [required('请输入夏季温度上限')],
		winterHumiLower: [required('请输入冬季湿度下限')],
		winterHumiUpper: [required('请输入冬季湿度上限')],
		winterTemLower: [required('请输入冬季温度下限')],
		winterTemUpper: [required('请输入冬季温度上限')]
	})

	const saveForm = (i, k) => {
		if (activeKey.value !== i.unitId) {
			message.error('请先打开在保存')
			return false
		} else {
			proxy.$refs['myForm' + k][0].validate().then(() => {
				let params = {
					autumnHumiLower: formSle.value.autumnHumiLower,
					autumnHumiUpper: formSle.value.autumnHumiUpper,
					autumnTemLower: formSle.value.autumnTemLower,
					autumnTemUpper: formSle.value.autumnTemUpper,
					isEnable: formSle.value.isEnable,
					springHumiLower: formSle.value.springHumiLower,
					springHumiUpper: formSle.value.springHumiUpper,
					springTemLower: formSle.value.springTemLower,
					springTemUpper: formSle.value.springTemUpper,
					summerHumiLower: formSle.value.summerHumiLower,
					summerHumiUpper: formSle.value.summerHumiUpper,
					summerTemLower: formSle.value.summerTemLower,
					summerTemUpper: formSle.value.summerTemUpper,
					unitId: formSle.value.unitId,
					winterHumiLower: formSle.value.winterHumiLower,
					winterHumiUpper: formSle.value.winterHumiUpper,
					winterTemLower: formSle.value.winterTemLower,
					winterTemUpper: formSle.value.winterTemUpper
				}
				bizThresholdApi.saveThreshold(params).then(() => {
					message.success('保存成功')
				})
			})
		}
	}

	const checkedChange = (val, item) => {
		let params = {
			unitId: item.buildingId,
			isEnable: val ? 1 : 0
		}
		bizThresholdApi.updateThreshold(params).then(() => {
			message.success('修改成功')
		})
	}

	// 同步
	const sync = (i, k, item) => {
		if (activeKey.value !== i.unitId) {
			message.error('请先打开在同步')
			return false
		} else {
			proxy.$refs['myForm' + k][0].validate().then(() => {
				let params = {
					autumnHumiLower: formSle.value.autumnHumiLower,
					autumnHumiUpper: formSle.value.autumnHumiUpper,
					autumnTemLower: formSle.value.autumnTemLower,
					autumnTemUpper: formSle.value.autumnTemUpper,
					isEnable: formSle.value.isEnable,
					springHumiLower: formSle.value.springHumiLower,
					springHumiUpper: formSle.value.springHumiUpper,
					springTemLower: formSle.value.springTemLower,
					springTemUpper: formSle.value.springTemUpper,
					summerHumiLower: formSle.value.summerHumiLower,
					summerHumiUpper: formSle.value.summerHumiUpper,
					summerTemLower: formSle.value.summerTemLower,
					summerTemUpper: formSle.value.summerTemUpper,
					unitId: item.buildingId,
					winterHumiLower: formSle.value.winterHumiLower,
					winterHumiUpper: formSle.value.winterHumiUpper,
					winterTemLower: formSle.value.winterTemLower,
					winterTemUpper: formSle.value.winterTemUpper
				}
				bizThresholdApi.saveSync(params).then(() => {
					message.success('同步成功')
					initThreshold()
				})
			})
		}
	}

	onMounted(async () => {
		await initCrew()
		await initPerson()
		initThreshold()
	})
</script>

<style scoped>
	.row_bottom {
		margin-bottom: 10px;
	}
</style>
