<!--
 * @Date: 2023-07-27 11:04:04
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-08-11 14:14:16
 * @FilePath: /map-demo/src/components/Floor/index.vue
 * @Description: 文件描述
-->
<template>
	<div>
		<div class="container">
			<div class="main">
				<header class="codrops-header">
					<h1>3D导航地图</h1>
				</header>
				<div class="tool-bar">
					<div @click="onClose" class="close icon">
						<van-icon name="cross" size="1.25rem" />
					</div>
					<div @click="onSearch" class="search-icon icon">
						<van-icon name="search" size="1.25rem" />
					</div>
					<div v-if="level_show" class="switch-left icon">
						<span v-if="level_show < 4" @click="switchFloor('left')">
							<van-icon name="arrow-up" size="1.25rem" />
						</span>
					</div>
					<div v-if="level_show" class="close-level icon" @click.native="onCloseLevelAll">
						<span>
							<van-icon name="points" size="1.25rem" />
						</span>
					</div>
					<div v-if="level_show" class="switch-right icon">
						<span v-if="level_show > 1" @click="switchFloor('right')">
							<van-icon name="arrow-down" size="1.25rem" />
						</span>
					</div>
					<div class="animate-bar icon">
						<div v-if="level_show == 4" class="">
							<div v-if="!svg_safe_animate_status" @click="createAnimation(true, level_show - 1, 'safe')" style="font-size: 1.25rem;">
								<van-icon name="star-o" />
							</div>
							<div v-else @click="createAnimation(false, level_show - 1, 'safe')" style="font-size: 1.25rem;">
								<van-icon name="star" />
							</div>
							<div style="height: 0.5rem;"></div>
							<div v-if="!svg_toilet_animate_status" @click="createAnimation(true, level_show - 1, 'toilet')" style="font-size: 1.25rem;">
								<van-icon name="shop-o" />
							</div>
							<div v-else @click="createAnimation(false, level_show - 1, 'toilet')" style="font-size: 1.25rem;">
								<van-icon name="shop" />
							</div>
						</div>
						<div v-if="level_show == 3">
							<div v-if="!svg_door_animate_status" @click="createAnimation(true, level_show - 1, 'door')" style="font-size: 1.25rem;">
								<van-icon name="wap-home-o" />
							</div>
							<div v-else @click="createAnimation(false, level_show - 1, 'door')" style="font-size: 1.25rem;">
								<van-icon name="wap-home" />
							</div>
						</div>
					</div>
				</div>
				<div class="mall">
					<!-- <div class="surroundings">
            <img class="surroundings__map" src="./surroundings.svg" alt="Surroundings" />
          </div> -->
					<div class="levels">
						<div v-for="(level, index) in level_list" :key="index" @click.capture="onFloorClick(index + 1, $event)"
							:class="['level', 'level--' + (index + 1)]">
							<div class="level_svg" v-html="level.svg"></div>
							<div class="level__pins">
								<a @click="clickPin(item, $event)" v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style"
									:data-category="item.category" :data-space="item.space">
									<span class="pin__icon">
										<svg class="icon icon--pin">
											<use xlink:href="#icon-pin"></use>
										</svg>
										<svg :class="['icon', 'icon--logo', `icon--${item.icon}`]">
											<use :xlink:href='"#icon-" + item.icon'></use>
										</svg>
									</span>
								</a>
							</div>
							<div class="level_after">L{{ index + 1 }}</div>
						</div>
					</div>

				</div>
			</div>
		</div>

		<van-popup v-model:show="show_popup" position="bottom" :overlay="false"
			:style="{ height: '50%', background: '#FFF' }">
			<div @click="onClosePopup" style="text-align: right; padding: 1rem;">
				<van-icon name="cross" size="1.5rem" />
			</div>
			<div style="margin: 0 1rem">
				<div style="font-size: 1.25rem; margin-bottom: 1rem;">{{ popup_title }}</div>
				<div> {{ popup_content }} </div>
			</div>
		</van-popup>

		<svg-icon></svg-icon>

		<van-popup v-model:show="show_search_popup" position="right" :overlay="true"
			:style="{ height: '100%', width: '80%', background: '#FFF' }">
			<div style="background-color: #F7f8fa; padding: 1rem;">
				<van-field v-model="search_value" @update:model-value="onSearchUpdate" placeholder="请输入搜索关键词" style="border-radius: 5px; padding: 0.5rem 1rem;" />
			</div>
			<div v-for="(item, index) in search_list" :key="index" v-show="item.show" class="search_box">
				<div class="search_box_title">{{ item.title }}</div>
				<van-row v-show="x.show" v-for="(x, idx) in item.list" :key="idx" @click="onSearchRow(x.space)"
					style="color: #aaa; margin-bottom: 0.5rem;">
					<van-col span="20">{{ x.text }}</van-col>
					<van-col span="4" style="text-align: right;">{{ x.floor }}</van-col>
				</van-row>
			</div>
		</van-popup>
	</div>
