<template>
    <view>
		<view class="pack-center pages-hint showActive" v-if="showDt">
			<image src="/static/img/null_icon.png"></image>
			<view>查看附近营业厅，需要获取您的地理位置</view>
			<!-- <button class="showActive-go" size="mini" open-type="openSetting">
				开启定位服务
			</button> -->
			<view class="showActive-go" @tap="openSetting">获取</view>
		</view>
        <view class="showDt" v-else>
        	<view class="top">
        	    <view class="top-left nowrap">{{locatResaa}}</view>
        		<view class="top-picker">
        		    <picker @change="screenOrders" :value="ordersIndex" :range-key="'name'" :range="ordersWay">
        		        {{ ordersWay[ordersIndex].name }}
        		    </picker>
        		    <image class="profigReport-module-icon" src="/static/icon/arrow_down.png"></image>
        		</view>
        	</view>
        	<view class="list" v-if="cityList.length > 0">
        		<view class="item" v-for="(item, index) in cityList" :key="index">
        			<image :src="item.cover" mode="aspectFill" class="item-logo"></image>
        			<view class="item-cont">
        				<view class="item-name nowrap">{{item.title}}</view>
        				<view class="item-address">
							<view class="item-address-tel">{{item.address}}</view>
							<image @tap="tel(item.mobile)" src="/static/icon/tel.png"></image>
						</view>
        				<view class="item-distance">
        					<view class="item-distance-left">{{item.distance}}</view>
        					<view class="item-distance-go" @tap="siteMap(item.latitude, item.longitude)">去导航</view>
        				</view>
        			</view>
        		</view>
        	</view>
        	
        	
        	<!-- 暂无内容 -->
        	<view class="pack-center pages-hint" v-else>
        		<image src="/static/img/null_icon.png"></image>
        		<view>抱歉，目前暂无内容~</view>
        	</view>
        </view>
    </view>
