<template>
	<a-card title="预警责任人" :bordered="false" style="margin-bottom: 10px">
		<template #extra>
			<a-space :size="10">
<!--				<a-button>添加</a-button>-->
				<a-button type="primary" @click="savePerson">保存</a-button>
			</a-space>
		</template>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="horizontal">
			<div style="width: 100%">
				<a-row class="row_bottom" :gutter="16" align="middle">
					<a-col :span="3">
						<a-form-item>
							<span>第一责任人</span>
						</a-form-item>
					</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">
						<a-form-item>
							<span>第二责任人</span>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item label="姓名" name="twoId">
							<a-select v-model:value="formData.twoId" placeholder="请选择人员" @change="twoChange">
								<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-form-item>
							分钟内预警未排除，将自动转任务给一级责任人
						</a-form-item>
					</a-col>
				</a-row>
			</div>
			<a-card title="风险等级设置" :bordered="false" style="margin-bottom: 10px">
				<a-row :gutter="16">
					<a-col :span="6">
						<a-form-item label="人员行为异常">
							<a-select></a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="车辆异常">
							<a-select></a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="外来生物异常">
							<a-select></a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="镜头脏污">
							<a-select></a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-card>
			<a-card title="预警时段" :bordered="false" style="margin-bottom: 10px">
				<a-row>
					<a-col :span="1">
						<a-form-item>每天</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item>
							<a-input></a-input>
						</a-form-item>
					</a-col>
					<a-col :span="1">
						<a-form-item>~</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item>
							<a-input></a-input>
						</a-form-item>
					</a-col>
				</a-row>
			</a-card>
		</a-form>
	</a-card>
</template>

<script setup name="aiThreshold">
	import {required, rules} from "@/utils/formRules";
	import bizWarnApi from "@/api/biz/bizWarnApi";
	import {message} from "ant-design-vue";

	const activeKey = ref(1)
	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: 3
		}
		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: 3,
				warningUpgradeTime: formData.value.warningUpgradeTime
			}
			bizWarnApi.saveWarnPerson(params).then(() => {
				message.success('保存成功')
			})
		})
	}

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

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