<template>
    <view>
		<view class="pack-center pages-hint showActive" v-if="showDt">
			<image src="/static/img/null_icon.png"></image>
			<view>查看附近营业厅，需要获取您的地理位置</view>
			<!-- <button class="location-btn" size="mini" open-type="openSetting">
				开启定位服务
			</button> -->
			<view class="showActive-go" @tap="showTap">获取</view>
		</view>
        <view class="showDt" v-else>
        	<view class="top">
        	    <view class="top-left nowrap">{{locationData.address}}</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 nowrap">{{item.address}}</view>
        				<view class="item-distance nowrap">
        					<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>
	import { hallsIndex } from '@/apis/interfaces/index'
    import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
    export default {
    	data() {
    		return {
				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() {},
        methods:{
			showTap() {
				this.showDt = false
				// 获取定位 - 使用腾讯地图sdk
				uni.getLocation({
				    success: res => {
				        // 调用接口
				        this.qqMap.reverseGeocoder({
				            location: {
				                latitude: res.latitude,
				                longitude: res.longitude
				            },
				            success: locatRes => {
				                this.latitude = locatRes.result.location.lat
				                this.longitude = locatRes.result.location.lng
								
								// 获取营业厅列表
								this.regilist(this.latitude, this.longitude);
				            },
				            fail: res => {},
				            complete: res => {}
				        });
				    }
				})
			},
			
            // 营业厅列表
            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";
				
			}
        }
    }
</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;
		position: relative;
	}
	.item-logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}
	.item-cont {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 30rpx 30rpx 30rpx 240rpx;
		box-sizing: border-box;
	}
	
	.item-name {
		font-weight: 600;
		font-size: 34rpx;
	}
	.item-address {
		margin: 10rpx 0 30rpx;
	}
	.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>