</template>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
	import { hallsIndex } from '@/apis/interfaces/index'
	import { cjsubscribeUrl } from '@/apis/interfaces/rights'
	import wx from 'weixin-js-sdk'
    import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
	
    export default {
    	data() {
    		return {
				locatResaa      : '',
				showDt       : false,
                latitude     : '',
				longitude    : '',
				Distance     : '',
				locationData : '',
                cityList     : [],   // 营业厅列表
                qqMap: new QQMapWX({
                    key: '4KYBZ-LCAKF-QWOJN-NIDNZ-FZHLZ-2XFW7',
                    vm: this
                }),
				ordersIndex     : 0,
				ordersWay       : [
					{value: '', name: "全部"},
				    {value: '1000', name: "小于1000"},
				    {value: '2000', name: "小于2000"}
				],
				page        : 1,     //分页
				lodingStats : false  //加载状态
            }
        },
        onLoad(e) {
			if(this.latitude == '') {
				this.showDt = true
			}
        },
        onShow() {
			// 获取营业厅列表
			this.regilist();
		},
        methods:{
			openSetting() {
				// 获取定位 - 使用腾讯地图sdk
				cjsubscribeUrl({
				    url: location.href.split('#')[0]
				}).then(wechatConfig => {
					let wxConfig = JSON.parse(wechatConfig)
					console.log(wxConfig)
					wx.config({
					    appId: wxConfig.appId,
						jsApiList : ['scanQRCode','closeWindow','chooseWXPay','getLocation'],
					    debug: false,
					    signature: wxConfig.signature,
					    nonceStr: wxConfig.nonceStr,
					    timestamp: wxConfig.timestamp,
						openTagList	: wxConfig.openTagList
					})
					wx.ready(() => {
						  wx.getLocation({
							type: 'gcj02', //返回可以用于wx.openLocation的经纬度
							success: res=> {
								// 调用接口
								this.qqMap.reverseGeocoder({
									location: {
										latitude: res.latitude,
										longitude: res.longitude
									},
									success: locatRes => {
										this.locatResaa= locatRes.result.formatted_addresses.recommend
										this.latitude  = locatRes.result.location.lat
										this.longitude = locatRes.result.location.lng
										
										this.showDt = false
										// 获取营业厅列表
										this.regilist();
									},
									fail: res => {},
									complete: res => {}
								});
							},
							cancel: res=> {
								// 获取营业厅列表
								this.regilist();
							}
						})
					})
				})
			},
			
            // 营业厅列表
            regilist(page) {
                hallsIndex({
                    user_lat: this.latitude,
					user_lng: this.longitude,
					distance: this.Distance,
					page    : page || ''
                }).then(res=>{
					let newStores = this.cityList,
					    newData = []
						if(page == 1 || page == undefined) newStores = []
						newData = newStores.concat(res.halls.data)
					
					for(let val in res.halls.data){
						let distance = res.halls.data[val].distance
						if (distance > 1000) {
						    distance = parseFloat( distance / 1000).toFixed(2) + "km";
						} else {
						    distance = parseFloat( distance).toFixed(2) + "m";
						}
						res.halls.data[val].distance = distance
					}
					
					this.cityList     = newData
					this.locationData = res.location
					this.page         = res.halls.page
					this.lodingStats  = false
					uni.stopPullDownRefresh()
					
                })
            },
			
			screenOrders(e) {
				this.ordersIndex = e.detail.value
				this.Distance = Number(this.ordersWay[this.ordersIndex].value)
				
				// 营业厅列表
				this.regilist();
			},
			
			// 页面相关事件处理函数--监听用户下拉动作
			onPullDownRefresh() {
			    // 营业厅列表
			    this.regilist();
			},
			        
			// 上拉加载
			onReachBottom(){
			    this.lodingStats = true
			    let pageNumber = this.page.current
			    if(this.page.has_more){
			        pageNumber++
					// 营业厅列表
					this.regilist(pageNumber);
			    }
			},
			
			// 导航
			siteMap(lat, long){
				let  key = '34ea3d2958aee3ffc154738551a976f9',//高德地图key
					latitude = parseFloat(lat),
				    longitude = parseFloat(long)
					
				window.location.href = "http://uri.amap.com/marker?position="+ longitude +","+latitude +"&name="+ name +"&coordinate=gaode&callnative=1";
				
			},
			
			// 拨打电话
			tel(e) {
			    uni.showActionSheet({
			        itemList    : ['呼叫商家电话'],
			        success     : res =>{
			            if(res.tapIndex==0){
			                uni.makePhoneCall({
			                    phoneNumber: e
			                })
			            }
			        }
			    })
			},
        }
    }
</script>

<style lang="scss" scoped>
	page {
		background-color: #f0f4fe;
	}
	.showActive {
		z-index: 1;
	}
	
	.showActive-go {
		display: inline-block;
		background-color: #666c9f;
		color: #ffffff;
		border-radius: 10rpx;
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 60rpx;
		font-size: 28rpx;
		margin-top: 30rpx;
	}
	
	.top {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
	}
	.top-left {
		flex: 1;
		margin-right: 30rpx;
		line-height: 64rpx;
	}
	.top-picker {
		display: flex;
		background-color: #ffffff;
		line-height: 64rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	.profigReport-module-picker {
	    display: flex;
	    color: #797979;
	    font-size: 28rpx;
	}
	
	.profigReport-module-icon {
	    width: 28rpx;
	    height: 28rpx;
	    margin: 20rpx 0 0 10rpx;
	}
	
	.list {
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
	}
	
	.item {
		background-color: #ffffff;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		display: flex;
	}
	.item-logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}
	.item-cont {
		width: calc(100% - 180rpx);
		padding-left: 30rpx;
		box-sizing: border-box;
	}
	
	.item-name {
		font-weight: 600;
		font-size: 34rpx;
	}
	.item-address {
		margin: 10rpx 0 30rpx;
		display: flex;
	}
	.item-address image {
		width: 44rpx;
		height: 44rpx;
		margin-left: 20rpx;
	}
	.item-address-tel {
		width: calc(100% - 64rpx);
	}
	.item-distance {
		display: flex;
	}
	.item-distance-left {
		flex: 1;
		line-height: 58rpx;
	}
	.item-distance-go {
		background-color: #666c9f;
		color: #ffffff;
		border-radius: 10rpx;
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 20rpx;
		font-size: 26rpx;
	}
</style>
