<template>
	<view class="content">
		<view class="pofMap">
			<view :hidden="!isHide">
				<map class="map" scale="16" :latitude="Number(lat)" :longitude="Number(lng)" :markers="list"
					@markertap="bindMarker"></map>
			</view>
			<view class="put-away flex-center" @click="bindPut">
				{{!isHide?'打开地图':'收起地图'}}
				<image src="../static/images/down.png" class="putImg" :class="!isHide?'putImgAct':''"></image>
			</view>
		</view>

		<!-- <view class="hg572"></view> -->
		<scroll-view scroll-y="true" class="scrollview" :class="!isHide?'scrollview1':''" :scroll-top="scrollTop">
			<view class="" style="height: 20rpx;">
			</view>
			<no-none v-if="list.length<=0"></no-none>
			<block v-else>
				<view class="item" :class="index==act_index?'act':''" v-for="(item,index) of list" :key='index'
					@click="bindStore(index,item.id)">
					<view class="box-pack-between">
						<view class="flex-grow-1">
							<view class="title">
								{{item.title}}
							</view>
							<view class="address flex-y-center">
								<text class="iconfont icon-dizhi"></text>{{item.address}}
							</view>
						</view>
						<view class="flex-grow-0">
							<image class="item-logo" :src=" item.thumb? URL+item.thumb:'../../static/avatar_def.png'">
							</image>
						</view>
					</view>
					<view class="distance box-pack-between">
						<text>距你{{item.juli}}公里</text>
						<view class="Navigation" @click.stop="getNavigation(item)">
							<text class="iconfont icon-icon-test"></text>
							导航到店
						</view>
					</view>
				</view>
			</block>
		</scroll-view>

		<block v-if="is_auth">
			<view class="model"></view>
			<view class="model flex-center">
				<view class="model_cotent">
					<view class="model_cotent_title">地理位置未授权</view>
					<view class="model_cotent_qd">需要您授权打开手机中的定位授权</view>
					<view class="flex">
						<view class="flex-grow-1 flex-center model_cotent_right" @click="cancel">
							取消
						</view>
						<button class="model_cotent_shezhi flex-grow-1" @click="openSetting">去授权</button>
					</view>
				</view>
			</view>
		</block>
		<view class="hg130">
		</view>
		<view class="store-btn flex-center" @click="getStore">
			<view class="flex-center">
				进入门店
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				Putname: '',
				markers: [],
				lat: '',
				lng: '',
				setColor: "",
				URL: getApp().globalData.URL,
				is_auth: false,
				systemInfo: {},
				isHide: true,
				scrollTop: 0,
				list: [],
				act_index: null,
			}
		}, 
		onLoad() {
			// #ifdef H5
			this.is_auth = false; 
			let latitude=31.11325;
			let longitude=121.38206
			this.shop(latitude, longitude);
			// #endif
			// #ifdef MP-WEIXIN
			this.getLocation();
			// #endif
			
			this.systemInfo = uni.getStorageSync('systemInfo');
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.$store.state.color,
			})
		},

		onShareAppMessage(e) {
			return {}
		},

		methods: {
			getStore(e) {
				let store_id = this.list[this.act_index].store_id;
				this.$store.commit('SET_STORE_ID', store_id)
				this.$store.commit('SET_TEEN_INDEX', 1) //重置默认
				this.$store.commit('SET_TABLE_ID', "")
				this.$store.commit('SET_CATE_ID', '')
				this.$store.dispatch('getSystemStup', store_id);
				this.$store.dispatch('getOpenid', store_id);
				uni.navigateTo({
					url: "../../pages/index/index"
				})
			},
			getNavigation({
				latitude,
				longitude,
				title,
				address,
			}) { 
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					address: address,
					name: title,
					success: function() {
						console.log('success');
					}
				});
			},

			bindStore(index, id) {
				this.act_index = index;
				this.list.forEach((i) => {
					i.width = 40
					i.height = 50
				});
				let obj = this.list.find((v, i) => v.id === id);
				console.log(obj);
				this.lat = obj.latitude;
				this.lng = obj.longitude;
				this.list[index].width = 50;
				this.list[index].height = 60;
			},

			bindMarker(e) {
				let act_index = this.list.findIndex(item => item.id === e.detail.markerId);
				this.scrollTop = act_index * 100;
				this.act_index = act_index;
			},

			bindPut(e) {
				this.isHide = !this.isHide;
			},
				
		
			getLocation(e) {
				// let markers = [];
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log('getLocation', res);
						// this.lat = res.latitude;
						// this.lng = res.longitude;
						this.is_auth = false;
						// markers.push({
						// 	id: 1,
						// 	latitude: res.latitude,
						// 	longitude: res.longitude,
						// 	title: "res.data.title",
						// 	iconPath: "../static/images/storeIcon.png",
						// 	width: 40,
						// 	height: 50,
						// });
						// this.markers = markers;
						this.shop(res.latitude, res.longitude);
					},
					fail: (err) => {
						console.log(err, "err")
						if (err.errMsg === "getLocation:fail auth deny" ||
							err.errMsg === "getLocation:fail auth deny" || err.errMsg ===
							"getLocation:fail authorize no response") {
							this.is_auth = true
						}
					}
				});
			},

			shop(lat, lng) {
				this.$http.request('xcx/Accessory_store', {
					store_id: this.$store.state.store_id,
					lat: lat,
					lng: lng,
				}, "", "", false).then(res => {
					if (res.code == '200' && res.data.length > 0) {
						this.lat = res.data[0].lat;
						this.lng = res.data[0].lng;
						for (let i of res.data) {
							this.list.push({
								id: i.id,
								latitude: i.lat,
								longitude: i.lng,
								title: i.title,
								iconPath: "/shop/static/images/storeIcon.png",
								width: 40,
								height: 50,
								store_id: i.id,
								address: i.address,
								thumb: i.thumb,
								juli: i.juli,
								// label:{
								// 	borderRadius:20,
								// 	bgColor:"#fff",textAlign:'center',
								// 	padding:6,
								// 	content: i.title,color:'#000'
								// }
							})
						}
					} else {
						this.isHide = false
					}
				}).catch(err => {})
			},

			cancel() {
				uni.navigateBack({
					delta: 1
				})
			},

			openSetting(e) {
				uni.openSetting({
					success: (settingdata) => {
						console.log("settingdata", settingdata)
						if (settingdata.authSetting['scope.userLocation']) {
							this.getLocation();
						} else {
							uni.showModal({
								title: '提示',
								content: '获取权限失败，将无法进定位哦~',
								showCancel: false,
							})
						}
					},
					fail(failData) {
						console.log("failData", failData);

					},
					complete(finishData) {
						console.log("finishData", finishData);

					}
				})
			},

		}
	}
