<template>
	<view class="map">
		<map :latitude="latitude" :longitude="longitude" style="width: 100%;height: 100vh;" :show-location="true">
			<view class="cotrons" @click="show">
				<u-icon name="/static/images/screenList.png" label-color="#f0f5ff" size="50rpx" @cilck="show"></u-icon>
			</view>
			<view>
				<u-popup v-model="showPopup" mode="right" width="80%">
					<view class="topBox">
						<text style="display: block;">订单状态</text>
						<view>
							<u-checkbox-group @change="checkboxGroupChange" active-color="#7D5AFC">
								<u-checkbox  v-model="item.checked"
									v-for="(item, index) in Slist" :key="index" :name="item.name">{{item.name}}
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
					<view class="topBox">
						<text style="display: inline-block;">自定义日期</text>
						<u-switch v-model="showChoiceTime" size="30" @change="change" active-color="#7D5AFC" style="display: inline-block;"></u-switch>
						<view v-if="showChoiceTime==false">
							<u-radio-group v-model="value" @change="radioGroupChange" active-color="#7D5AFC">
								<u-radio @change="radioChange" v-for="(item, index) in list" :key="index"
									:name="item.name" :disabled="item.disabled">
									{{item.name}}
								</u-radio>
							</u-radio-group>
						</view>
						<view v-else>
							<text class="ctext" @click="showTimeList=true">请选择起止日期</text>
							<text class="tText" style="color: red;">*请至少选择一个日期</text>
							<view>
								<u-calendar v-model="showTimeList" :mode="mode" max-date="2100-01-01"
									active-bg-color="#55d65b" range-bg-color="rgba(17, 255, 164, 0.1)"
									toolTip="请选择订单起止时间" range-color="#55d65b" btn-type="default">
								</u-calendar>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</map>

	</view>
</template>

<script>
	export default {
		onLoad() {
			this.getUserLocation()
			uni.$u.mpShare.title = '页面分享';
		},
		data() {
			return {
				//经度
				longitude: '',
				//纬度
				latitude: '',
				//标记点
				markers: [{
					id: 1,
					latitude: '',
					longitude: '',
					zIndex: 5
				}],
				showPopup: false,
				showChoiceTime: false,
				showTimeList: false,
				mode: "range",
				Slist: [{
						name: '超时',
						checked: true,
						disabled: false
					},
					{
						name: '待预约',
						checked: true,
						disabled: false
					},
					{
						name: '待服务',
						checked: true,
						disabled: false
					}
				],
				list: [{
						name: '今天',
						disabled: false
					},
					{
						name: '今天之后',
						disabled: false
					},
					{
						name: '明天',
						disabled: false
					},
					{
						name: '后天',
						disabled: false
					}
				],
				value:'今天',
			}
		},
		methods: {
			//获取用户位置信息
			getUserLocation() {
				let that = this
				wx.getLocation({
					success(res) {
						console.log("用户位置信息:", res)
						that.longitude = res.longitude
						that.markers[0].longitude = res.longitude
						that.latitude = res.latitude
						that.markers[0].latitude = res.latitude
					},
					fail(res) {
						console.log("出现错误:", res)
					}
				})
				setInterval(wx.startLocationUpdateBackground({
				    success:(res)=>{
				        //成功的逻辑
				       wx.onLocationChange((res)=>{  //获取实时的定位信息
				             console.log(res)
							 console.log("用户位置信息:",res)

							 that.markers[0].longitude = res.longitude

							 that.markers[0].latitude = res.latitude
							 wx.stopLocationUpdate()
				       })
				    },
				    fail:(err)=>{
				        //失败的逻辑
				        //1.wx.showModal引导用户授权
				        //2.通过wx.openSetting让用户开启权限

				      wx.showModal({    //引导用户授权
				            content: '小程序需要实时获取位置，请设置为后台前台都可运行',
				            confirmText: "确认",
				            cancelText: "取消",
				            success: function (res) {
				                //点击“确认”时打开设置页面
				              if (res.confirm) {
				                wx.openSetting({  //打开设置页面让用户选择权限
				                  success: (res) => {
				                    if(res.authSetting["scope.userLocationBackground"] == true){
				                      wx.onLocationChange((res)=>{  //实时获取用户最新的经纬度信息
				                        console.log(res)
										console.log("用户位置信息:",res)

										that.markers[0].longitude = res.longitude

										that.markers[0].latitude = res.latitude
										wx.stopLocationUpdate()
				                      })
				                    }
				                    }
				                })
				              } else { //取消打开设置授权页面
				                wx.showToast({
				                  title: "取消授权~",
				                  icon: 'none',
				                })
				              }
				            }
				      })
				    }
				}),1000)
			},
			show() {
				this.showPopup = true
				console.log(this.showPopup)
			},
			change(status) {
				if (status) {

				}
			},
			checkboxGroupChange(e) {

			},
			radioGroupChange(e) {

			}
		}
	}
</script>

<style scoped>
	.cotrons {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		border: 1rpx #7C59FC;
		border-radius: 50%;
		background-color: #7C59FC;
		right: 20rpx;
		top: 20rpx
	}

	.topBox {
		display: block;
		margin-left: 20rpx;
		margin-top: 40rpx;
	}

	.topBox text {
		font-size: 35rpx;
		margin-bottom: 20rpx;
		color: #d8d8d8;
	}

	.ctext {
		display: inline-block;
		background-color: #b3b3b3;
		margin-top:20rpx;
	}

	.tText {
		display: block;
		margin-top: 10rpx;
	}
</style>
