<template>
	<view class="appCotent">
		<div class="oneMoveCar">
			<div class="contentMoveCar">
				<div class="car_item__one">
					<div class="item__label item__label__one">
						车牌号：
					</div>
					<div class="item__content">
						{{appBo.carNo}}
					</div>
				</div>
				<div class="car_item__two">
					<div class="item__label">
						当前位置:
					</div>
					<div class="item__value">
						{{appBo.detailInfo}}
						<!-- <u--text :text="appBo.detailInfo" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx" ></u--text> -->
						<!-- //todo 这个滚动通知有一个padding的设置项,导致高度增加不少,需要解决 -->
						<!-- <u-notice-bar :text="appBo.detailInfo" icon=" " single="true" color="#333333" height="35" bgColor="#ffffff" fontSize="30rpx"  ></u-notice-bar> -->
						<!-- <div class="item__icon">
                <image src="@/static/move-car/move-car-code1.png" />
              </div> -->
					</div>
				</div>
				<div class="car_item__three">
					我的车辆如果阻碍了您的爱车的通行，请点击下方按钮通知我，给您造成的不便敬请谅解！！！
				</div>
			</div>
			<div class="moveCarMsg">
				<div class="move-car__tips">
					点击下方按钮联系车主
				</div>
                
                <button class="move-car__btn" type='primary'
                	open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
                	拨打车主电话通知
                </button>
				<div class="move-car__btn" @click="wechat">
					微信通知(上限{{wxMaxNum}}次)
				</div>
				<!-- <div class="move-car__wx">
            <u-checkbox-group  placement="row">
                <u-checkbox v-model="checked" @change="changeWechat"></u-checkbox>
            </u-checkbox-group> 微信通知(上限3次)
        </div> -->
				<div class="move-car__more" @click="">
					<div @click="goToIndex">
						获取同款挪车牌
						<span>
							<image src="@/static/move-car/move-car-code2.png">
						</span>
					</div>
					<div class="center__shu">
						<image src="@/static/move-car/move-car-code3.png">
					</div>
					<div @click="goMyCar">
						查看我的挪车牌
						<span>
							<image src="@/static/move-car/move-car-code2.png">
						</span>
					</div>
				</div>
			</div>
			<u-action-sheet :actions="list" @close='close' @select="selectClick" closeOnClickOverlay round='6'
				:show="show"></u-action-sheet>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [
					//           {
					//   name:'2367虚拟号码345',
					//             color:'#333333',
					//             fontSize:'20',
					// },
					{
						name: '呼叫',
						color: '#3A86F7',
						fontSize: '18',
					},
					{
						name: '取消',
						color: '#E6271D',
						fontSize: '18',
					},
				],
				checked: false,
				moveCode: '',
				appBusCar: {},
				appBo: {
					//车牌号
					carNo: '',
					//省
					provinceName: '',
					//市
					cityName: '',
					//区
					countyName: '',
					//街道
					township: '',
					//号数
					number: '',
					//详细地址
					detailInfo: '',
					//是否微信通知
					wechat: false,
				},
				noticeResult: {
					secretPhone: '',
					allowPhone: false,
					allowWechat: false,
					notAllowPhoneReason: '',
					notAllowWechatReason: '',
				},
				wxMaxNum:""
			}
		},
		methods: {
			goToIndex() {
				uni.navigateTo({
					url: '/pages/main'
				});
			},
			changeWechat() {
				this.appBo.wechat = !this.appBo.wechat
			},
            //解析手机号
            getPhoneNumber(e) {
            	let that = this
            	if (e.detail.errMsg == "getPhoneNumber:ok") {
                    that.appBo.code = e.detail.code
                    that.call()
            	} else {
            		uni.hideLoading()
            	}
            },
			call() {
				this.appBo.moveCode = this.moveCode
				let opts = {
					url: '/app/contact/phone/notice',
					method: 'post'
				};
				this.http.httpTokenRequest(opts, this.appBo).then(res => {
					if (res.data.code == 200) {
						//请求成功逻辑，修改
						this.noticeResult = res.data.data
						if (this.noticeResult.allowPhone) {
							// this.list[0].name = this.noticeResult.secretPhone
							this.show = true;
						}
					} else {
						this.noticeResult = res.data.data
						if (this.noticeResult) {
							uni.showModal({
								content: this.noticeResult.notAllowPhoneReason,
							})
						}
					}
				})
			},
			wechat() {
				this.appBo.moveCode = this.moveCode
				let opts = {
					url: '/app/contact/wechat/notice',
					method: 'post'
				};
				this.http.httpTokenRequest(opts, this.appBo).then(res => {
					if (res.data.code == 200) {
						uni.showModal({
							content: "微信消息发送成功",
						})
					} else {
						//请求成功逻辑，修改
						this.noticeResult = res.data.data
						if (this.noticeResult) {
							uni.showModal({
								content: this.noticeResult.notAllowWechatReason,
							})
						}
					}
				})
			},
			close() {
				this.show = false;
			},
			goMyMoveCar() {

			},
			selectClick(index) {
				if (index.name == "呼叫") {
					uni.makePhoneCall({
						phoneNumber: this.noticeResult.secretPhone
					});
				} else if (index.name == "取消") {
					this.show = false;
				}
			},
			goMyCar() {
				uni.navigateTo({
					url: '/pagesB/pages/move-car/myMoveCar'
				})
			},
			// 获取微信通知次数
			getMoveCode() {
				let opts = {
					url: '/app/moveCode/notice/config',
					method: 'get'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						this.wxMaxNum = res.data.data.wxMaxNum
					} 
				})
			},
			getCarNumber() {
				let opts = {
					url: '/app/moveCode/owner/' + this.moveCode,
					method: 'get'
				};
				//let opts = { url: '/app/moveCode/owner/MV123', method: 'get' };
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						if (JSON.stringify(res.data.data) != "{}") {
                            let carData = res.data.data
							this.appBo.carNo = carData.carNo
                            this.appBo.brand = carData.brand
                            this.appBo.carModel = carData.carModel
						} else {
							uni.navigateTo({
								url: '/pagesB/pages/move-car/scan?moveCode=' + this.moveCode
							})
						}
					} else {
						//查询挪车码失败
						uni.showToast({
							title: res.data.msg,
							icon: "error",
						});
					}
				})
			},
			getMoveLogInit() {
				let opts = {
					url: '/app/moveLog/init',
					method: 'get'
				};
				this.http.httpTokenRequest(opts, {}).then(res => {
					if (res.data.code == 200) {
						//添加逻辑判断
						this.appBo.logCode = res.data.data
					}
				})
			},

			// 用户授权
			getAuthorize() {
				const _this = this
				uni.authorize({
					scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
					success(res) {
						_this.getLocation()
					},
					// 授权失败
					fail(err) {
						uni.showModal({
							title: '温馨提示',
							content: '无法获取当前位置，请手动开启授权',
							success: function(res) {
								if (res.confirm) {
									//console.log('用户点击确定')
									uni.openSetting({
										success(res) {
											if (res.authSetting['scope.userLocation']) {
												//console.log('打开授权设置定位')
												_this.getLocation()
											}
										},
									})
								} else if (res.cancel) {
									//console.log('用户点击取消')
								}
							},
						})
					},
				})
			},
			// 获取用户的地理位置，
			getLocation() {
				const _this = this
				uni.getLocation({
					type: 'wgs84',
					altitude: true,
					success(res) {
						//小程序只能获取到位置经纬度，需要借助高德地图的逆解析地址，显示出中文具体城市名字
						_this.loadCity(res.longitude, res.latitude)
					},
					fail() {
						//console.log('拒绝获取地理位置')
					}
				})
			},
			// 经纬度转具体城市
			// 1）需要用到高德地图的逆地理编码
			// 2）需要当前地理位置的经纬度
			// 3）小程序的key值
			loadCity(longitude, latitude) {
				const that = this
				uni.request({
					header: {
						'Content-Type': 'application/text',
					},
					//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
					url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
						longitude +
						',' +
						latitude +
						'&key=1bba2ab2de600f8b5fafe167e09cd2af&radius=1000&extensions=all',
					success(res) {
						console.log(res);
						if (res.statusCode === 200) {
							if (res.data.status === '1') {
								let addressInfo = res.data
								//详细地址
								that.appBo.detailInfo = addressInfo.regeocode.formatted_address
								//省
								that.appBo.provinceName = addressInfo.regeocode.addressComponent.province
								//市,直辖市有可能为空数组
								that.appBo.cityName = addressInfo.regeocode.addressComponent.city
								//为数组的时候设置为空
								if (Array.isArray(that.appBo.cityName)) {
									that.appBo.cityName = ''
								}
								//区
								that.appBo.countyName = addressInfo.regeocode.addressComponent.district
								//街道
								that.appBo.township = addressInfo.regeocode.addressComponent.township
								//号数
								that.appBo.number = addressInfo.regeocode.addressComponent.streetNumber.number

								//console.log("当前位置: " + that.appBo.detailInfo + " " + that.appBo.provinceName + " " + " " + that.appBo.cityName + " " + that.appBo.countyName)
							}
						} else {
							//console.log('获取信息失败，请重试！')
						}
					},
				})
			}
		},
		onLoad(e) {
			// 在页面加载的时候去判断用户有没有授权地理位置，没授权的话引导用户去设置页手动授权
			this.getAuthorize()
			console.log(e)
			if (e.scene) {
				//获取二维码携带的参数
				//扫码后得到的参数
				//let scene = decodeURIComponent(e.query.scene)
				// scene = scene.split('&')
				// let data = {
				// 	//场景值
				// 	scene: e.scene
				// }
				this.moveCode = e.scene
				//console.log('scene: ' + scene);
			}
		},
		onShow() {
			this.getCarNumber()
			this.getMoveCode()
		},
		created() {

		},
	}