</script>

<style>
	page {
		width: 100%;
		background-color: #F1F1F1;
	}

	.pofMap {}

	.scrollview {
		height: calc(100vh - 705rpx);
	}

	page .scrollview1 {
		height: calc(100vh - 205rpx);
	}

	.hg130 {
		height: 130rpx;
	}

	.hg572 {
		height: 590rpx;
	}

	.putImgAct {
		transform: rotate(180deg);
	}

	.map {
		height: 500rpx;
		width: 100%;
	}

	.put-away {
		width: 100%;
		height: 72rpx;
		background: #ffffff;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #666666;
	}

	.putImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 4rpx;
	}

	.item {
		width: 700rpx;
		padding: 30rpx 24rpx;
		background: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.24);
		margin: 0 auto;
		margin-bottom: 30rpx;
	}

	.item.act {
		box-shadow: 0px 8rpx 20rpx 0px rgba(252, 140, 4, 0.24);
		border: 3rpx solid #fc8c04;
	}

	.item .title {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #333333;
	}

	.item .address {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #999999;
		padding: 16rpx 0;
	}

	.item .distance {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #fc8e09;
	}

	.item-logo {
		width: 94rpx;
		height: 94rpx;
	}

	.item .Navigation {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		color: #fc8c04;
	}

	.item .icon-icon-test {
		font-size: 22rpx;
		margin-right: 10rpx;
	}

	.store-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		background: #ffffff;
		box-shadow: 0px -10rpx 20rpx 0px rgba(195, 202, 213, 0.16);
	}

	.store-btn view {
		width: 700rpx;
		height: 98rpx;
		margin: 0 auto;
		background: #fc8c04;
		border-radius: 49rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.20);
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #ffffff;
	}

	.model {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.model_cotent {
		width: 600rpx;
		text-align: center;
		border-radius: 16rpx;
		background: #fff;
		overflow: hidden;
	}

	.model_cotent_title {
		font-size: 34rpx;
		font-weight: 700;
		margin: 40rpx 0 40rpx 0;
	}

	.model_cotent_qd {
		font-size: 30rpx;
		padding-bottom: 65rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}

	.model_cotent_shezhi {
		margin: 0;
		font-weight: 700;
		font-size: 30rpx;
		color: #4e6ef2;
		padding: 30rpx 0;
		background-color: #fff;
		border-radius: none;
		border: none;
	}

	.model_cotent_right {
		border-right: 1rpx solid #F1F1F1;
	}

	.icon-dizhi {
		font-size: 24rpx;
	}
</style>