</template>

<script>
import './floor.css';
import $ from 'jquery';
import SvgIcon from './svgIcon.vue'
import Data from './pin'
import { wxInfo } from '@/utils/tools'

export default {
	data() {
		return {
			level_show: '',
			search_value: '',
			show_popup: false,
			show_search_popup: false,
			level_list: Data,
			popup_title: '',
			popup_content: '',
			search_list: [
				{
					title: '1-客房',
					list: [
						{
							space: 1.01,
							text: '101～110室',
							floor: 'L1',
							show: true,
						},
						{
							space: 1.02,
							text: '111～119室',
							floor: 'L1',
							show: true,
						},
					],
					show: true
				},
				{
					title: '2-客房',
					list: [
						{
							space: 2.01,
							text: '201～210室',
							floor: 'L2',
							show: true,
						},
						{
							space: 2.02,
							text: '211～219室',
							floor: 'L2',
							show: true,
						},
					],
					show: true
				},
			],
			svg_animate_obj: {
				0: [],
				1: [],
				2: [],
				3: [],
			},
			svg_safe_animate_status: false,
			svg_safe_animate: `
				<path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5">
				</path>
				<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
					<animateMotion dur="8s" repeatCount="indefinite">
						<mpath href="#myPath" />
					</animateMotion>
				</circle>
			`,
			svg_toilet_animate_status: false,
			svg_toilet_animate: `
				<path id="myPath" d="M 1138.427 213.33 L 486.79 224.966 L 473.061 123.103" fill="none" stroke="#D49333" stroke-width="5">
				</path>
				<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
					<animateMotion dur="8s" repeatCount="indefinite">
						<mpath href="#myPath" />
					</animateMotion>
				</circle>
			`,
			svg_door_animate_status: false,
			svg_door_animate: `
				<path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5">
				</path>
				<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
					<animateMotion dur="8s" repeatCount="indefinite">
						<mpath href="#myPath" />
					</animateMotion>
				</circle>
			`,
		}
	},
	async mounted() {
		// if (!wxInfo().isPC) { // 移动端
		// 	$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
		// } else { // PC端
		// 	$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
		// }
	},
	methods: {
		clearPinShow() {
			$('.level__pins').children('.pin').each((index, ele) => {
				$(ele).removeClass('pin--active');
			});
			$('.mall').removeClass('mall--content-open');
		},
		onFloorClick(level, evt) {
			this.level_show = level;
			$('.levels').addClass('levels--open').addClass(`levels--selected-${level}`);
			$(`.level--${level}`).addClass('level--current');
			$(`.level--${level} .level__pins`).addClass('level__pins--active');
			// if (!wxInfo().isPC) { // 移动端
			// 	$('.level.level--current').css('transform', 'translateZ(5rem) rotate3d(0,0,1,20deg)');
			// } else { // PC端
			// 	$('.level.level--current').css('transform', 'translateZ(20vmin) rotate3d(0,0,1,20deg)');
			// }
		},
		onCloseLevel() {
			this.show_popup = false;
			let level = this.level_show;
			$('.mall').removeClass('mall--content-open');
			$('.levels').removeClass('levels--open').removeClass(`levels--selected-${level}`);
			// $('.level.level--current').css('transform', '');
			$(`.level--${level}`).removeClass('level--current');
			$(`.level--${level} .level__pins`).removeClass('level__pins--active');
			this.level_show = '';
			this.clearPinShow();
		},
		onCloseLevelAll() {
			this.onCloseLevel();
			// 清除动画
			this.clearAllAnimation();
		},
		onClose() {
			this.onCloseLevelAll();
			this.$emit('close');
		},
		onClickCloseIcon() {
			this.clearPinShow();
		},
		switchFloor(type) { // 切换楼层
			let level = this.level_show;
			if (type === 'right') {
				level = level - 1 < 1 ? 1 : level - 1;
			}
			if (type === 'left') {
				level = level + 1 > 4 ? 4 : level + 1;
			}
			this.onCloseLevel();
			this.onFloorClick(level);
		},
		onSearch() {
			this.show_search_popup = true;
		},
		onSearchRow(val) {
			// 清空图层显示
			this.onCloseLevel();
			this.show_popup = false;
			// 测试锚点
			let currentTarget = null;
			let category = null;
			let space = null;
			$('.level__pins').children('.pin').each((index, ele) => {
				space = $(ele).data('space'); // 锚点标记
				if (space === val) { // 匹配符合的dom节点
					category = parseInt(space);// 获取图层标记
					currentTarget = ele;
				}
				$(ele).removeClass('pin--active');
			});
			// 选择图层
			this.onFloorClick(category);
			// 选择锚点样式
			$(currentTarget).addClass('pin--active');
			$('.mall').addClass('mall--content-open');
			setTimeout(() => {
				// 打开锚点详情
				this.show_popup = true;
				// 把图层推高
				// if (!wxInfo().isPC) { // 移动端
				// 	$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
				// } else { // PC端
				// 	$('.level.level--current').css('transform', 'translateZ(20vmin) rotate3d(0,0,1,20deg)');
				// }
				this.level_list.forEach(item => {
					item.pin.forEach(x => {
						if (x.space === val) {
							// 打开 pin 详情信息
							this.popup_title = x?.affix?.title;
							this.popup_content = x?.affix?.content;
						}
					})
				});
			}, 500);
			// 关闭搜索弹框
			this.show_search_popup = false;
		},
		onClosePopup() {
			this.show_popup = false;
			this.clearPinShow();
		},
		clickPin (item, evt) { // 点击pin操作
			this.clearPinShow();
			$(evt.target).parents('a.pin').addClass('pin--active'); // pin点击效果
			//
			this.show_popup = true;
			// 打开 pin 详情信息
			this.popup_title = item?.affix?.title;
			this.popup_content = item?.affix?.content;
			// 把图层推高
			$('.mall').addClass('mall--content-open');
			// if (!wxInfo().isPC) { // 移动端
			// 	$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
			// } else { // PC端
			// 	$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
			// }
		},
		onSearchUpdate () {
			this.search_list.forEach((item) => {
				item.list.forEach((x) => {
					if (x.text.indexOf(this.search_value) >= 0) {
						x.show = true;
					} else {
						x.show = false;
					}
				});
				// 如果子项里面都为空，隐藏整个项
				let show_num = item.list.filter((x) => x.show === true);
				if (show_num.length) {
					item.show = true;
				} else {
					item.show = false;
				}
			});
		},
		clearAllAnimation () {
			// 所有清除动画
			for (let key in this.svg_animate_obj) {
				if (this.svg_animate_obj[key].length) {
					if (this[`svg_${this.svg_animate_obj[key]}_animate_status`]) {
						this.createAnimation(false, key, this.svg_animate_obj[key]);
					}
				}
			}
		},
		createAnimation(flag, level, id) { // 创建动画路径，固定生成动画方法
			//
			let insertString = '';
			if (flag) { // 打开
				// 清除动画
				this.clearAllAnimation();
				this[`svg_${id}_animate_status`] = true;
				insertString = this[`svg_${id}_animate`];
				let insertIndex = this.level_list[level].svg.indexOf('</svg>');
				// 添加相应动画
				let modifiedString = this.level_list[level].svg.slice(0, insertIndex) + insertString;
				this.level_list[level].svg = modifiedString + '</svg>';
				// 新增ID
				if (this.svg_animate_obj[level].indexOf(id) < 0) {
					this.svg_animate_obj[level].push(id);
				}
			} else { // 关闭
				this[`svg_${id}_animate_status`] = false;
				let originalString = this.level_list[level].svg;
				let searchTerm = this[`svg_${id}_animate`];
				let startIndex = originalString.indexOf(searchTerm);
				let endIndex = startIndex + searchTerm.length - 1;
				// 删除相应动画
				let modifiedString = originalString.substring(0, startIndex) + originalString.substring(endIndex + 1);
				this.level_list[level].svg = modifiedString;
				// 剔除ID
				this.svg_animate_obj[level] = this.svg_animate_obj[level].filter(item => item === id);
			}
		},
	}
}
</script>

