<template>
    <view class="waper">
        <u-navbar left-icon-size="0" :placeholder="true" bgColor="#fff">
        	<view slot='center' class="navbar_title">导览</view>
        </u-navbar>
		<view class="tabs-box" v-if="!showSwiper">
			<scroll-view scroll-x="true">
				<view class="tab" :class="{active: activeType === item.id}" v-for="(item, index) in typeList" :key="index" @click="getMarkers(item.id)">{{item.potypeName}}</view>
			</scroll-view>
		</view>
		<map id="map" :style="'height: calc(100% - ' + windowBottom + 'px)'"
			:enable-building="enableBuilding" :show-location="showLocation" :latitude="latitude"
			:longitude="longitude" :markers="markers" :scale="scale" :max-scale="14.5" @markertap="markertap" @labeltap="labeltap" :polyline="polyline"></map>
        <view class="btn-box" :style="'bottom: ' + windowBottom2 + 'px'">
            <view class="location" @click="changeLocation">
                <image class="icon" src="https://common/location.png" mode=""></image>
            </view>
			<view class="location" @click="closeLine" v-if="showLine || showSwiper">
				<image class="icon" src="https://common/out.png" mode=""></image>
			</view>
        </view>
        
        <view class="line_btn" v-if="showBtn" @click="getGuideList" :style="'bottom: ' + windowBottom3 + 'px'">
            <image class="img" src="https://common/lineBtn.png" mode=""></image>
            <view>游览</view>
            <view>线路</view>
        </view>
        <view class="line_swiper" v-if="showLine" :style="'bottom: ' + windowBottom1 + 'px'">
            <swiper :interval="5000" :duration="1000" previous-margin="32rpx" next-margin="32rpx" :current="current1" @change="swiperChange1">
                <swiper-item v-for="(i, index) in lineList" :key="index">
                    <view class="line_box">
                        <view class="line_waper">
                            <view class="title">{{i.name}}</view>
                            <view class="msg">预计游览{{i.duration}}小时</view>
                            <view class="tag">
                                <view>难度：{{i.difficultyName}}</view>
                            </view>
                            <view class="btn" @click="startLine(i)">
                                <view>开始</view>
                                <view>游览</view>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>
		<!-- -->
       <view class="detail_swiper" v-if="showSwiper" :style="'bottom: ' + windowBottom1 + 'px'">
            <swiper :interval="5000" :duration="1000" previous-margin="32rpx" next-margin="32rpx" :current="current2" @change="swiperChange2">
                <swiper-item v-for="(i, index) in lineInfo" :key="index" :class="[current2 == index ? 'activeClass' : 'defaultClass']" @click="goSpot(i)">
                    <view class="detail_box">
                        <view class="detail_waper">
							<view class="num">{{index+1}}</view>
							<view class="con-box">
								<view class="title">
									<view class="label">{{i.pointName}}</view>
									<!-- <view class="voice">
										<image class="icon" src="https://common/voice.png" mode=""></image>
										<view class="time">2:30</view>
									</view> -->
								</view>
								<view class="text">{{i.blurb}}</view>
							</view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <view v-if="popup1" class="popup-box">
            <view class="popup-content1">
                <view class="head-box" v-if="data1.ticketId">
                    <view class="name">
                        <view class="h4">{{data1.ticketName}}</view>
						<view class="price">
							¥{{data1.salesRice}}
							<text>起</text>
						</view>
                    </view>
					<view class="go" @click="buyTicket(data1.ticketId)">
						去购买
						<u-icon name="arrow-right" color="#666666" size="28rpx"></u-icon>
					</view>
                </view>
                <view class="con">
                    <image class="con-img" :src="$utils.setImgUrl(data1.image)" mode=""></image>
					<view class="con-right">
						<view class="title">{{data1.pointName}}</view>
						<view class="describe">{{data1.blurb}}</view>
					</view>
                </view>
                <view class="btn">
                    <image class="btn-img" src="https://common/go.png" mode=""></image>
                    <view class="label" @click="goLocation(data1)">去这里</view>
                </view>
            </view>
        </view>

        <tabbar name="guide"></tabbar>
    </view>
</template>

