<template>
	<div>
		<div class="flex-sub padding-lr" style="overflow-y: auto">
			<div class="solid-bottom padding-tb margin-bottom text-bold">基本配置</div>
			<el-form ref="gpsRef" :model="form" :rules="rules" label-width="120px">
				<div v-loading="loading">
					<el-form-item label="船舶MMSI" prop="MMSI">
						<el-input v-model="form.MMSI" placeholder="请输入船舶MMSI"/>
					</el-form-item>
					<el-form-item label="经度" prop="fLongitude">
						<el-input v-model="form.fLongitude" placeholder="请输入经度"/>
					</el-form-item>
					<el-form-item label="纬度" prop="fLatitude">
						<el-input v-model="form.fLatitude" placeholder="请输入纬度"/>
					</el-form-item>
					<el-form-item label="航速" prop="fSpeed">
					    <el-input v-model="form.fSpeed" placeholder="请输入航速"/>
					</el-form-item>
					<el-form-item label="航行状态" prop="status">
					    <el-select v-model="form.status" placeholder="选择状态">
							<el-option label="在航" :value="8" />
							<el-option label="系泊" :value="5" />
							<el-option label="锚泊" :value="1" />
							<el-option label="其他" :value="99" />
					    </el-select>
					</el-form-item>
				</div>
				<el-form-item>
					<el-button type="primary" @click="submitForm">保存配置</el-button>
					<el-button type="danger">删除配置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
	import { getGpsSet, setGpsSet } from "@/api/settConfiguration";
	const { proxy } = getCurrentInstance();
	const loading = ref(false);
	const data = reactive({
		form: {
			"MMSI" : "",
			"fLongitude": 0.0,
			"fLatitude" : 0.0,
			"fSpeed" : 3,
			"status" : 8,
		},
		rules: {
			MMSI: [{
				required: true,
				message: "请填写船舶mmsi",
				trigger: "blur",
			}],
			fLongitude: [{
				required: true,
				message: "请填写经度",
				trigger: "blur",
			}],
			fLatitude: [{
				required: true,
				message: "请填写纬度",
				trigger: "blur",
			}],
			fSpeed: [{
				required: true,
				message: "请填写航行速度",
				trigger: "blur",
			}],
			status: [{
				required: true,
				message: "请选择航行状态",
				trigger: "blur",
			}]
		}
	})
	const { form, rules } = toRefs(data);
	
	const submitForm = () => {
		proxy.$refs["gpsRef"].validate((valid) => {
			if (valid) {
				loading.value = true;
				setGpsSet(form.value).then((response) => {
					proxy.$modal.msgSuccess("修改成功");
					loading.value = false;
					getGpsInfo();
				});
			}
		});
	};
	
	const getGpsInfo = function(){
		getGpsSet().then((response) => {
			form.value = response.data[1];
		})
	}
	getGpsInfo()
</script>

<style>
</style>