<template>
	<view class="content">
		<view class="c-top">
			<view class="" @click="getback()">
				<uni-icons type="left" size="18"></uni-icons>
			</view>
			<view class="c-title">上门取车</view>
			<view class=""></view>
		</view>
		<view class="ail">
			<view class="ail-box">
				<view class="h-title">上门时间</view>
				<scroll-view scroll-x="true" class="box-bottom">
					<view class="santu" :class="{'lanbox' : tapindex == index}" v-for="(items,index) in itmelist"
						:key="index" @click="gettap(index,items)">
						<view class="" style="font-size: 18px;">{{items.dateStr.substring(5,10).replace('-','月')}}
						</view>
						<view class="">{{items.weekStr}}</view>
						<!-- 	<view class="">预约人数：{{items.morningCount + items.afterCount}}</view> -->
					</view>
				</scroll-view>

				<view class="on-input" @click="show = true">
					<view class="baoti">选择时间:</view>
					<text>{{times}}</text>
				</view>
				<!-- <view class="dis">
					<view class="wushi" :class="{'lanbox' : sx == 0}" @click="sx = 0">
							<view class="">上午</view>
							<view class="">当前预约：{{renshu.morningCount}}人</view>
					</view>
					<view class="wushi" :class="{'lanbox' : sx == 1}" @click="sx = 1">
							<view class="">下午</view>
							<view class="">当前预约：{{renshu.afterCount}}人</view>
					</view>

				</view> -->
			</view>
			<view class="ail-box">
				<view class="on-input">
					<view class="baoti">商品名称:</view>
					<text>{{goodsname}}</text>
				</view>
				<view class="on-input">
					<view class="baoti">预约时间:</view>
					<text>{{appointmentday}}</text>

				</view>
				<view class="on-input">
					<view class="baoti">手机号:</view>

					<input type="text" v-model="tel">

				</view>

			</view>
		</view>
		<view class="top">
			<view class="top-box" @click="getmap()">
				<view class="tb-left">
					<view class="">
						<view class="text1" v-show="four == ''">请选择地址</view>
						<view class="text1" v-show="four != ''">{{province}}{{city}}{{area}}</view>
						<view class="hong1" v-show="four == ''">*必填，请填写详细地址</view>
						<view class="hong2" v-show="four != ''">
							<input type="text" :placeholder="four">
						</view>
					</view>
				</view>
				<view class="tb-right">
					<uni-icons type="location-filled" color=" #0D2E8D" size="26"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <view class="top">
			<view class="on-input">
				<view class="baoti">距离:</view>
				<text>{{jlFunction(distance)}}</text>
			</view>
			<view class="on-input">
				<view class="baoti">金额:</view>
				<text>{{pickPrice || 0}}元</text>
			</view>
		</view> -->
		<view class="sbboss">
			<view class="zz">{{(distance/1000).toFixed(2)}} <text style="font-size: 16px;">Km</text></view>
			<view class="yy">{{pickPrice/100 || 0}} <text style="font-size: 16px;">元</text> </view>
		</view>

		<view class="bottom-d">
			<view class="annniu" @click="gettijiao()">
				<text>提交</text>
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="value1" mode="time" @confirm="confirms"
			@cancel="cancels"></u-datetime-picker>
	</view>
</template>