</script>

<style lang="scss" scoped>
	.u-notice-bar {
		padding: 0 !important;
	}

	.oneMoveCar {

		.u-checkbox-group {
			display: inline-block !important;
		}

		/deep/.u-checkbox-group--row {
			display: inline-block !important;
		}

		.contentMoveCar {

			padding: 40rpx;

			.item__label {
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 42rpx;
			}

			.item__label__one {
				padding-right: 34rpx;
			}

			.item__content {
				width: 500rpx;
				font-size: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #F1251B;
				line-height: 42rpx;
				text-align: center;
				line-height: 100rpx;
				height: 100rpx;
				background: url(@/static/move-car/move-car-code5.png) no-repeat;
				background-size: contain;
			}

			.item__value {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 100rpx;
				width: 500rpx;
				padding: 10rpx 0;
				height: auto;
				background: url(@/static/move-car/move-car-code4.png) no-repeat;
				background-size: cover;
				line-height: 40rpx;
				display: flex;
				box-sizing: border-box;
				padding: 0 10rpx;
				align-items: center;
				justify-content: space-between;
			}

			.car_item__one {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
			}

			.car_item__two {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.item__icon {

					padding-right: 40rpx;

					image {
						width: 11rpx;
						height: 18rpx;
					}
				}
			}

			.car_item__three {
				margin-top: 40rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #F88D28;
				line-height: 36rpx;
				text-indent: 2em;
				padding: 30rpx;
				box-sizing: border-box;
				background: url(@/static/move-car/move-car-code6.png) no-repeat;
				background-size: contain;
			}
		}

		.moveCarMsg {
			height: 454rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 28rpx 1rpx rgba(232, 232, 232, 0.2);
			border-radius: 20rpx;
			padding: 32rpx 40rpx;
			position: relative;
			top: -56rpx;

			.move-car__tips {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 39rpx;
				text-align: center;
			}

			.move-car__btn {
				text-align: center;
				width: 400rpx;
				height: 76rpx;
				border-radius: 8rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 76rpx;
				background: url(@/static/move-car/move-car-code7.png) no-repeat;
				background-size: contain;
				margin: 40rpx auto 30rpx auto;

			}

			.move-car__wx {

				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 42rpx;
				text-align: center;
				margin-bottom: 100rpx;
			}

			.move-car__more {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #F88D28;
				line-height: 42rpx;
				display: flex;
				justify-content: space-between;

				.center__shu {
					image {
						width: 3rpx;
						height: 27rpx;
					}
				}

				span {
					padding-left: 20rpx;

					image {
						width: 11rpx;
						height: 18rpx;
					}
				}
			}
		}
	}
</style>