<script>
    import tabbar from '@/components/tabbar/index.vue'
	import _config from '../../common/http/config.js'
    export default {
        components: {
            tabbar
        },
        data() {
            return {
				windowBottom: 0,
				windowBottom1: 0,
				windowBottom2: 0,
				windowBottom3: 0,
				popup1: false,
				mapCtx: null,
                showLine: false,
				showSwiper: false,
				showBtn: true,
				current1: 0,
				current2: 0,
				// 路线集合
                lineList: [],
				// 路线点集合
                lineInfo: null,
                id: 0,
                bgColor: 'transparent',
				scale: null,
                enableBuilding: false,
                showLocation: true,
                latitude: null,
                longitude: null,
                polyline: [],
                markers: [],
				// tab类型集合
				typeList: [],
				showPointList: [],
				// 所有数据
				allData: {},
				// 选中tab类型id、数据点类型id
                activeType: '',
                markerId: '',
				// 数据点id
                spotId: '',
				// 当前tab类型点图标
				pathIcon: '',
				// 弹窗数据
                data1: {},
				// 是否点击查看所有路线
				isAllLine: false,
            };
        },
        onLoad() {
			this.windowBottom = this.$safeAreaBottom + 50 + this.$paddingTop + uni.upx2px(72);
			this.windowBottom1 = this.$safeAreaBottom + uni.upx2px(134);
			this.windowBottom2 = this.$safeAreaBottom + uni.upx2px(340);
			this.windowBottom3 = this.$safeAreaBottom + uni.upx2px(140);
			this.mapCtx = uni.createMapContext('map', this);
			this.pointMapList()
        },
        onReady() {},
        onShow() {},
        methods: {
			async pointMapList() {
				let info = await this.$http.pointMapList({mapId: 1})
				if (info.code === 200) {
					this.allData = info.data
					this.typeList = this.allData.pointTypeList
					this.activeType = this.typeList[0].id
					this.latitude = this.allData.centerLatitude
					this.longitude = this.allData.centerLongitude
					this.scale = this.allData.zoomLevel
					this.addImageLayer(this.allData);
					this.getMarkers(this.activeType)
				} else {
					uni.$u.toast(info.msg);
				}
			},
			addImageLayer(data) {
				const imageLayerOptions = {
					id: data.id,
					src: _config.url + data.image,
					zIndex: 1,
					bounds: {
						southwest: {
							longitude: data.leftLongitude,
							latitude: data.leftLatitude
						},
						northeast: {
							longitude: data.rightLongitude,
							latitude: data.rightLatitude
						}
					}
				};
				this.mapCtx.addGroundOverlay(imageLayerOptions);
			},
			getMarkers(id) {
				this.activeType = id
				this.popup1 = false;
                this.showLine = false;
				this.showSwiper = false;
				this.showBtn = true;
				
				this.getMarkersList()
			},
			getMarkersList() {
				this.polyline = [];
				this.markers = []
				let index = null
				this.typeList.forEach((n, i) => {
					if (n.id == this.activeType) {
						index = i
						this.showPointList = this.typeList[index]
						this.pathIcon = this.showPointList.image
					}
				})
				if (!this.showPointList.pointDataList) return;
				this.showPointList.pointDataList.forEach((e, i) => {
					this.markers.push({
						id: e.id,
						latitude: e.latitude,
						longitude: e.longitude,
						width: '90rpx',
						height: '90rpx',
						iconPath: _config.url + this.pathIcon,
						label: {
							padding: '10rpx',
							content: e.pointName,
							color: '#fff',
							fontSize: '24rpx',
							anchorX: '0',
							anchorY: '0',
							borderRadius: '4rpx',
							bgColor: 'rgba(0,0,0,0.5)',
							textAlign: 'center'
						}
					})
				})
			},
			labeltap (e) {
				this.markerId = e.markerId
			    this.showDetail(this.markerId)
			},
			markertap(e) {
			    this.markerId = e.markerId
			    this.showDetail(this.markerId)
			},
			showDetail(id) {
				if (!this.showLine && !this.showSwiper) {
					this.showBtn = false;
					this.isAllLine = false;
					this.current1 = 0;
					this.getGuide(id)
					let f = this.showPointList.pointDataList.find(m => m.id == id)
					if (f) {
						this.data1 = f
						this.popup1 = true
					}
				}
			},
			buyTicket(id) {
				uni.navigateTo({ url: '/pages/scenic/ticket?id=' + id })
			},
            goLocation(data) {
                let latitude = data.latitude;
                let longitude = data.longitude;
                uni.openLocation({
                    latitude: Number(latitude),
                    longitude: Number(longitude),
                    name: data.pointName,
                    address: '',
                })
            },
			getGuide(id) {
				this.spotId = id;
				this.guideList()
			},
			async guideList() {
				let info = await this.$http.guideLineList({spotId: this.spotId})
				if (info.code === 200) {
					this.showLine = true
					this.lineList = info.data
				} else {
					uni.$u.toast(info.msg);
				}
			},
            async startLine (i) {
				let info = await this.$http.guideDetail({id: i.id})
				if (info.code === 200) {
					this.windowBottom = this.$safeAreaBottom + 50 + this.$paddingTop;
					this.showLine = false
					this.showSwiper = true
					this.popup1 = false
					this.current2 = 0
					this.lineInfo = info.data.spotGuideList;
					if (!this.lineInfo) {
						return false;
					}
					this.polyline = [];
					this.getLine(info.data.coordinate);
					let markers = [];
					let numArr = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩']
					this.lineInfo.forEach((e, i) => {
						markers.push({
							id: e.id,
							latitude: e.latitude,
							longitude: e.longitude,
							width: '90rpx',
							height: '90rpx',
							iconPath: _config.url + e.image,
							title: i,
							label: {
								padding: '10rpx',
								content: numArr[i] + ' ' + e.pointName,
								color: '#fff',
								fontSize: '24rpx',
								anchorX: '0',
								anchorY: '0',
								borderRadius: '4rpx',
								bgColor: 'rgba(0,0,0,0.5)',
								textAlign: 'center'
							},
							callout: {
								bgColor: 'transparent'
							}
						})
					})
					this.markers = markers;
				} else {
					uni.$u.toast(info.msg);
				}
            },
            getLine (line) {
                let array = JSON.parse(line);
				if (!array) return false;
				this.polyline = ([
					{ points: array, color: '#EFE7A7', width: 8, dottedLine: false },
					{ points: array, color: '#743F00', width: 2, dottedLine: true }
				]);
            },
            async getGuideList () {
				this.showBtn = false;
				this.isAllLine = true;
				this.current1 = 0;
				this.getGuide('')
            },
            closeLine () {
				this.popup1 = false;
				if (this.showLine) {
					this.showLine = false;
					this.showBtn = true;
				} else if (this.showSwiper) {
					this.windowBottom = this.$safeAreaBottom + 50 + this.$paddingTop + uni.upx2px(72);
					this.showLine = true;
					this.showBtn = false;
					this.guideList()
					if (!this.isAllLine) this.popup1 = true;
				}
				this.showSwiper = false;
				this.getMarkersList()
            },
            changeLocation() {
                let mapObjs = uni.createMapContext('map', this)
                mapObjs.moveToLocation({
                    complete: res => {
                        console.log('移动完成:', res)
                    }
                })
            },
			swiperChange1(e) {
				this.current1 = e.detail.current
			},
			swiperChange2(e) {
				this.current2 = e.detail.current
			},
			goSpot(i) {
				if (!i.spotId) return;
				uni.navigateTo({ url: '/pages/scenic/spot?id=' + i.spotId })
			}
        }
    }
