<template>
	<view class="content">
		<view class="mapBox">
			<map id="map1" ref="map1" style="width:100%;height:50vh;" :latitude="lat":longitude="lng" 
			:markers="covers" @poitap="labeltap"
			></map>
		</view>
		
		<view class="siginBox">
			<scroll-view scroll-y="true" class="scrollView">
				<view class="dizline" v-for="(item,index) in addressList" @click="ckSignin(index,item)" :class="{active:ckIndex==index}">
				 <image src="../../static/img/icon_zuobiao_def@2x.png" mode="" class="dizlineImg" v-if="ckIndex!=index"></image>
				 <image src="../../static/img/icon_zuobiao@2x.png" mode="" class="dizlineImg2" v-else></image>
				 <view class="addressTxt">
					 <view class="addressName">{{item.name}}</view>
				     <view class="district">{{item.district}}{{item.address}}</view>
				 </view>
				 <image src="../../static/img/icon_duihao@2x.png" mode="" v-if="ckIndex==index" class="duihaoimg"></image>
				
			 </view>
			</scroll-view>
			<view class="bottom">
				<view class="bottomBtn" @click="signin">签到</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId:'',
				lng: '',
				lat: '',
				covers:[],
				addressName:'',
				appkey:'064b6a4a8ade55656edcde2f528876de',
				keywords:'',
				addressList:'',
				ckIndex:0,
				address:'',
			}
		},
		onLoad(opt) {
           this.shopId=opt.shopId;
		   var that = this
		   uni.getLocation({
			//type: 'gcj02',
		   	success(res) {
				console.log(res)
		   		that.lng = res.longitude;
		   		that.lat = res.latitude;
				var obj={
					 latitude: that.lat,
					 longitude: that.lng,
				}
				that.covers.push(obj)
				that.getaddress()
		   	},
		   	fail() {
		   
		   	}
		   })
		   //#ifdef H5
		   
		   that.lng = '117.143411'
		   that.lat = '36.677445'
		   var obj={
		   	 latitude: that.lat,
		   	 longitude: that.lng,
		   }
		   that.covers.push(obj)
		   that.getaddress()
		   // #endif
		},
		methods: {
			ckSignin(index,item){
				this.ckIndex=index;
				this.address=item.name;
			},
			signin(){
				uni.showLoading({ });
				var that=this;
				this.$http('accompany/SuperAccounts/queryManagerTodaySign', {
					shopId:this.shopId,
					
				},'GET').then(res => {
					 if(res.data.today){
						 uni.showModal({
						     title: '提示',
						     content: '是否更新签到位置？',
						     success: function (res) {
						         if (res.confirm) {
						           that.gotoQd()
						 							 
						         } else if (res.cancel) {
						             console.log('用户点击取消');
						         }
						     }
						 });	
					 }else{
						 this.gotoQd()
					 }
				})
			
			},
			gotoQd(){
				uni.showLoading({ });
				this.$http('accompany/SuperAccounts/addSuperSignIn', {
					shopId:this.shopId,
					address:this.address,
					lat:this.lat,
					lng:this.lng
				}, 'POST').then(res => {
				     uni.showToast({
				         title: '签到成功',
				     	 icon:'success',
				         duration: 2000,
				     });
					 //this.$store.commit('mutationsCategoryList',this.categoryList)
					 setTimeout(function(){
					 	uni.navigateBack({
					 		delta:1
					 	})
					 },1000)
					
				})
			},
			labeltap(e){
				console.log(e);
				this.lat=e.detail.latitude;
				this.lng=e.detail.longitude;
				this.addressName=e.detail.name;
				this.getcovers()
			},
			getcovers(){
				this.covers=[]
				var obj={
					 latitude: this.lat,
					 longitude: this.lng,
					 callout:{
						 content:this.addressName,
						 display:'ALWAYS',
						 padding: 10, //文本边缘留白
						 fontSize: 16, //文字大小
						 borderRadius: 10, //callout边框圆角
					 }
				}
				this.covers.push(obj)
				this.getLocationList()
			},
			getLocationList() {
				console.log("getLocationList")
				let _this = this;
				let data = {};
				data.keywords =this.addressName;
				data.location = this.lng+','+this.lat;
				data.key=this.appkey;
				uni.request({
					url: 'https://restapi.amap.com/v3/assistant/inputtips?parameters',
					method: 'GET',
					data: data,
					success(res) {
						 _this.addressList = res.data.tips;
						 _this.address=_this.addressList[0].name
					}
				})
			},
			getaddress(){
				let _this = this;
				let data = {};
				
				data.location = this.lng+','+this.lat;
				data.key=this.appkey;
				uni.request({
					url: 'https://restapi.amap.com/v3/geocode/regeo',
					method: 'GET',
					data: data,
					success(res) {
						/* _this.list = res.data.tips; */
						//console.log(res.data.regeocode.formatted_address)
						_this.addressName=res.data.regeocode.formatted_address;
						console.log(_this.addressName)
						_this.getLocationList()
					}
				})
			}
		}
	}
</script>

<style scoped>
	.content{
		 background: #F4F5F7;
		 min-height: 100vh;
		
	}
	/* #ifdef H5 */
		.content{
			 background: #F4F5F7;
			 min-height:calc(100vh - 44px);
			
		}
	/* #endif */
	.siginBox{
		background: #FFFFFF;
		height: 50vh;
	}
	.dizlineImg{
		width: 24rpx;
		height: 24rpx;
		margin-top: 30rpx;
	}
	.dizline{
		display: flex;
		margin: 30rpx 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.scrollView{
		height: calc(50vh -  120rpx);
	}
	.addressTxt{
		padding-left: 30rpx;
		width: 600rpx;
	}
	.addressName{
		font-size: 30rpx;
		color: #3C3C3C;
	}
	.district{
		font-size: 24rpx;
		color: #999999;
		padding-top: 8rpx;
	}
	.bottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -4px 8px 0px rgba(153,153,153,0.08);
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.bottomBtn{
		width: 702rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		font-size:30rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}
	.active .addressName{
		color: #FF4F00;
	}
	.dizlineImg2{
		width: 24rpx;
		height: 38rpx;
		margin-top: 20rpx;
	}
	.duihaoimg{
		width: 40rpx;
		height: 28rpx;
		margin-top: 20rpx;
	}
</style>
