<template>
	<div class="overview">
		<el-dialog :show-close="false" v-model="visible1" width="60%" @close="closeMain" v-if="!testMapVisible">
			<template #title>
				<div class="title-detail">
					<img src="@/assets/images/tableIcon/look.png" alt="" />
					<span>{{ props.title }}</span>
					<el-icon>
						<close @click="closeMain" />
					</el-icon>
				</div>
			</template>
			<el-form ref="formRef" :model="formData" label-width="auto" :rules="rules" class="basic-form" size="default">
				<div class="basic-info">
					<div class="form-content">
						<div class="row">
							<el-form-item label="类型:" prop="type">
								<el-select v-model="formData.type" placeholder="请选择" style="width: 100%" @change="typeChange">
									<el-option v-for="item in lineTypeList" :key="item.value" :label="item.label" :value="item.value" />
								</el-select>
							</el-form-item>
						</div>
						<div class="row" v-if="formData.type != 'ODLine'">
							<el-form-item label="坐标点位:" :required="true">
								<div class="table-content" v-for="(item, index) in addPositions" :key="index">
									<div class="table-head">
										<div class="head-value">经度{{ index + 1 }}</div>
										<div class="head-value">纬度{{ index + 1 }}</div>
										<div class="head-value">高度{{ index + 1 }}</div>
									</div>
									<div class="table-body">
										<div class="body-value">
											<el-input v-model="item.lng" style="width: 100%" placeholder="请输入" />
										</div>
										<div class="body-value">
											<el-input v-model="item.lat" placeholder="请输入" />
										</div>
										<div class="body-value">
											<el-input v-model="item.alt" placeholder="请输入" />
										</div>
										<div class="body-operate">
											<el-button type="danger" link @click="deleteRow(index)">删除</el-button>
										</div>
									</div>
								</div>
								<div class="table-operate">
									<div>
										<el-button type="success" @click="appendRow">追加</el-button>
									</div>
								</div>
							</el-form-item>
						</div>
						<div class="row">
							<el-form-item label="线宽度:" prop="width">
								<el-input-number v-model.number="formData.width" placeholder="请输入" controls-position="right" />
							</el-form-item>
							<el-form-item label="数据文件：" prop="jsonFile" v-if="formData.type == 'ODLine'">
								<el-upload
									ref="upload"
									:headers="headers"
									:file-list="fileList"
									class="upload-demo"
									:action="`${baseUrl}` + '/xmgl/file/upload'"
									:on-remove="onRemove"
									multiple
									:limit="1"
									:on-success="uploadSuccess"
									style="width: 100%"
								>
									<el-button class="uploadBtn" type="primary">点击上传</el-button>
								</el-upload>
							</el-form-item>
							<el-form-item label="线的背景颜色:" prop="bgColor" v-if="formData.type == 'ODLine'">
								<el-color-picker v-model="formData.bgColor" />
							</el-form-item>
							<el-form-item label="颜色:" prop="color">
								<el-color-picker v-model="formData.color" />
							</el-form-item>
							<el-form-item label="速度:" prop="speed">
								<el-input-number v-model.numer="formData.speed" controls-position="right" placeholder="请输入" />
							</el-form-item>
						</div>
						<div class="row">
							<el-form-item label="显示:" prop="show">
								<el-switch v-model="formData.show" style="--el-switch-on-color: #13ce66" />
							</el-form-item>
						</div>
						<div class="row" v-if="props.title == '编辑线效果'">
							<el-form-item label="可视化设置预览:">
								<el-button type="primary" @click="openTestMap">编辑</el-button>
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form>
			<template #footer>
				<el-button type="primary" @click="confirmSubmit">确定</el-button>
				<el-button type="info" @click="visible1 = false">取消</el-button>
			</template>
		</el-dialog>
		<!-- 图层效果编辑 -->
		<testMap v-if="testMapVisible" :relativeId="props.relativeId" @confirm="requestDetails" type="线效果"></testMap>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, reactive } from "vue";
