<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="getsignDistance">签到</view>
			</view>
		</view>
		<!-- 签到弹框 -->
		<view class="qdTk" v-if="qdtkShow" @click="qdtkClose">
			<view class="qdTkBox" @click.stop="kkk">
				<image src="../../static/img/gaunbi.png" mode="" class="qdTkclose" @click="qdtkClose"></image>
				<view class="qdTkBoxTitle" v-if="anomaly==0">上传照片</view>
				<view class="qdTkBoxTitle" v-if="anomaly==1">提示</view>
				<view class="qdTkImgBox" v-if="anomaly==0">
					<image :src="img" mode="" v-if="img" class="additemImg"></image>
					<image v-else src="../../static/img/icon_addpic@2x.png" mode="" class="additemImg" @click="upImage"></image>
				    <image v-if="img"  src="../../static/img/icon_delpic@2x.png" mode=""  class="delImg" @click="delimg()"></image>
				</view>
				<view class="qdtis" v-if="anomaly==1">距门店大于{{settingDistance}}米，请重新签到或填写原因</view>
				<view class="reasonID" v-if="anomaly==1">
					<picker @change="bindPickerChange($event)" range-key="reason" :range="anomalySignList">
						<view class="pickerV">
							<view class="pickerView" v-if="reasonID">{{reasonIDTxt}}</view>
							<view class="pickerView" v-else>请选择</view>
							 <image src="../../static/img/jiantou.png" mode="" class="storeJtimg"></image>
						</view>
					  
					</picker>
				</view>
				<view class="other" v-if="otherShow&&anomaly==1">
					<textarea v-model="comment" placeholder-style="color:#CCCCCC" placeholder="其他说明" class="qdtextarea"/>
				</view>
				<view class="wcQd" @click="signin">完成签到</view>
			</view>
			
		</view>
		<!-- 签到弹框 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId:'',
				lng: '',
				lat: '',
				covers:[],
				addressName:'',
				appkey:'064b6a4a8ade55656edcde2f528876de',
				keywords:'',
				addressList:'',
				ckIndex:0,
				address:'',
				settingDistance:'',
				distance:'',
				qdtkShow:false,
				img:'',
				anomaly:'',//是否异常签到 1是 0不是
				reason:'',
				comment:'',
				reasonID:'',
				anomalySignList:[],
				reasonIDTxt:'',
				otherShow:false,
			}
		},
		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();
				//that.getsignDistance()
		   	},
		   	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()
		   //this.getsignDistance()
		   // #endif
		  
		  this.queryAnomalySignList()
		},
		methods: {
			kkk(){},
			qdtkClose(){
				this.qdtkShow=false;
			},
			ckSignin(index,item){
				this.ckIndex=index;
				this.address=item.name;
			},
			bindPickerChange(e){
				console.log(e)
				var index=e.detail.value
				this.reasonIDTxt=this.anomalySignList[index].reason;
				this.reasonID=this.anomalySignList[index].id
				if(this.reasonIDTxt=='其他'){
					this.otherShow=true
				}else{
					this.comment='';
					this.otherShow=false
				}
			},
			upImage(){
				var that=this;
				uni.chooseImage({
					sourceType: ['camera'],
					count:1, 
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths[0];
						
							uni.uploadFile({
							    url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
							    filePath: tempFilePaths,
							    name: 'file',
							    formData: {
							        'user': 'test'
							    },
							    success: (uploadFileRes) => {
							        console.log(JSON.parse(uploadFileRes.data).data );
									that.img=JSON.parse(uploadFileRes.data).data[0]
									/* console.log(item.imgArr)
									item.imgArr=item.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
									that.categoryList.splice(1,0) */
							    }
							}); 
						
				     
						/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
							
						}) */
				    }
				});
			},
			signin(){
				if(this.anomaly==0){
					if(this.img==''){
						uni.showToast({
						    title: '请上传图片',
							icon:'none',
						    duration: 2000,
						});
						return false;
					}
				}else{
					if(this.reasonID==''){
						uni.showToast({
						    title: '请选择签到原因',
							icon:'none',
						    duration: 2000,
						});
						return false;
					}
				}
				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()
					 }
				})
			
			},
			delimg(){
				this.img=''
			},
			getsignDistance(){
				uni.showLoading({ });
				this.$http('accompany/SuperAccounts/signDistance', {
					shopId:this.shopId,
					
					lat:this.lat,
					lng:this.lng
				}, 'GET').then(res => {
					console.log(res)
					if(res.code!=0){
						
						uni.showToast({
						    title: '该门店未设置位置信息，请维护门店信息或联系总部',
							 icon:'none',
						    duration: 2000,
						});
					}else{
						this.settingDistance=res.data.settingDistance;
						this.distance=res.data.distance*1000;
						if(this.distance>this.settingDistance){
							this.anomaly=1
						}else{
						    this.anomaly=0
						}
						this.qdtkShow=true
					}
				    
					
				})
			},
			gotoQd(){
				uni.showLoading({ });
				this.$http('accompany/SuperAccounts/addSuperSignIn', {
					shopId:this.shopId,
					address:this.address,
					lat:this.lat,
					lng:this.lng,
					distance:this.distance,
					anomaly:this.anomaly,
					img:this.img,
					reason:this.reasonIDTxt,
					comment:this.comment,
					reasonID:this.reasonID
				}, 'POST').then(res => {
				     uni.showToast({
				         title: '签到成功',
				     	 icon:'success',
				         duration: 2000,
				     });
					 //this.$store.commit('mutationsCategoryList',this.categoryList)
					 setTimeout(function(){
					 	uni.navigateBack({
					 		delta:1
					 	})
					 },1000)
					
				})
			},
			queryAnomalySignList(){
				this.$http('accompany/SuperAccounts/queryAnomalySignList', {
					
				}, 'GET').then(res => {
				     this.anomalySignList=res.data;
					 console.log(this.anomalySignList)
					
				})
			},
			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;
		
	}
	.reasonID{
		border-bottom: 1px solid #EEEEEE;
		padding: 30rpx;
	}
	.storeJtimg{
		width: 14rpx;
		height: 26rpx;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}
	.qdtextarea{
		width: 526rpx;
		height: 120rpx;
		background: #F4F5F7;
		border-radius: 10rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		padding: 20rpx;
		font-size: 28rpx;
	}
	.qdTk{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 111;
		background: rgb(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.qdtis{
		width: 566rpx;
		height: 60rpx;
		background: rgba(255, 79, 0,0.1);
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #FF4F00;
		line-height: 60rpx;
		text-align: center;
		margin-top: 18rpx;
		margin-left: 30rpx;
	}
	.additemImg{
		width:150rpx;
		height: 150rpx;
	}
	.qdTkImgBox{
		padding: 30rpx;
		position: relative;
		width:150rpx ;
	}
	.qdTkBox{
		width: 626rpx;
		height: 640rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		position: relative;
	}
	.qdTkBoxTitle{
		font-size: 32rpx;
		color: #3C3C3C;
		text-align: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}
	.qdTkclose{
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		top: 36rpx;
		right: 30rpx;
	}
	.pickerV{
		display: flex;
		justify-content: space-between;
		width: 560rpx;
		color: #3C3C3C;
		font-size: 28rpx;
	}
	.delImg{
		width:36rpx;
		height: 36rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
	.wcQd{
		width: 566rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 50rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
	}
	/* #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>