<script>
	import config from '@/config'
	import request from '../../utils/request';
	export default {
		data() {
			return {
				value1: '',
				times: '请选择当天取车时间',
				tapindex: 0,
				show: false,
				sx: 0,
				pickPrice: 0,
				distance: 0,
				type: '',
				goodsname: '',
				goodsId: '',
				itmelist: [],
				partnerId: '',
				appointmentday: '请选择上方时间',
				partnerName: '汽车',
				address: '',
				province: '',
				city: '',
				tel: '',
				area: '',
				latitude: '36.65214755816529',
				longitude: '116.97271519898783',
				position: '',
				four: '',
				renshu: {
					morningCount: 0,
					afterCount: 0
				}

			}
		},
		onLoad(option) {
			this.goodsname = option.goodsName
			this.goodsId = option.goodsId
			this.type = option.type
			console.log(this.goodsId, this.goodsname);
			this.gettiemlist()
			// this.pickCarInfo( )


		},
		methods: {
			jlFunction(num) {

				let snum = num / 1000
				if (snum >= 1) {
					return snum.toFixed(2) + 'Km'
				} else {
					return snum.toFixed(2) + 'm'
				}
			},
			confirms(e) {
				this.times = e.value
				console.log(e);
				this.show = false
			},
			cancels(e) {
				console.log(e);
				this.show = false
			},
			async gettiemlist() {

				let res = await request({
					url: '/appInspection/goods/pickCarInfo',
					method: 'get'
				})
				console.log('获取时间', res);
				this.itmelist = res.data.dataList
				this.tel = res.data.userPhone

			},
			async pickCarInfo() {
				let data = {
					goodsId: this.goodsId,
					type: this.type,
					latitude: this.latitude,
					longitude: this.longitude
				}
				let rest = await request({
					url: '/appInspection/goods/computeDistanceAndPrice',
					method: 'get',
					params: data
				})

				console.log(rest);
				this.pickPrice = rest.data.pickPrice
				this.distance = rest.data.distance

			},
			getmap() {
				console.log("点击位置");
				let that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						console.log(res)
						that.latitude = res.latitude
						that.longitude = res.longitude
						that.position = res.address
						that.pickCarInfo()
						// that.adds = res.address;
						// let point = new plus.maps.Point(res.longitude,res.latitude);
						var address = res.address;
						var reg = /.+?(省|市|自治区|自治州|县|区)/g;
						let addressList = address.match(reg).toString().split(",");
						if (addressList[0] == '重庆市' || addressList[0] == '北京市' || addressList[0] == '天津市' ||
							addressList[0] == '上海市') {
							that.province = addressList[0];
							that.city = '市辖区';
							that.area = addressList[1];
							that.four = address.replace(that.province, '').replace(that.city, '').replace(that
								.area, '');
						} else {
							that.province = addressList[0];
							that.city = addressList[1];
							that.area = addressList[2];
							that.four = address.replace(that.province, '').replace(that.city, '').replace(that
								.area, '');
						};
						console.log('zdz', that.four);

					},
					fail: function(errr) {
						console.log(errr);
					}
				});


			},
			async getindex() {
				let data = {
					goodsId: this.goodsId,
					type: this.type
				}
				let res = await request({
					url: '/appInspection/goods/appointmentDateList',
					method: 'get',
					params: data
				})
				this.partnerName = res.data.partnerName
				this.address = res.data.address
				this.partnerId = res.data.partnerId
				this.itmelist = res.data.dataList
				this.appointmentday = res.data.dataList[0].dateStr
				console.log(this.appointmentday.substring(5, 10).replace('-', '月'));
				console.log(res.data);
			},
			gettap(index, items) {

				this.tapindex = index
				this.renshu = items
				this.appointmentday = items.dateStr
				console.log(this.renshu);

			},
			async gettijiao() {

				let data = {
					userPhone: this.tel,
					longitude: this.longitude,
					latitude: this.latitude,
					adressDetail: this.position,
					appointmentDay: this.appointmentday,
					appointmentTime: this.times,
					goodsId: this.goodsId,
					type: this.type,

				}
				let res = await request({
					url: '/appInspection/goods/pickCarInspection',
					method: 'post',
					data: data
				})
				console.log(res);
				if (res.code == 200) {
					console.log("283");
					uni.$emit("pickCar", res.data)
					console.log("284");
					uni.navigateBack({
						delta: 1
					})
				}


			},
			getback() {

				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		// padding-top: 45px;
	}

	.ail {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 15px;
		background-color: #F6F6F6;
	}

	.ail-box {
		width: 100%;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		background: #FFFFFF;
		margin-bottom: 10px;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		padding-top: 16%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}

	.on-input {
		width: 100%;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;

		padding: 10px 0px;
		display: flex;
		align-items: center;
	}

	.baoti {
		width: 25%;
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
		margin-right: 10px;
	}

	.box-bottom {
		width: 100%;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.santu {
		width: 32%;
		display: inline-block;
		box-sizing: border-box;
		padding: 10px;
		background: #F8FAFB;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 400;
		color: #999999;
		margin-top: 15px;
		margin-right: 10px;
	}

	.lanbox {
		background: #E3EAFF !important;
		color: #0D2E8D !important;
	}

	.dis {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.wushi {
		width: 49%;

		box-sizing: border-box;
		padding: 10px;
		background: #F8FAFB;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 400;
		color: #999999;
	}

	.h-title {
		font-size: 16px;
		font-weight: 400;
		color: #333333;
		margin: 10px auto;
	}

	.bottom-d {
		width: 100%;
		height: 80px;
		background-color: white;
		position: fixed;
		bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.annniu {
		height: 40px;
		background: #0D2E8D;
		width: 90%;
		border-radius: 50px;
		display: flex;
		align-items: center;
		color: white;
		justify-content: center;
	}

	.top {
		box-sizing: border-box;
		padding: 0px 15px;
		width: 90%;
		border-radius: 10px;
		margin: 10px auto;
		background-color: white;
	}

	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20px 0px;
	}

	.tb-left {
		height: 100%;
		width: 80%;
		display: flex;
		align-items: center;
	}

	.uicon {
		width: 18px;
		height: 18px;
		border-radius: 4px;
		color: white;
		background: orangered;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		font-weight: bold;
		margin-right: 6px;
	}

	.tb-right {
		width: 20px;
		height: 26px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.text1 {
		font-size: 16px;
		font-weight: bold;
		color: #363636;
	}

	.hong1 {
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;
		color: #FF5453;
	}

	.hong2 {
		margin-top: 5px;
		font-size: 12px;
		font-weight: 400;

	}

	.tinput {
		width: 100%;
		display: flex;
		background: white;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 16px;
		margin-top: 14px;
	}

	.sbboss {
		width: 90%;
		margin: 10px auto;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 10px;
		display: flex;
		align-items: center;
		margin-top: 30px;
		// background-color: white;
	}

	.zz {
		width: 50%;
		text-align: center;
		font-size: 60px;
		font-weight: bold;
	}

	.yy {
		width: 50%;
		text-align: center;
		font-size: 60px;
		font-weight: bold;
	}
</style>
