<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-card title="采食饮水" style="margin-bottom: 10px">
		<template #extra>
			<a-space :size="10">
				<a-button type="primary" @click="savePig">保存</a-button>
			</a-space>
		</template>
		<a-form ref="formPig" :model="formDataPig" :rules="formRulesPig" layout="inline">
			<div style="width: 100%">
				<a-row class="row_bottom" :gutter="16" align="middle">
					<a-col :span="2">母猪</a-col>
					<a-col :span="4">
						<a-form-item label="采食上限" name="feedUpper">
							<a-input v-model:value="formDataPig.feedUpper">
								<template #addonAfter>Kg</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item label="采食下限" name="feedLower">
							<a-input v-model:value="formDataPig.feedLower">
								<template #addonAfter>Kg</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item label="饮水上限" name="waterUpper">
							<a-input v-model:value="formDataPig.waterUpper">
								<template #addonAfter>吨</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item label="饮水下限" name="waterLower">
							<a-input v-model:value="formDataPig.waterLower">
								<template #addonAfter>吨</template>
							</a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row class="row_bottom" :gutter="16" align="middle">
					<a-col :span="2">肥猪群体</a-col>
					<a-col :span="4">
						<a-form-item label="采食上限" name="fatFeedUpper">
							<a-input v-model:value="formDataPig.fatFeedUpper">
								<template #addonAfter>Kg</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item label="采食下限" name="fatFeedLower">
							<a-input v-model:value="formDataPig.fatFeedLower">
								<template #addonAfter>Kg</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item label="饮水上限" name="fatWaterUpper">
							<a-input v-model:value="formDataPig.fatWaterUpper">
								<template #addonAfter>吨</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item label="饮水下限" name="fatWaterLower">
							<a-input v-model:value="formDataPig.fatWaterLower">
								<template #addonAfter>吨</template>
							</a-input>
						</a-form-item>
					</a-col>
				</a-row>
			</div>
		</a-form>
	</a-card>
	<a-card v-for="(item, i) in feedList" :key="i" :title="item.feedingName" style="margin-bottom: 10px">
		<template #extra>
			<a-form style="width: 500px">
				<a-row align="middle">
					<a-col :span="20">
						<a-form-item label="余料下限">
							<a-input style="width: 160px" v-model:value="item.marginValue" type="number">
								<template #addonAfter>kg</template>
							</a-input>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item>
							<a-button type="primary" @click="saveFeed(item)">保存</a-button>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</template>
	</a-card>
</template>

<script setup name="feedThreshold">
	import bizWarnApi from "@/api/biz/bizWarnApi"
	import bizFeedThreshold from "@/api/biz/feed/bizFeedThreshold"
	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: 2
		}
		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
			}
			// bizEnergyThresholdApi.saveThreshold(params).then(() => {
			// 	message.success('保存成功')
			// })
		})
	}
	const formPig = ref()
	const formDataPig = ref({})
	const formRulesPig = ref({
		feedUpper: [required('请输入母猪采食上限')],
		feedLower: [required('请输入母猪采食下限')],
		waterUpper: [required('请输入母猪饮水上限')],
		waterLower: [required('请输入母猪饮水下限')],
		fatFeedUpper: [required('请输入肥猪群体采食上限')],
		fatFeedLower: [required('请输入肥猪群体采食下限')],
		fatWaterUpper: [required('请输入肥猪群体饮水上限')],
		fatWaterLower: [required('请输入肥猪群体饮水下限')]
	})
	const initPig = () => {
		bizFeedThreshold.getPigWarnList().then((res) => {
			formDataPig.value = res
		})
	}
	const savePig = () => {
		formPig.value.validate().then(() => {
			bizFeedThreshold.savePigWarn(formDataPig.value).then(() => {
				message.success('保存成功')
			})
		})
	}

	const feedList = ref([])
	const initFeed = () => {
		bizFeedThreshold.getFeedThresholdList().then(res => {
			feedList.value = res
		})
	}

	const saveFeed = (item) => {
		if (item.marginValue == '') {
			message.error('请填写余料下限')
			return
		}
		if (item.marginValue <= 0) {
			message.error('余料下限不能小于0')
			return
		}
		bizFeedThreshold.saveFeedThreshold(item).then(() => {
			// message.success('修改成功')
			initFeed()
		})
	}

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

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