<template>
	<view class="nearby">
		<view class="select_box">
			<picker @change="changeType" :value="typeIndex" :range="typeList">
				<view class="sel_left">
					{{typeList[typeIndex] ? typeList[typeIndex] : '全部'}}
					<image :src="BASE_IMG_URL+'newxia.png'" class="xiaimg"  mode="scaleToFill"></image>
				</view>
			</picker>
			<picker @change="changeNear" :value="nearIndex" :range="nearList" :range-key="'name'">
				<view class="sel_left">
					{{nearList[nearIndex] ? nearList[nearIndex].name : '附近'}}
					<image :src="BASE_IMG_URL+'newxia.png'" class="xiaimg"  mode="scaleToFill"></image>
				</view>
			</picker>
		</view>
		
		<view class="map_show" :style="{height:isFullScreen ? mapHeight : '400rpx'}">
			<map style="width: 750rpx; " :style="{height:isFullScreen ? mapHeight : '400rpx'}" :latitude="latitude" :longitude="longitude"
				:markers="covers" @markertap="changeLiInfo"></map>
		</view>
		<view class="kehu-btn" v-show="isFullScreen" @click="isFullScreen = false">
			查看详情
		</view>
		<view v-show="!isFullScreen" class="position">
			<view class="xiawarp" @click="isFullScreen = true">
				<image :src="BASE_IMG_URL+'xia_a.png'" class="xiaimg"  mode="scaleToFill"></image>
			</view>
			<view class="map_rim">
				<view>[当前位置]{{address}}</view>
				<image :src="BASE_IMG_URL+'ydw.png'" class="weizhiimg"  mode="scaleToFill"></image>
			</view>
			<view class="" style="padding:24rpx 30rpx">
				<u-search  @change="searchName" placeholder="请输入搜索关键词" />
			</view>	
			
			<scroll-view scroll-y="true" class="scroll" :style="{height:height}">
				<view v-if="showList" style="padding-bottom:calc(env(safe-area-inset-bottom) / 2)">
					<view class="map_group" v-for="(item,index) in list"  :key="index">
						<view class="name_li">
							<view class="name">
								{{item.name}} 
								<text style="color:#008EFF;font-size:22rpx;margin-left:10rpx;" v-if="item.owner_staff_id > 0">归属人({{item.owner_staff.name}})</text>
							 </view>
							<view class="status" v-if="item.follow">{{item.follow}}</view>
						</view>
						<view class="text">距离{{item.juli}} ｜ {{item.address_detail?item.address_detail:''}}</view>
						<view class="text">跟进时间：{{item.next_time}}</view>
						<view class="bntlist">
							<view class="anniu luxian" @click="lookMap(item)">查看路线</view>
							<view class="anniu" style="color:#008EFF" v-if="item.owner_staff_id > 0" @click="toMore(item.id)">查看详情</view>
							<view class="anniu lingqu" style="color:#008EFF" v-else @click="toGroupCompany(item)">领取</view>
						</view>
					</view>
					<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
				</view>
				<view v-else>
					<view class="backlist" @click="backList">返回列表</view>
					<view class="map_group">
						<view class="name_li">
							<view class="name">{{liInfo.name}} <text style="color:#008EFF;font-size:22rpx;margin-left:10rpx;" v-if="item.owner_staff_id > 0">归属人({{item.owner_staff.name}})</text></view>
							<view class="status" v-if="liInfo.follow">{{liInfo.follow}}</view>
						</view>
						<view class="text">距离{{liInfo.juli}} ｜ {{liInfo.address_detail?liInfo.address_detail:''}}</view>
						<view class="text">跟进时间：{{liInfo.next_time}}</view>
						<view class="bntlist">
							<view class="anniu luxian" @click="lookMap(liInfo)">查看路线</view>
							<view class="anniu" style="color:#008EFF" v-if="liInfo.owner_staff_id > 0" @click="toMore(liInfo.id)">查看详情</view>
							<view class="anniu lingqu" style="color:#008EFF" v-else @click="toGroupCompany(liInfo)">领取</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/util/api.js'
	import uniTabbar from '@/components/tabbar/tabbar.vue'
	import { netNearKehuList } from '@/api/index.js'
	import { netReceiveKehu } from '@/api/kehu.js'
	import { netAgentList } from '@/api/clues.js'
	import { netMapKey } from '@/api/login.js'
	var QQMapWX;
	var qqmapsdk;
	
	export default {
		components:{
			uniTabbar
		},
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				tipNumber:null,
				latitude: '',
				longitude: '',
				covers: [],
				typeList:['全部客户','我的客户','下属负责的客户'],
				typeIndex:null,
				nearList:[
					{id:0,name:'附近1KM',num:1},
					{id:1,name:'附近3KM',num:3},
					{id:2,name:'附近5KM',num:5},
					{id:3,name:'附近10KM',num:10},
					{id:4,name:'附近30KM',num:30},
					{id:5,name:'附近200KM',num:200},
					{id:6,name:'附近400KM',num:400},
					{id:7,name:'附近600KM',num:600},
					{id:8,name:'附近800KM',num:800},
					{id:9,name:'全部',num:1000000},
				],
				nearIndex:2,
				showMask:false,
				maskType:1,   //1 全部   2附近
				address:'',
				
				list:[],
				showList:true,
				liInfo:{},
				liId:'',
				isFullScreen:true,
				name:'',  //搜索
				otherArr:[],   //其他人
				// #ifdef H5
				height: 'calc(100vh - env(safe-area-inset-bottom) - 822rpx)',
				// #endif
				// #ifndef H5
				height: '400rpx',
				// #endif
				mapHeight:'400rpx'
			}
		},
		onLoad() {
			//获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					let ratio = 750/res.screenWidth
					let height = res.windowHeight * ratio - 200
					this.mapHeight = height+'rpx'
					let scrollH = res.windowHeight * ratio - 750
					this.height = scrollH+'rpx'
				}
			})
			//获取地图key
			this.getKey()
		},
		onShow() {
			// this.getTip()
		},
		methods: {
			//获取地图key
			getKey() {
				netMapKey().then(res=>{
					if(res.data.map_key){
						QQMapWX = require('../../util/qqmap-wx-jssdk.min.js')
						qqmapsdk = new QQMapWX({
							key: res.data.map_key // 必填
						})
						//获取位置
						this.getAddressinfo()
					}else{
						uni.showToast({
							title:'请在后台配置地图key',
							icon:'none'
						})
					}
				})
			},
			getTip(){
				netAgentList().then(res=>{
					this.tipNumber = res.data.total
					uni.setStorageSync('token',res.data.userinfo.token)
					uni.setStorageSync('roleType',res.data.userinfo.role_type)
					uni.setStorageSync('rules',res.data.userinfo.rules)
				})
			},
			//搜索
			searchName(e) {
				this.name = e
				this.getKehuList()
			},
			getAddressinfo() {
				uni.getLocation({
					// #ifdef H5
					type: 'wgs84',
					// #endif
					// #ifndef H5
					type: 'gcj02',
					// #endif
					isHighAccuracy: true,
					altitude: true,
					success:(res)=>{
						this.longitude = res.longitude
						this.latitude = res.latitude
						let covers = [
							{
								id:0,
								latitude:res.latitude,
								longitude:res.longitude,
								iconPath:'../../static/selfweizhi.png',
								width:20,
								height:20,
								label: {
									content: '自己所在位置',
									bgColor:'#fff',
									fontSize: 12,
									bgColor:'#008EFF',
									color: '#fff',
									padding:5,
									textAlign: 'center',
									borderRadius: 10
								}
							}
						]
						this.covers = covers
						
						//获取 客户列表
						this.getKehuList()
						// #ifndef H5
						//地址逆解析
						qqmapsdk.reverseGeocoder({
							location: {
								longitude: res.longitude,
								latitude: res.latitude
							},
							success:(res)=>{
								this.address = res.result.address
							},
							fail:(err)=>{
								console.log('12465',err)
							}
						})
						// #endif
						// #ifdef H5
						this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1',{
							key:key,
							output:'jsonp',
							location:`${res.latitude},${res.longitude}`,
							get_poi:'1'
						}).then(res=>{
							this.address = res.result.address_component.province+res.result.address_component.city+res.result.formatted_addresses.rough
						})
						// #endif
					},
					fail:(err)=>{
						if(err.errMsg == 'getLocation:fail auth deny'){
							uni.showToast({
								title:'请允许使用位置信息',
								icon:'none'
							})
						}
					}
				})
			},
			//获取 列表
			getKehuList() {
				let params = {
					lng: this.longitude,
					lat: this.latitude,
					type: this.typeIndex,
					name: this.name,
					distance: this.nearList[this.nearIndex] ? this.nearList[this.nearIndex].num : ''
				}
				netNearKehuList(params).then(res=>{
					this.list = res.data
					this.handleCover(res.data)
				})
			},
			handleCover(data) {
				data.forEach((ele,index)=>{
					if(ele.type == 3) {
						this.otherArr.push(ele.id)
					}
					let coversArr = []
					coversArr = coversArr.concat(this.covers)
					coversArr.push({
						id:ele.id,
						latitude:ele.lat,
						longitude:ele.lng,
						iconPath:ele.type == 0 ? '../../static/selfweizhi.png' : ele.type == 1 ? '../../static/weizhi.png' : ele.type == 2 ? '../../static/greenweizhi.png' : '../../static/otherweizhi.png',
						width:20,
						height:20,
						label: {
							content: ele.name,
							fontSize: 12,
							bgColor:ele.type == 0 ? '#008EFF' : ele.type == 1 ? '#03aa96' : ele.type == 2 ? '#2cee99' : '#fe1212',
							color: '#fff',
							padding:5,
							textAlign: 'center',
							borderRadius: 10
						}
					})
					this.covers = coversArr
				})
			},
			//点击标记点 触发
			changeLiInfo(e) {
				let id = e.detail.markerId
				if(id == 0 || (this.otherArr.indexOf(id) != -1)) {
					return
				}
				this.isFullScreen = false
				this.showList = false
				this.list.forEach(ele=>{
					if(ele.id == id) {
						this.liInfo = ele
					}
				})
			},
			backList () {
				this.showList = true
			},
			//全部 搜索条件
			showAll() {
				this.showMask = true
				this.maskType = 1
			},
			changeType(e) {
				this.typeIndex = e.detail.value
				this.getKehuList()
			},
			changeNear(e) {
				this.nearIndex = e.detail.value
				this.getKehuList()
			},
			//查看 路线
			lookMap(item) {
				uni.openLocation({
					latitude: Number(item.lat),
					longitude: Number(item.lng),
					success:(res)=>{
						console.log(res)
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			},
			//查看 详情
			toMore(id) {
				uni.navigateTo({
					url: '/pages/index/groupCompany/groupCompany?id='+id+'&type=1'
				})
			},
			toGroupCompany(item) {
				uni.showModal({
					title:'是否确定领取公池客户',
					content:'领取后长时间未跟进，客户将自动转为公共客户',
					success:(res)=>{
						if(res.confirm){
							netReceiveKehu({customer_id:item.id}).then(res=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
								setTimeout(()=>{
									this.getKehuList()
									let id = item.id
									let arr = this.list
									arr.forEach(ele=>{
										if(ele.id == id){
											this.liInfo = ele
										}
									})
								},2000)
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background:#fff;
	}
</style>
<style scoped lang="scss">
	.select_box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height:110rpx;
		background:#fff;
		padding:0 20rpx;
		position: relative;
		.sel_left{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 20rpx;
			width:300rpx;
			height:80rpx;
			border-radius: 25rpx;
			font-size:24rpx;
			color:#333;
			background:#f5f5f5;
			.xiaimg{
				width:20rpx;
				height:30rpx;
			}
		}
	}
	.mask{
		position: absolute;
		width:750rpx;
		top:110rpx;
		bottom:0;
		background:rgba(0,0,0,0.5);
		z-index: 9;
		.maskbox{
			position: absolute;
			left:0;
			top:0;
			width:750rpx;
			background:#fff;
			.leftbox{
				padding:30rpx;
				.leftli{
					padding:20rpx;
					border-bottom:1rpx solid #CCC;
					font-size:24rpx;
					color:#333;
				}
				.leftli_active{
					color:$uni-text-color;
					border-bottom:1rpx solid $uni-text-color;
				}
			}
			.maskbtnli{
				width:750rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding:20rpx 0 30rpx;
				.maskbtn{
					width:300rpx;
					height:60rpx;
					border-radius: 30rpx;
					line-height: 60rpx;
					text-align: center;
					font-size:24rpx;
					color:#fff;
				}
				.sure{
					background:$uni-text-color;
				}
				.reset{
					background: $uni-text-color;
				}
			}
		}
	}
	.nearby {
		.map_show {
			width: 750rpx;
			height: 400rpx;
		}
		.kehu-btn{
			width:750rpx;
			height:100rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) / 2);
			background:#fff;
			border-top:1rpx solid #CCC;
			font-size:26rpx;
			color:#666;
			text-align: center;
			line-height: 100rpx;
			color:$uni-text-color;
		}
		.scroll {
			// 487  687
			// height: 500rpx;
			
			background:#fff;
			
			.backlist{
				font-size:24rpx;
				color:$uni-text-color;
				padding:20rpx;
			}
			.map_group {
				background-color: #fff;
				padding:30rpx;
				border-bottom:1rpx solid #ccc;
				.name_li{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.name{
						font-size:32rpx;
						color:#333;
					}
					.status{
						font-size:24rpx;
						color:#fff;
						padding:5rpx 8rpx;
						border-radius: 10rpx;
						background:$uni-text-color;
					}
				}
				.text{
					font-size:24rpx;
					color:#666;
					margin:15rpx 0;
				}
				.bntlist{
					display: flex;
					justify-content: space-around;
					align-items: center;
					.anniu{
						width:240rpx;
						height:60rpx;
						border-radius: 30rpx;
						font-size:26rpx;
						color:#fff;
						text-align: center;
						line-height: 60rpx;
						background:#fff;
						border:1px solid $uni-text-color;
						
					}
					.luxian{
						background:$uni-text-color;
						border:1px solid $uni-text-color;
					}
					.lingqu{
						background: #fff;
						border:1px solid $uni-text-color;
					}
				}
			}
		}
		.xiawarp{
			background:#fff;
			padding:10rpx 0;
			text-align: center;
			.xiaimg{
				width:30rpx;
				height:30rpx;
			}
		}
		.map_rim {
			display: flex;
			padding: 0 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #fff;
			justify-content: space-between;
			align-items: center;
			font-size:24rpx;
			color:#333;
			border: 1rpx solid #EAEAEA;
			.weizhiimg{
				width:30rpx;
				height:30rpx;
			}
		}


	}
</style>
