<template>
	<view class="container">
		<uni-navbar :title="isEdit?'运输申请':'新增运输'"></uni-navbar>
		<view class="box">
			<!-- 审批状态 -->
			<view class="addLineSuccess-big-box mb33 commonMt" v-if="isEdit">
				<view class="addLineSuccess-big-box-top bg-color-red">
					<image style="width: 45rpx; height: 45rpx;margin-left: 30rpx;"
						src="../../static/images/car/yunshu.png" mode="widthFix">
					</image>
					<text class="listTitle">审批状态</text>
				</view>
				<view class="addLineSuccess-big-box-bottom commonRedBj">
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="redCircle mCircle">
							</view>
							<text class="itemText">审批状态:</text>
						</view>
						<view class="flexAlignCenter ">
							<u-icon color="#FB5637" :name="isEdit?'close-circle-fill':'checkmark-circle-fill'"
								style="margin-right: 12rpx;"></u-icon>
							<text class="redText">驳回</text>
						</view>
					</view>
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="redCircle mCircle">
							</view>
							<text class="itemText">驳回原因:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="redText">{{form.auditContent}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 路线信息 -->
			<view class="choose-line commonBj commonMt">
				<view class="choose-line-top">
					<image style="width: 45rpx;height: 45rpx;" src="../../static/images/transport/dingwei.png"
						mode="widthFix"></image>
					<text class="listTitle">选择路线</text>
				</view>
				<!-- 中间的地图部分 -->
				<view class="choose-line-middle" v-if="isEdit">
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">运输名称:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.transportName}}</text>
						</view>
					</view>
					<view class="map">
						<mapImg :startPoint='form.startPoint' :endPoint='form.endPoint'
							:mtRoutePointList='form.mtRoutePointList'></mapImg>
						<!-- <image :src="getImg()" style="width: 100%;height: 100%;"></image> -->
						<!-- <u--image :src='src'></u--image> -->
						<!-- <mapNew height="339rpx">
							
						</mapNew> -->
					</view>
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">开始地址:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.startName}}</text>
						</view>
					</view>
					<view class="addLineSuccess-big-box-bottom-item">
						<view class="flexAlignCenter">
							<view class="greenCircle">
							</view>
							<text class="itemText">结束地址:</text>
						</view>
						<view class="flexAlignCenter">
							<text class="infoText">{{form.endName}}</text>
						</view>
					</view>
				</view>
				<!-- 选择路线部分 -->
				<view class="choose-line-bottom">
					<view @click="selectClick(item,index)" class="small-box-middle"
						:class="isChecked === index? 'active':'not-active'" v-for="(item,index) in list" :key="item.id">
						<view class="small-box-middle-startAndEnd" style="margin-bottom: -6rpx;">
							<view class="start-green">
								起
							</view>
							<text class="green" style="width: 80%;">{{item.startName}}</text>
						</view>
						<view class="small-box-middle-line ">
							<view class="small-box-middle-line-left">
							</view>
							<!-- <view class="small-box-middle-line-right">
							</view> -->
							<image v-if="isChecked===index" class="active-img"
								src="../../static/images/transport/active.png" mode="widthFix"></image>
						</view>
						<view class="small-box-middle-startAndEnd" style="margin-bottom: -6rpx;">
							<view class="start-green bgRed">
								终
							</view>
							<text class="red" style="width: 80%;">{{item.endName}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 发布信息 -->
			<view class="choose-line mt33 commonBj ">
				<view class="choose-line-top">
					<image style="width: 45rpx;height: 45rpx;" src="../../static/images/transport/message.png"
						mode="widthFix"></image>
					<text class="listTitle">发布信息</text>
				</view>
				<view class="choose-line-bottom overflowY-hidden height-auto">
					<u--form :model="form" ref="formRef" :rules="rules" labelWidth="0" class="formStyle">
						<u-form-item class="dateClass" prop="date" ref="form1" @click="changeDate">
							<view class="redCircle"></view>
							<text class="itemText">运输期限</text>
							<u-popup mode="bottom" :show="dateShow">
								<view class="time-top">
									<text>日期选择</text>
									<u-button @tap="closeDate" class="custom-style timeBtn">
										确认
									</u-button>
								</view>
								<s-calendar-select @getDate="getDate"></s-calendar-select>
							</u-popup>
							<u-input disabled disabledColor="rgba(0,0,0,0)" class="inputStyle" v-model="form.date"
								placeholder="请选择日期区间">
								<template slot="suffix">
									<image style="width: 34rpx;height: 34rpx;"
										src="../../static/images/transport/rili.png" mode="widthFix"></image>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item class="timeClass" prop="startTime" @click="changeStartTime">
							<view class="redCircle"></view>
							<text class="itemText">开始时间</text>
							<u-popup :show="startShow" mode="bottom" class="commonBj">
								<view class="time-top">
									<text>选择时间</text>
									<u-button @tap="confirmStartImte" class="custom-style timeBtn">
										确认
									</u-button>
								</view>
								<view class="time-middle">
									<picker-view v-if="startShow" :indicator-style="indicatorStyle" :value="startValue"
										@change="bindStartChange" class="picker-view">
										<picker-view-column>
											<view class="item" v-for="(item,index) in columns" :key="index">
												{{item}}
											</view>
										</picker-view-column>
										<picker-view-column>
											<view class="item" v-for="(item,index) in columnData" :key="index">
												{{item}}
											</view>
										</picker-view-column>
									</picker-view>
									<view class="time-btn">
									</view>
								</view>
							</u-popup>
							<u-input disabled disabledColor="rgba(0,0,0,0)" class="inputStyle" v-model="form.startTime"
								placeholder="请选择运输开始时间">
								<template slot="suffix">
									<image style="width: 34rpx;height: 34rpx;"
										src="../../static/images/transport/rili.png" mode="widthFix"></image>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item class="timeClass" prop="endTime" @click="changeEndTime">
							<view class="redCircle"></view>
							<text class="itemText">结束时间</text>
							<u-popup :show="endShow" mode="bottom">
								<view class="time-top">
									<text>选择时间</text>
									<u-button @tap="confirmEndTime" class="custom-style timeBtn">
										确认
									</u-button>
								</view>
								<view class="time-middle">
									<picker-view :indicator-style="indicatorStyle" :value="endValue"
										@change="bindEndChange" class="picker-view">
										<picker-view-column>
											<view class="item" v-for="(item,index) in columns" :key="index">{{item}}
											</view>
										</picker-view-column>
										<picker-view-column>
											<view class="item" v-for="(item,index) in columnData" :key="index">
												{{item}}
											</view>
										</picker-view-column>
									</picker-view>
									<view class="time-btn">
									</view>
								</view>
							</u-popup>
							<u-input disabled disabledColor="rgba(0,0,0,0)" class="inputStyle" v-model="form.endTime"
								placeholder="请选择运输结束时间">
								<template slot="suffix">
									<image style="width: 34rpx;height: 34rpx;"
										src="../../static/images/transport/rili.png" mode="widthFix"></image>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item prop="count">
							<view class="redCircleNo"></view>
							<text class="itemText">计划车辆</text>
							<u-input class="inputStyle" v-model="form.expectCar" placeholder="请输入计划使用车辆数" />
						</u-form-item>
					</u--form>
				</view>
			</view>
			<u-button @click="submit" shape="circle" class="custom-style2"
				color="linear-gradient(to top, #F59A02, #FFD334)">
				确认{{isEdit?'修改':'新增'}}
			</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getPath,
		addTransport,
		transportDetail,
		editTransport
	} from "@/api/company/transport.js"
	export default {
		data() {
			return {
				toast: '开始时间必须早于结束时间',
				startValue: [],
				endValue: [],
				indicatorStyle: 'width: 677rpx;height: 90rpx;background: rgba(30, 181, 255, 0.2);',
				startShow: false,
				endShow: false,
				dateShow: false,
				show: false,
				src: null,
				form: {
					transportName: null,
					date: null,
					startTime: null,
					endTime: null,
					// startDate: null,
					// endDate: null,
					expectCar: '',
					companyId: null,
					endPoint: '',
					startPoint: '',
					mtRoutePointList: [],
				},
				list: [],
				rules: {
					date: [{
						type: 'string',
						required: true,
						message: '请选择日期',
						trigger: ['blur', 'change']
					}, ],
					startTime: [{
						required: true,
						message: '请输入开始时间',
						trigger: ['blur', 'change']
					}, ],
					endTime: [{
						required: true,
						message: '请输入结束时间',
						trigger: ['blur', 'change']
					}, ],

				},
				isChecked: 0,
				columns: [],
				columnData: [],
				// 是否修改
				isEdit: false,
				startTime: null,
				endTime: null,
				// 开始和结束日期
				startDate: null,
				endDate: null,
				// 路线id
				routeId: null
			}
		},
		methods: {
			getImg() {
				let starUrl = 'http://139.215.216.44:9010//fileupload/2022/09/09/star_20220909141037A003.png';
				let endUrl = 'http://139.215.216.44:9010//fileupload/2022/09/09/end_20220909140719A002.png';
				let starMarkers = '116.37359,39.92437';
				let endMarkers = '116.37359,39.92446';
				let weight = '2'
				let color = '0x0000FF'
				let transparency = '1'
				let fillcolor = '0x0000FF'
				let fillTransparency = '0.2'
				let path = '116.31604,39.96491;116.320816,39.966606;116.321785,39.966827;116.32361,39.966957'
				let key = '401c5604ca1d2597b9906a1a30f29c44'
				return 'https://restapi.amap.com/v3/staticmap?markers=-1,' + starUrl +
					',0:' + starMarkers + '|-1,' + endUrl +
					',0:' + endMarkers + '&paths=' + weight + ',' + color + ',' + transparency + ',' + fillcolor + ',' +
					fillTransparency + ':' + path + '&key=' + key
			},
			// 补0方法
			prefixZero(n, m) {
				var _a = (Array(m).join(0) + n).slice(-m);
				return _a;
			},
			// 选择日期的方法
			getDate(val) {
				let arr = val.startDate.split('-')
				let newArr = []
				arr.forEach(item => {
					if (item.length < 2) {
						item = '0' + item
					}
					newArr.push(item)
				})
				let startDate = newArr.join('-')
				let endArr = val.endDate.split('-')
				let newEndArr = []
				endArr.forEach(item => {
					if (item.length < 2) {
						item = '0' + item
					}
					newEndArr.push(item)
				})
				let endDate = newEndArr.join('-')
				this.startDate = startDate
				this.endDate = endDate
			},
			// 关闭日期回调
			closeDate() {
				if (this.startDate && this.endDate) {
					this.form.date = this.startDate + '至' + this.endDate
				} else {
					this.form.data = ''
				}

				this.$refs.formRef.validateField('date')
				this.dateShow = false
			},
			// 关闭选择时间方法
			closeStartTime() {
				this.$refs.formRef.validateField('startTime')
				this.startShow = false
			},
			closeEndTime() {
				this.$refs.formRef.validateField('endTime')
				this.endShow = false
			},
			// 选择结束时间
			bindEndChange(e) {
				let startArr = e.target.value
				if (startArr.length === 1) {
					this.endTime = (Array(2).join("0") + startArr[0]).slice(-2) + ':00'
				} else if (startArr.length === 2 && !startArr[0]) {
					this.endTime = '00:' + (Array(2).join("0") + startArr[1]).slice(-2)
				} else {
					this.endTime = (Array(2).join("0") + startArr[0]).slice(-2) + ':' + (Array(2).join("0") +
						startArr[1]).slice(-2)
				}
			},
			// 选择开始时间
			bindStartChange: function(e) {
				console.log(e);
				let startArr = e.target.value
				if (startArr.length === 1) {
					this.startTime = (Array(2).join("0") + startArr[0]).slice(-2) + ':00'
				} else if (startArr.length === 2 && !startArr[0]) {
					this.startTime = '00:' + (Array(2).join("0") + startArr[1]).slice(-2)
				} else {
					this.startTime = (Array(2).join("0") + startArr[0]).slice(-2) + ':' + (Array(2).join("0") +
						startArr[1]).slice(-2)
				}
			},
			// 关闭选择时间的回调
			startClose() {
				this.$refs.formRef.validateField('startTime')
				this.startShow = false
			},
			endClose() {
				this.$refs.formRef.validateField('endTime')
				this.endShow = false
			},
			// 获得分钟的方法
			getMinunite() {
				let min = []
				let hour = []
				for (let i = 0; i <= 60; i++) {
					// min.push((Array(2).join(0) + i).slice(-2))
					this.columnData.push((Array(2).join(0) + i).slice(-2))
				}
				for (let m = 0; m <= 23; m++) {
					// hour.push((Array(2).join(0) + m).slice(-2))
					this.columns.push((Array(2).join(0) + m).slice(-2))
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirmStartImte() {
				if (this.startTime === null) {
					this.form.startTime = '00:00'
				} else {
					this.form.startTime = this.startTime
				}
				// let startTimeStr = e.value.join(',')
				// this.form.startTime = startTimeStr.replace(',', ':')
				this.startShow = false
			},
			confirmEndTime() {
				if (this.endTime === null) {
					this.form.endTime = '00:00'
				} else {
					this.form.endTime = this.endTime
				}
				// let startTimeStr = e.value.join(',')
				// this.form.endTime = startTimeStr.replace(',', ':')
				this.endShow = false
			},
			// 选择时间点击事件
			changeStartTime() {
				this.startTime = null
				this.form.startTime = null
				this.getMinunite()
				this.startShow = true
			},
			changeEndTime() {
				this.endTime = null
				this.form.endTime = null
				this.getMinunite()
				this.endShow = true
			},
			// 路线选择事件
			selectClick(item, index) {
				this.isChecked = index
				this.routeId = item.id
				console.log(this.routeId);
			},
			// 日期选择点击事件
			changeDate() {
				this.dateShow = true
			},
			// 确定日期后的回调
			confirmDate(e) {
				console.log(e);
				let dateStr = e[0] + '至' + e[e.length - 1]
				this.form.date = dateStr
				this.$refs.formRef.validateField('date')
				this.dateShow = false
			},
			/** 获取系统当前日期*/
			getNowDate() {
				const timeOne = new Date()
				const year = timeOne.getFullYear()
				let month = timeOne.getMonth() + 1
				let day = timeOne.getDate()
				month = month < 10 ? '0' + month : month
				day = day < 10 ? '0' + day : day
				const NOW_MONTHS_AGO = `${month}${day}`
				return NOW_MONTHS_AGO
			},
			// 提交
			submit() {
				this.$refs.formRef.validate().then(async res => {
					/*开始时间必须早于结束时间的判断方法*/
					let date = new Date();
					let a = this.form.startTime.split(":");
					let b = this.form.endTime.split(":");
					if (date.setHours(a[0], a[1]) >= date.setHours(b[0], b[1])) {
						this.$refs.uToast.show({
							type: 'error',
							message: '开始时间必须早于结束时间'
						})
						return false;
					} else {
						console.log('可以提交了');
						this.form.startTime = this.form.startTime + ':00'
						this.form.endTime = this.form.endTime + ':00'
						let hh = new Date().getHours();
						let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date()
							.getMinutes();
						this.form.transportName = this.$store.state.user.companyAbbreviation + "-" + this
							.getNowDate() +
							"-" + hh + mf;
						this.form.companyId = this.$store.state.user.companyId
						console.log(this.form.transportName);
						let obj = {
							...this.form,
							startDate: this.startDate,
							endDate: this.endDate,
							routeId: this.routeId
						}
						if (!this.isEdit) {
							// 添加申请
							console.log('新增form', this.form);
							const res = await addTransport(obj)
							console.log('新增', res);
							this.$tab.navigateTo('/pages/addTransportSucceed/index')
						} else {
							console.log('修改的obj', obj);
							const res = await editTransport(obj)
							console.log('修改成功', res);
							this.$tab.navigateTo('/pages/transport/index')
						}
					}
				})
			},
			// 获取路线列表
			async getPathList() {
				const res = await getPath()
				console.log('路线列表', res);
				this.routeId = res.data[0].id
				this.list = res.data
			},
			// 获取详情的方法
			async getDetail(id) {
				const res = await transportDetail(id)
				console.log('详情', res);
				this.form = res.data
				this.form.date = res.data.startDate + '至' + res.data.endDate
				this.form.startTime = res.data.startTime.slice(0, 5)
				this.form.endTime = res.data.endTime.slice(0, 5)
				console.log('form', this.form);
				this.routeId = res.data.routeId
				this.startDate = res.data.startDate
				this.endDate = res.data.endDate
				console.log(this.routeId);
				this.list.forEach((item, index) => {
					if (this.routeId === item.id) {
						this.isChecked = index
					}
				})
			}
		},
		onLoad(option) {
			this.form.companyId = this.$store.state.companyId
			this.getPathList()
			console.log(option);
			// state===-1是驳回
			if (option.state === '-1') {
				this.isEdit = true
				this.getDetail(option.id)
			} else {
				this.isEdit = false
			}

		}
	}
</script>

<style lang="scss" scoped>
	.start-green {
		width: 34rpx;
		height: 34rpx;
		background: #45AC77;
		border-radius: 50%;
		text-align: center;
		line-height: 34rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.bgRed {
		background: #FF6424;
	}

	.deepRed {
		color: #E54504
	}

	.deepGreen {
		color: #088243
	}

	.mb33 {
		margin-bottom: 33rpx;
	}

	.bg-color-red {
		background: #FB5637 !important;
	}



	.addLineSuccess-big-box {
		// padding: 36rpx;

		.addLineSuccess-big-box-top {
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
		}

		.addLineSuccess-big-box-bottom {
			padding: 0rpx 39rpx 39rpx;
			background: rgba(255, 255, 255, 0.74);
			border-radius: 0 0 28rpx 28rpx;
		}
	}

	.choose-line-middle {
		padding: 0rpx 39rpx;
		box-sizing: border-box;
	}

	.addLineSuccess-big-box-bottom-item {
		display: flex;
		margin: 36rpx auto 31rpx;
	}

	.map {
		// width: 599rpx;
		height: 339rpx;
		background: #FFFFFF;
		border: 2rpx solid #495B93;
		border-radius: 15rpx;
		margin: 25rpx auto 40rpx;
	}


	/deep/.u-form-item__body__right__content__slot .u-popup {
		flex: 0;
	}

	/deep/.u-form-item:nth-child(1) .u-form-item__body {
		padding-top: 0 !important;
	}

	.mt41 {
		margin-top: 41rpx;
	}

	.mt33 {
		margin-top: 33rpx;
	}

	.active-img {
		width: 70rpx;
		height: 70rpx;
		margin-right: 15rpx;
		position: absolute;
		right: 0;
	}

	.active {
		background: rgba(255, 255, 255, 0.9);
	}

	.not-active {
		background: rgba(245, 246, 250, 0.5);
	}

	.red {
		color: #FF6424;
	}

	.green {
		color: #45AC77;
	}

	.circle-green {
		width: 14rpx;
		height: 14rpx;
		background: #45AC77;
		border-radius: 50%;
	}

	.choose-line {
		.choose-line-top {
			padding: 0 33rpx;
			display: flex;
			align-items: center;
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0px 0px;
		}

		.choose-line-bottom {
			// height: 504rpx;
			height: 40vh;
			overflow: hidden;
			overflow-y: auto;
			padding: 20rpx 39rpx 14rpx 39rpx;
			box-sizing: border-box;

			.small-box-middle {
				position: relative;
				margin-bottom: 27rpx;

				border: 1rpx solid #EBEBEB;
				border-radius: 20rpx;
				padding: 20rpx 28rpx;
				box-sizing: border-box;

				.small-box-middle-startAndEnd {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: bold;

					uni-text {
						margin-left: 22rpx;
					}
				}

				.small-box-middle-line {
					display: flex;
					justify-content: start;
					align-items: center;
					margin-left: 11rpx;

					.small-box-middle-line-left {
						width: 2rpx;
						height: 26rpx;
						background: #eeeeee;
						border-radius: 1rpx;
						margin: 6rpx 7rpx;
					}

					.small-box-middle-line-right {
						width: 439rpx;
						height: 1rpx;
						background: #eeeeee;
						margin-left: 15rpx;
					}
				}
			}
		}
	}

	.custom-style {
		box-shadow: 0px 2rpx 13rpx 0rpx rgba(27, 43, 95, 0.25);
		border-radius: 23rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 33rpx 0 44rpx;
	}

	.custom-style2 {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 33rpx 0 44rpx;
	}




	.overflowY-hidden {
		overflow-y: hidden !important;
	}



	.height-auto {
		height: auto !important;
	}

	.border-orange {
		border: 2rpx dashed #F98803;
		margin: 0 auto;
	}

	/deep/.u-form-item__body__right__content__slot .u-popup {
		flex: 0;
	}

	/deep/.u-form-item:nth-child(1) .u-form-item__body {
		padding-top: 0 !important;
	}

	// 日期样式
	.dateClass {
		color: #fffff !important;

		/deep/ .u-popup__content {
			border-top-left-radius: 33rpx;
			border-top-right-radius: 33rpx;
			background: rgba(255, 255, 255, 0.85);
			box-shadow: 0rpx 0rpx 5rpx 3rpx rgba(109, 160, 251, 0.6);
		}
	}


	.dateClass {
		/deep/.u-calendar-header__title {
			background-color: #7FB5FF;
			border-top-left-radius: 33rpx;
			border-top-right-radius: 33rpx;
			text-align: left;
			color: #ffffff;

			span {
				margin-left: 40rpx;
				font-size: 28rpx;
			}
		}
	}


	.dateClass {
		/deep/.u-popup__content__close--top-right {
			uni-view {
				uni-text {
					// color: #7FB5FF !important;
					font-size: 24rpx !important;

					span {
						// margin-right: 16rpx;
						position: absolute;
						right: 16rpx;
						top: 0rpx;
						z-index: 99;

						&::after {
							content: '';
							display: block;
							background-color: #ffffff;
							position: absolute;
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							top: -8rpx;
							right: -4rpx;
							z-index: -1;
						}
					}
				}
			}
		}
	}

	// 时间样式
	.timeClass {
		/deep/.u-popup__content {
			background: rgba(255, 255, 255, 0.7);
			border-radius: 33rpx 33rpx 0 0;
		}
	}

	.time-top {
		height: 80rpx;
		background: #7FB5FF;
		border-radius: 33rpx 33rpx 0px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		uni-text {
			margin-left: 37rpx;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
		}

		uni-image {
			margin-right: 37rpx;
		}
	}

	.picker-view {
		width: 750rpx;
		height: 460rpx;
		margin-top: 40rpx;
	}

	.item {
		height: 86rpx;
		font-weight: bold;
		// align-items: center;
		// justify-content: center;
		text-align: center;
		// margin-top: ;
	}

	.time-middle {
		background: rgba(255, 255, 255, 0.4);
	}

	/deep/.uni-picker-view-mask {
		background: transparent !important;
		z-index: 0;
		// background-color: rgba(255, 255, 255, 0.6) !important;
	}

	.time-btn .u-button {
		width: 677rpx;
		text-align: center;
		margin: 0 auto 44rpx;
	}

	/deep/.uni-picker-view-indicator {
		background: rgba(127, 181, 255, 0.6) !important;
		top: 44%;
		// z-index: -1; 


	}

	/deep/ uni-picker-view-column:nth-child(1) {
		.uni-picker-view-indicator {
			width: 400rpx !important;
			border-radius: 33rpx 0 0 33rpx;
			left: 37rpx;

			&::before {
				border: none;
			}

			&::after {
				border: none;
			}
		}
	}

	/deep/ uni-picker-view-column:nth-child(2) {
		.uni-picker-view-indicator {
			width: 342rpx !important;
			border-radius: 0rpx 33rpx 33rpx 0rpx;

			// right: 37rpx;
			&::before {
				border: none;
			}

			&::after {
				border: none;
			}
		}
	}

	/deep/.u-calendar-month__days__day {
		font-weight: bold;
	}

	/deep/.u-calendar-month__days__day__select__info--disabled {
		color: rgba(102, 102, 102, 1);
	}

	/deep/.u-calendar-month__days .u-calendar-month__days__day:nth-child(1) {
		margin-left: 320rpx !important;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	.timeBtn {
		width: 99rpx;
		height: 45rpx;
		font-size: 24rpx !important;
		background: linear-gradient(0deg, #F59A02 0%, #FFD334 100%);
		border: none;
		margin: 0 29rpx;
	}
</style>