</script>

<style lang="scss" scoped>
.line_btn{
	width: 180rpx;
	height: 180rpx;
	position: relative;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	line-height: 46rpx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	.img {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
	}
}
    .line_swiper{
        width: 100%; height: 188rpx; position: fixed; left: 0;
        swiper{ width: 100%; height: 100%; }
        .line_box{ width: 100%; height: 100%; box-sizing: border-box; padding: 0 12rpx; }
        .line_waper{
            width: 100%; height: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 24rpx 24rpx 0; position: relative; padding-right: 148rpx;
            .title{ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: 500; }
            .msg{ line-height: 34rpx; margin-top: 12rpx; color: #999; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 24rpx; }
            .tag{
                width: 100%; margin-top: 12rpx; display: flex; align-items: center;
                view{
                    height: 32rpx; box-sizing: border-box; border: 2rpx solid #03AE80; border-radius: 2rpx; padding: 0 8rpx; line-height: 28rpx; color: #03AE80; font-size: 20rpx;
                }
            }
            .btn{ width: 120rpx; height: 120rpx; background: #03AE80; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #FCFCFC; font-size: 24rpx; line-height: 30rpx; border-radius: 50%; position: absolute; right: 24rpx; top: 50%; transform: translateY(-50%); }
        }
    }
	.detail_swiper {
        width: 100%; height: 204rpx; position: fixed; left: 0;
        swiper{ width: 100%; }
		.activeClass {
			height: 204rpx !important;
			box-sizing: border-box;
			.detail_waper {
				padding: 24rpx 32rpx;
			}
		}
		.defaultClass {
			height: 188rpx !important;
			margin-top: 16rpx;
			box-sizing: border-box;
			.detail_waper {
				padding: 16rpx 32rpx;
			}
		}
        .detail_box{ width: 100%; height: 100%; box-sizing: border-box; padding: 0 12rpx; }
        .detail_waper{
            width: 100%; height: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.num {
				width: 34rpx;
				height: 34rpx;
				background: #03AE80;
				border-radius: 50%;
				border: 2rpx solid #FFFFFF;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				line-height: 34rpx;
				text-align: center;
				margin-right: 12rpx;
			}
			.con-box {
				flex: 1;
				.title {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					.label {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}
					.voice {
						display: flex;
						align-items: center;
						.icon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
						.time {
							font-size: 24rpx;
							color: #333333;
						}
					}
				}
				.text {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 36rpx;
					width: 528rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}
			}
        }
	}
    .waper {
        width: 100%;
        height: 100vh;
        background: #F4F6FA;
		
		#map{ width: 100%; }
		.tabs-box {
			padding: 5rpx 0 11rpx;
			background: #FFFFFF;
			scroll-view{ width: 100%; white-space: nowrap; font-size: 0;}
			.tab {
				display: inline-block;
				vertical-align: top;
				height: 56rpx;
				line-height: 56rpx;
				padding: 0 38rpx;
				background: #FFFFFF;
				border-radius: 42rpx 42rpx 42rpx 42rpx;
				font-size: 28rpx;
				color: #000000;
				&:first-child {
					margin-left: 32rpx;
				}
				&:last-child {
					margin-right: 32rpx;
				}
			}
			.active {
				background: #03AE80;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

        // .map-box {
        //     width: 100%;
        //     height: 100%;
        //     position: fixed;
        //     left: 0;
        //     top: 0;

        //     .customCallout {
        //         display: flex;
        //         justify-content: center;
        //         align-items: center;
        //         box-sizing: border-box;
        //         padding: 8rpx 46rpx;
        //         background: #00BE69;
        //         border-radius: 30rpx;

        //         .txt {
        //             font-weight: 500;
        //             font-size: 28rpx;
        //             color: #FFFFFF;
        //         }

        //         .triangle {
        //             width: 0;
        //             height: 0;
        //             border-left: 10rpx solid transparent;
        //             /* 左边的透明部分 */
        //             border-right: 10rpx solid transparent;
        //             /* 右边的透明部分 */
        //             border-top: 14rpx solid #00BE69;
        //             /* 底部红色线条 */
        //             position: absolute;
        //             bottom: -13rpx;
        //         }
        //     }
        // }

        .btn-box {
            position: fixed;
            right: 18rpx;
			z-index: 1;

            .location {
                width: 80rpx;
                height: 80rpx;
                border-radius: 10rpx;
                background-color: #fff;
                position: relative;
                margin-top: 40rpx;
                .icon {
                    width: 50rpx;
                    height: 50rpx;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }

        .head-box {
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
            padding-bottom: 24rpx;
            border-bottom: 1rpx solid #E8E8E8;

            .name {
                display: flex;
                align-items: center;
                flex-direction: row;

                .h4 {
                    font-size: 32rpx;
                    color: #333333;
                }
				.price {
					margin-left: 24rpx;
					font-size: 32rpx;
					color: #FF3333;
					text {
						font-size: 24rpx;
						color: #333333;
					}
				}
            }
			.go {
                display: flex;
                align-items: center;
                flex-direction: row;
				font-size: 26rpx;
				color: #666666;
			}
        }

		.popup-box {
			width: 638rpx;
			height: 300rpx;
			position: fixed;
			left: 50%;
			top: 400rpx;
			transform: translateX(-50%);
		}
        .popup-content1 {
            background: #FFFFFF;
            border-radius: 10rpx;
            padding: 32rpx;
            width: 638rpx;
            box-sizing: border-box;

            .con {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 24rpx 0;
				margin-bottom: 24rpx;
				border-bottom: 1rpx solid #E8E8E8;

                .con-img {
                    width: 169rpx;
                    height: 169rpx;
                    margin-right: 22rpx;
                }

				.con-right {
					.title {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}
					.describe {
						margin-top: 14rpx;
						width: 385rpx;
						font-size: 24rpx;
						color: #333333;
						line-height: 32rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}
				}
            }

            .btn {
                width: 266rpx;
                height: 70rpx;
                border-radius: 70rpx;
				background-color: #03AE80;
                text-align: center;
                line-height: 70rpx;
                display: flex;
                align-items: center;
                flex-direction: row;
                justify-content: center;
                margin: 0 auto;

                .btn-img {
                    width: 30rpx;
                    height: 30rpx;
                    margin-right: 12rpx;
                }

                .label {
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #fff;
                }
            }
        }
    }
</style>