<style lang="less" scoped>
.test {
	opacity: 0;
}

.search_box {
	padding: 1rem;

	.search_box_title {
		color: #000;
		margin-bottom: 1rem;
		font-size: 1.15rem;
	}
}

.tool-bar {
	position: relative;

	.icon {
		position: absolute;
		z-index: 100;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		text-align: center;
	}

	.close {
		top: 1rem;
		right: 1rem;
	}

	.search-icon {
		top: 2.75rem;
		right: 1rem;
	}

	.switch-left {
		top: 4.5rem;
		right: 1rem;
	}

	.close-level {
		top: 6rem;
		right: 1rem;
	}

	.switch-right {
		top: 8rem;
		right: 1rem;
	}
	.animate-bar {
		top: 12rem;
		right: 1rem;
	}
}

.level_after {
	font-size: 0.75rem;
	line-height: 0;
	position: absolute;
	z-index: 100;
	top: -2em;
	left: 3.5em;
	white-space: nowrap;
	color: #7d7d86;
	-webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
	transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
	-webkit-transition: -webkit-transform 1s, color 0.3s;
	transition: transform 1s, color 0.3s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.level--current {
	.level_after {
		font-size: 1rem;
		-webkit-transform: rotateZ(25deg) rotateX(-60deg) translateZ(15vmin);
		transform: rotateZ(25deg) rotateX(-60deg) translateZ(15vmin);
	}
}

.level_btn {
	  font-size: 1rem;
    line-height: 0;
    position: absolute;
    z-index: 100;
    top: -2em;
    right: 0;
    white-space: nowrap;
    color: #7d7d86;
    -webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
    transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
    -webkit-transition: -webkit-transform 1s, color 0.3s;
    transition: transform 1s, color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
</style>