import type { FormInstance } from "element-plus";
import { ElMessage, UploadProps } from "element-plus";
import { polylineCombineAdd, polylineCombineDetails, polylineCombineEdit } from "@/api/modules/mapCommon";
import testMap from "@/components/testMap/index.vue";
import { GlobalStore } from "@/stores";
const props = defineProps({
	operateVisible: Boolean,
	relativeId: String,
	title: String
});
const emits = defineEmits(["update:operateVisible", "confirm"]);
const addPositions = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
const fileList = ref([]);
const store = GlobalStore();
const headers = ref({ Authorization: "Bearer " + store.token });
const minLength = ref(1); // 最小点位长度
const sportTypeList = ref([
	{ label: "正向运动", value: 0 },
	{ label: "反向运动", value: 1 },
	{ label: "双向运动", value: 2 }
]);
const lineTypeList = ref([
	{ label: "飞线", value: "LineFlowColor" },
	{ label: "城市OD线", value: "ODLine" }
]);
const testMapVisible = ref(false);
const rules = ref({
	type: [
		{
			required: true,
			message: "请选择",
			trigger: "change"
		}
	],
	width: [
		{
			required: true,
			message: "请输入",
			trigger: "blur"
		}
	],
	jsonFile: [
		{
			required: true,
			message: "请上传",
			trigger: "change"
		}
	]
});
const formRef = ref<FormInstance>();
const formData = ref<any>({});
const visible1 = ref(false);
// 追加行数据
const appendRow = () => {
	addPositions.value.push({ lng: "", lat: "", alt: "" });
};
// 删除行数据
const deleteRow = (index: number) => {
	if (addPositions.value.length == minLength.value) {
		ElMessage.error("不能少于最少点位数据");
		return;
	}
	addPositions.value.splice(index, 1);
};
// 类型切换
const typeChange = (e: any) => {
	if (e == "ODLine") {
		fileList.value = reactive([]);
	}
};
const uploadSuccess = (response: any) => {
	ElMessage.success("上传成功");
	formData.value.jsonFile = { name: response.result.originalFilename, url: response.result.url };
	fileList.value = [{ name: response.result.originalFilename, url: response.result.url }];
	formRef.value?.validateField("jsonFile");
};
const onRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
	formData.value.jsonFile = "";
	fileList.value = reactive([]);
};
// 打开测试地图
const openTestMap = () => {
	testMapVisible.value = true;
};
// 刷新详情数据
const requestDetails = async () => {
	testMapVisible.value = false;
	getInfo();
};
// 获取数据详情
const getInfo = async () => {
	let requestData = {
		id: props.relativeId
	};
	const { result }: { result: any } = await polylineCombineDetails(requestData);
	if (result) {
		formData.value = { ...result };

		if (formData.value.jsonFile) {
			formData.value.jsonFile = JSON.parse(formData.value.jsonFile);
			fileList.value = [{ ...formData.value.jsonFile }];
		}
		setTimeout(() => {
			formRef.value?.clearValidate();
		}, 20);
	}
};
// 新增确认
const confirmSubmit = () => {
	const formEl = formRef.value;
	if (!formEl) return;
	formEl.validate(async (valid, fields) => {
		if (valid) {
			let requestData = {
				...formData.value
			};
			let positionPass = true;
			addPositions.value.map((item: any) => {
				if (!item.lng || !item.lat || !item.alt) {
					positionPass = false;
				}
			});
			if (!positionPass) {
				ElMessage.error("请输入坐标");
				return;
			}
			if (requestData.type == "ODLine") {
				requestData.jsonFile = JSON.stringify(requestData.jsonFile);
			}
			if (props.title == "新增线效果") {
				const res: any = await polylineCombineAdd(requestData);
				if (res.code == 200) {
					ElMessage.success("操作成功");
				}
			} else if (props.title == "编辑线效果") {
				const res: any = await polylineCombineEdit(requestData);
				if (res.code == 200) {
					ElMessage.success("操作成功");
				}
			}
			visible1.value = false;
			emits("confirm");
		} else {
			console.log("error submit!", fields);
		}
	});
};
// 关闭两个对话框
const closeMain = () => {
	visible1.value = false;
	emits("update:operateVisible", false);
};
watch(
	() => props.operateVisible,
	n => {
		if (n) {
			if (props.title == "新增线效果") {
				formData.value = {};
			} else if (props.title == "编辑线效果") {
				getInfo();
			}
			visible1.value = n;
			setTimeout(function () {
				formRef.value?.clearValidate();
			}, 20);
		}
	}
);
watch(
	() => visible1.value,
	n => {
		emits("update:operateVisible", n);
	}
);
onMounted(() => {});
</script>

<style lang="scss" scoped>
@mixin flex {
	display: flex;
	align-items: center;
}
@mixin title {
	font-size: 14px;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #333333;
	border-left: 2px solid #008bff;
	padding-left: 5px;
}
.overview {
	:deep() {
		.el-dialog__body {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
	.title-detail {
		@include flex;
		> img {
			width: 16px;
			height: 18px;
		}
		> span {
			font-size: 18px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 5px;
			margin-right: auto;
		}
		:deep(.el-icon) {
			cursor: pointer;
			color: #a8abb2;
		}
	}
	.basic-form {
		width: 80%;
		margin: 0 auto;
		margin-bottom: 42px;
		.basic-info {
			.form-content {
				margin: 0 auto;
				margin-top: 25px;
				.row {
					.table-content {
						display: flex;
						flex-direction: column;
						.table-head {
							@include flex;
							.head-value {
								width: 200px;
								color: #333;
								font-weight: 700;
								margin-right: 10px;
							}
						}
						.table-body {
							@include flex;
							.body-value {
								margin-right: 10px;
								width: 200px;
							}
							.body-operate {
								margin-left: 5px;
							}
						}
					}
					.table-operate {
						width: 100%;
						display: block;
						margin-top: 5px;
					}
				}
			}
		}
	}
}

:deep() {
	.el-progress-bar {
		display: none;
	}
	.el-progress__text {
		display: none;
	}
}
</style>
