<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">
                {{appBusCar.carNo}}
            </div>
        </div>
        <div class="car_item__two">
            <div class="item__label">
                当前位置:
            </div>
            <div class="item__value">
            <!-- //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>
        <div class="move-car__btn" @click="call">
            拨打车主电话通知
        </div>
        <div class="move-car__wx">
            <u-checkbox-group  placement="row">
                <u-checkbox  v-model="checked"></u-checkbox>
            </u-checkbox-group> 微信通知(上限3次)
        </div>
        <div class="move-car__more">
            <div>
                获取同款挪车牌
                <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: '',
              //申请人手机号
              applyUserMobile: '',
              //省
              provinceName: '',
              //市
              cityName: '',
              //区
              countyName: '',
              //详细地址
              detailInfo: '',
              //是否微信通知
              isWechat: false,
              //是否成功
              isSuccess: false,
              //日志唯一编码
              logCode: '',
            },
        }
    },
    methods: {
        call() {
            this.show = true;
        },
        close() {
            this.show = false;
        },
        selectClick(index){
          if(index.name == "2367虚拟号码345"){

          }else if(index.name == "呼叫"){
            //请求拨打电话路径
            let opts = { url: '/app/contact/dialPhone' , method: 'post' };
            this.http.httpTokenRequest(opts, {}).then(res => {
              if (res.data.code == 200) {
                //请求成功逻辑，修改
				
              }
            })
            //记录修改
            let optsOne = { url: '/app/moveLog/updateLog' , method: 'post' };
            this.http.httpTokenRequest(optsOne, this.appBo).then(res => {
              if (res.data.code == 200) {
                //请求成功逻辑，后端应记录此次电话拨打

              }
            })
          }else{

          }
        },
        goMyCar() {
            uni.navigateTo({
                url: '/pagesB/pages/move-car/myMoveCar'
            })
        },
		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) != "{}"){
						this.appBusCar = res.data.data
					}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

                                console.log("当前位置: " + that.appBo.detailInfo + " " + that.appBo.provinceName + " " + " " + that.appBo.cityName + " " + that.appBo.countyName)
                            }
                        } else {
                            console.log('获取信息失败，请重试！')
                        }
                    },
                })
            }
	},
	onLoad(e) {
        // 在页面加载的时候去判断用户有没有授权地理位置，没授权的话引导用户去设置页手动授权
        this.getAuthorize()
		if(e.query) {
			//获取二维码携带的参数
			//扫码后得到的参数
			let scene = decodeURIComponent(e.query.scene)
			// scene = scene.split('&')
			// let data = {
			// 	//场景值
			// 	scene: e.scene
			// }
			this.moveCode = scene
			console.log('scene: ' + scene);
		}
	},
	onShow() {
		this.getCarNumber()
	},
	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;
            height: 70rpx;
            background: url(@/static/move-car/move-car-code4.png) no-repeat;
            background-size: contain;
            line-height: 70rpx;
            text-indent: .5em;
            display: flex;
            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: 100rpx 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>
