<template>
	<div class="addIllegalRoad">
		<headNav
			:title="'违法占道'"
			RText="记录"
			@addRoad="goRecord"
		></headNav>

		<div class="container">
			<div class="timeInfo">
				<div>时间</div>
				<div>{{ this.$getTime(new Date()) }}</div>
			</div>

			<!-- 车辆信息 -->
			<div class="IllegalCarInfo">
				<div class="carContent">
					<div class="carContentItem">
						<div class="label">车辆型号</div>
						<div class="content FontColorInfo selectItem" @click="showSelect_car = true">
							<div class="FontColorNormal mr10">{{ select_car_show }}</div>
							<div class="df aic FontColorNormal"><van-icon name="arrow" /></div>
						</div>
					</div>
					<div class="carContentItem">
						<div class="label">车牌号</div>
						<div>
							<!-- right-icon="scan" -->
							<van-field
								v-model="submitForm.licensePlateNum"
								disabled
								input-align="right"
								placeholder="输入车牌信息"
								@click="openlicensePlateNum"
							/>
						</div>
					</div>
					<div class="carContentItem">
						<div class="label">车牌属性</div>
						<div class="content FontColorInfo">
							<van-field
								v-model="submitForm.licensePlateAtt"
								:disabled="inputDisabled_flag"
								placeholder="车牌属性"
								input-align="right"
							></van-field>
						</div>
					</div>
					<div class="carContentItem">
						<div class="label">车主姓名</div>
						<div class="content FontColorInfo">
							<van-field
								v-model="submitForm.vehicleOwnerName"
								:disabled="inputDisabled"
								placeholder="车主姓名"
								input-align="right"
							></van-field>
						</div>
					</div>
					<div class="carContentItem">
						<div class="label">联系方式</div>
						<div class="content FontColorInfo">
							<van-field
								v-model="submitForm.vehicleOwnerPhone"
								:disabled="inputDisabled"
								placeholder="联系方式"
								input-align="right"
								@blur="inputBlur"
							></van-field>
						</div>
					</div>
				</div>
			</div>

			<!-- 详情信息 -->
			<div class="detailInfo">
				<div class="detailContent">
					<div class="detailContentItem">
						<div class="label">违停类型</div>
						<div class="selectItem" @click="showSelect = true">
							<div class="FontColorNormal mr10">{{ submitForm.illegalStopTypes }}</div>
							<div class="df aic FontColorNormal"><van-icon name="arrow" /></div>
						</div>
					</div>
					<div class="detailContentItem loc-item" @click="showPickerMap">
						<van-field
							v-model="submitForm.inspectionLocation"
							label="检查地点"
							readonly
							right-icon="location"
							input-align="right"
							placeholder="获取修改准确检查点"
						/>
						<!-- <div class="label">检查地点</div>
						<div @click="showPickerMap">
							<van-field
								v-model="inspectionLocation"
								class="locationSelect"
								placeholder="获取修改准确检查点"
								input-align="right"
							>
								<template #right-icon>
									<van-icon name="location"></van-icon>
								</template>
							</van-field>
						</div> -->
					</div>
					<div class="detailContentItem">
						<div class="label">具体地点</div>
						<div>
							<van-field
								v-model="submitForm.specificLocation"
								class="locationSelect"
								placeholder="填写具体地点"
								input-align="right"
							></van-field>
						</div>
					</div>
					<div class="detailContentItem shotImg">
						<div class="label">检查拍照</div>
						<div class="imgItem">
							<!--  -->
							<!-- :before-read="beforeAvatarUpload" -->
							<van-uploader v-model="imgFile" :before-read="beforeAvatarUpload" :after-read="afterRead" :max-count="9" multiple  capture="camera" accept="image/*;" />
						</div>
						<div class="imgTips">
							在拍照取证过程中，应对消防车通道警示标识标牌、集中划线区包含在照片中，并能清晰的看清车辆车牌号。
						</div>
					</div>
					<div class="detailContentItem">
						<div class="label">检查时间</div>
						<div class="content FontColorInfo">{{ submitForm.inspectionTime }}</div>
					</div>
					<div class="detailContentItem">
						<div class="label">检查人员</div>
						<div class="content FontColorInfo">{{ submitForm.inspectionPerson }}</div>
					</div>
				</div>
			</div>

			<div class="sureBtn"><van-button type="primary" @click="sureBtn">确 定</van-button></div>
			<div class="line-space"></div>
		</div>

		<!-- 车牌弹窗 -->
		<van-popup
			v-model="showCarCard"
			position="bottom"
			closeable
			close-icon="close"
			style="height: 100%;"
		>
			<keyword v-if="showCarCard" @getPlateLicense="getPlateLicense"></keyword>
		</van-popup>

		<!-- 违停弹窗 -->
		<van-popup v-model="showSelect" position="bottom">
			<van-picker
				show-toolbar
				title="违停类型"
				:columns="missionSelect"
				@cancel="showSelect = false"
				@confirm="sureSelect"
			/>
		</van-popup>

		<!-- 车型弹窗 -->
		<van-popup v-model="showSelect_car" position="bottom">
			<van-picker
				show-toolbar
				title="选择车型"
				:columns="carTypeSelect"
				@cancel="showSelect_car = false"
				@confirm="sureSelect_car"
			/>
		</van-popup>

		<!-- 弹出地图展示 -->
		<!-- <van-popup v-model="showMap" position="bottom" :style="{ height: '500px' }">
			<div class="mappopContainer">
				<div class="searchInput">
					<van-field v-model="location" center clearable placeholder="请输入地址" />
					<van-button type="info" @click="sureLocation">确定</van-button>
				</div>
				<baidu-map
					class="bm-view"
					:pinch-to-zoom="true"
					@ready="onReady"
					:center="center"
					:zoom="zoom"
				>
					<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
					<bm-geolocation
						anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
						:showAddressBar="true"
						:autoLocation="true"
						@locationSuccess="locationSuccess"
					></bm-geolocation>
					<bm-marker :position="{ lng: centerLng, lat: centerLat }"></bm-marker>
				</baidu-map>
			</div>
		</van-popup> -->

		<div>{{ xy }}</div>
		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import keyword from '@/components/keyword.vue';
import { get, post, postImg } from '@/utils/http.js';
import mask_overLay from '@/components/overLay_xy.vue';
import { compressAccurately } from "image-conversion";
import Bus from '@/bus';
import { notEmpty } from '@/utils/tool';

export default {
	name: 'addIllegalRoad',
	inject: ['reload'],
	data() {
		return {
			showCarCard: false,
			showMap: false,
			showOverLay: false,
			imgFile: [],
			camera: 'camera',
			showSelect: false,
			showSelect_car: false,
			select_car_show: '请选择',
			missionSelect: ['占用消防车通道'],
			carTypeSelect: [
				'大型汽车',
				'小型汽车',
				'普通摩托车',
				'轻便摩托车',
				'低速车',
				'拖拉机',
				'挂车',
				'教练汽车',
				'教练摩托车',
				'试验汽车',
				'试验摩托车',
				'警用汽车',
				'警用摩托',
				'原农机号牌',
				'香港入出镜车',
				'澳门入出境车',
				'大型新能源汽车',
				'小型新能源汽车'
			],
			submitForm: {
				licensePlateNum: '',
				licensePlateAtt: '',
				vehicleModel: '',
				vehicleOwnerName: '',
				vehicleOwnerPhone: '',
				illegalStopTypes: '占用消防车通道',
				inspectionLocation: '',
				specificLocation: '',
				inspectionPhones: '',
				inspectionTime: this.$getTime(new Date()),
				inspectionPerson: '',
				institutionalUnit: '',
				id: ''
			},
			centerLng: '',
			centerLat: '',
			location: '',
			center: '重庆市',
			zoom: 10,
			getLocation: '',
			tipMsg: '',
			inputDisabled: true,
			inputDisabled_flag: true,
			xy: ''
		};
	},
	components: {
		headNav,
		keyword,
		'v-mask': mask_overLay
	},
	mounted() {
		this.init();
	},
	beforeRouteEnter: (to, from, next) => {
		to.meta.keepAlive = true;
		if (from.name === 'carList') {
			next(vm => {
				vm.reload();
			});
		} else {
			next();
		}
	},
	methods: {
		init() {
			this.getUserInfoApi();
		},
		getUserInfoApi() {
			get('/v1/api/illegalOcc/getUserName').then(res => {
				this.submitForm.inspectionPerson = res.data.userName;
				this.submitForm.institutionalUnit = res.data.orgName;
			});
		},
		showPickerMap() {
			this.$router.push('/pickPlace');
			const vm = this;
			Bus.$on('changePosition', data => {
				if (data) {
					vm.location = data.address;
					vm.center = data.addressComponent && data.addressComponent.city;
					vm.centerLng = data.point.lng;
					vm.centerLat = data.point.lat;
					vm.submitForm.inspectionLocation = data.address;
					vm.submitForm.specificLocation = data.address;
					vm.sureLocation();
				}
			})
		},

		// 后退
		// backPage() {
		// 	exitCurrentUi();
		// },

		// 新增占道
		goRecord() {
			this.$router.push('/carList');
		},

		// 确定选择
		sureSelect(value) {
			this.submitForm.illegalStopTypes = value;
			this.showSelect = false;
		},

		// 确定选择_car
		sureSelect_car(value) {
			switch (value) {
				case '大型汽车':
					this.submitForm.vehicleModel = '01';
					break;
				case '小型汽车':
					this.submitForm.vehicleModel = '02';
					break;
				case '普通摩托车':
					this.submitForm.vehicleModel = '07';
					break;
				case '轻便摩托车':
					this.submitForm.vehicleModel = '08';
					break;
				case '低速车':
					this.submitForm.vehicleModel = '13';
					break;
				case '拖拉机':
					this.submitForm.vehicleModel = '14';
					break;
				case '挂车':
					this.submitForm.vehicleModel = '15';
					break;
				case '教练汽车':
					this.submitForm.vehicleModel = '16';
					break;
				case '教练摩托车':
					this.submitForm.vehicleModel = '17';
					break;
				case '试验汽车':
					this.submitForm.vehicleModel = '18';
					break;
				case '试验摩托车':
					this.submitForm.vehicleModel = '19';
					break;
				case '警用汽车':
					this.submitForm.vehicleModel = '23';
					break;
				case '警用摩托':
					this.submitForm.vehicleModel = '24';
					break;
				case '原农机号牌':
					this.submitForm.vehicleModel = '25';
					break;
				case '香港入出镜车':
					this.submitForm.vehicleModel = '26';
					break;
				case '澳门入出境车':
					this.submitForm.vehicleModel = '27';
					break;
				case '大型新能源汽车':
					this.submitForm.vehicleModel = '51';
					break;
				case '小型新能源汽车':
					this.submitForm.vehicleModel = '52';
					break;
			}

			this.select_car_show = value;
			this.showSelect_car = false;
		},

		// 打开车牌填写
		openlicensePlateNum() {
			if (this.submitForm.vehicleModel) {
				this.showCarCard = true;
			} else {
				this.$toast.fail('请先选择车型');
			}
		},

		// input离开焦点
		inputBlur() {
			if (!/^1[3-9]\d{9}$/.test(this.submitForm.vehicleOwnerPhone)) {
				this.$toast.fail('请输入正确手机号');
				this.submitForm.vehicleOwnerPhone = '';
			} else {
			}
		},

		// 地图加载
		onReady(mapObj) {
			let that = this;
			let BMap = mapObj.BMap;
			let map = new BMap.Map('allmap');

			this.tipMsg = '定位中';
			this.showOverLay = true;

			let geolocation = new BMap.Geolocation(); // 定位到当前位置

			// 开启辅助定位
			geolocation.enableSDKLocation();

			geolocation.getCurrentPosition(function(r) {
				that.showOverLay = false;

				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					let cityStr = '';
					cityStr = r.address.city + r.address.street + r.address.street_number;
					that.location = cityStr;
					that.center = cityStr;
					that.centerLng = r.point.lng;
					that.centerLat = r.point.lat;
				} else {
					that.$toast.fail('定位失败');
				}
			});
		},

		// 定位成功
		locationSuccess(point) {
			const address =
				point.addressComponent.city +
				point.addressComponent.street +
				point.addressComponent.streetNumber;
			this.location = address;
		},

		// 获取车牌号
		async getPlateLicense(plateLicense) {
			this.submitForm.licensePlateNum = plateLicense; //  拿到车牌号
			this.showCarCard = false;

			this.showOverLay = true;

			this.inputDisabled_flag = false;
			this.submitForm.licensePlateAtt = '';

			let _licensePlate = this.submitForm.licensePlateNum;
			_licensePlate = _licensePlate.split('');
			_licensePlate.splice(0, 1);
			_licensePlate = _licensePlate.join('');

			this.tipMsg = '查询车主信息中';
			const host = process.env.VUE_APP_API;
			post(
				// 'http://dam.cq119.gov.cn:9528/admin-ht/api/esb/call/1/北京中软国际信息技术有限公司/1618211079942',
				// 'http://183.66.101.90:8083/admin-ht/api/esb/call/1/北京中软国际信息技术有限公司/1618211079942',
				// 'http://183.66.101.90:10023/v2/api/data-sync',
				'/v2/api/data-sync',
				{
					search: `[{\"HPZL.eq\":\"${
						this.submitForm.vehicleModel
					}\"},{\"and.HPHM.eq\":\"${_licensePlate}\"}]`,
					pageSize: 1,
					pageNum: 1
				}
			)
				.then(res => {
					if (res.result.result.length === 0) {
						this.$toast.fail('未查询到该车牌所属车主信息');
						this.submitForm.vehicleOwnerName = '';
						this.submitForm.vehicleOwnerPhone = '';
					} else {
						const obj = res.result.result[0];
						if (obj && notEmpty(obj.SYR)) {
							this.$toast.success('查询成功');
							this.submitForm.vehicleOwnerName = obj.SYR;
							this.submitForm.vehicleOwnerPhone = obj.SJHM;
						}
						else {
							const msg = obj && obj.ZSXXDZ || '查询无结果';
							this.$toast.fail(msg);
						}
					}
					this.showOverLay = false;
					this.inputDisabled = false;
				})
				.catch(err => {
					this.showOverLay = false;
					this.$toast.fail('查询失败');
					this.inputDisabled = false;
					this.submitForm.vehicleOwnerName = '';
					this.submitForm.vehicleOwnerPhone = '';
				});
		},

		// 确定保存选中的地址
		sureLocation() {
			if (this.location === '' || this.location.trim() === '') {
				this.$toast.fail('未获取到详细地址');
			} else {
				this.submitForm.inspectionLocation = this.location;
				this.showMap = false;
			}
		},

		//上传图片前压缩
		beforeAvatarUpload(file) {
			console.log('beforeAvatarUpload file: ', file);
			const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
			if (!isJpgOrPng) {
				this.$toast.fail("图片只能是 JPG 或 PNG 格式!");
				return false;
			}
			this.showOverLay = true;
			this.tipMsg = '图片处理中';
			return new Promise((resolve) => {
				compressAccurately(file, {
					size: 100, //图片大小压缩到100kb
					width: 1280, //宽度压缩到1280
				})
				.then((res) => {
					this.showOverLay = false;
					// const file = new File([res], new Date().getTime() + '.jpg');
					// console.log('beforeAvatarUpload res: ', file);
					resolve(res);
				});
			});
		},
		afterRead(file) {
			console.log('afterRead: ', file);
			if (file && file.file && file.file.size > 2000000) {
				// 创建Canvas对象(画布)
				let canvas = document.createElement('canvas');
				// 获取对应的CanvasRenderingContext2D对象(画笔)
				let context = canvas.getContext('2d');
				// 创建新的图片对象
				let img = new Image();
				// 指定图片的DataURL(图片的base64编码数据)
				img.src = file.content;

				img.onload = () => {
					// 监听浏览器加载图片完成，然后进行进行绘制

					// 指定canvas画布大小，该大小为最后生成图片的大小
					canvas.width = img.width;
					canvas.height = img.height;
					/* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
					        如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
					context.drawImage(img, 0, 0, img.width, img.height);
					// 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
					let base_img = canvas.toDataURL(file.file.type, 0.75);
					const blodBin = atob(base_img.split(',')[1]);
					let data = [];
					for (let i = 0; i < blodBin.length; i++) {
						data.push(blodBin.charCodeAt(i));
					}
					let blob1 = new Blob([new Uint8Array(data)], { type: 'image/jpeg' });
					let file1 = new File([blob1], new Date().getTime() + '.jpg');
					file.file = file1;
				};
			}
		},


		// 确认新增
		sureBtn() {
			if (this.submitForm.vehicleModel === '') {
				this.$toast.fail('至少选择一个车型');
				return;
			} else if (this.submitForm.licensePlateNum === '') {
				this.$toast.fail('车牌号不能为空');
				return;
			} else if (this.submitForm.vehicleOwnerName === '') {
				this.$toast.fail('未输入车主姓名');
				return;
			} else if (this.submitForm.vehicleOwnerPhone === '') {
				this.$toast.fail('未输入车主电话');
				return;
			} else if (this.submitForm.inspectionLocation === '') {
				this.$toast.fail('至少选择一个地址信息');
				return;
			} else if (this.submitForm.illegalStopTypes === '') {
				this.$toast.fail('至少选择一个违停类型');
				return;
			} else if (this.submitForm.specificLocation === '') {
				this.$toast.fail('至少填写一个具体地址');
				return;
			} else if (this.imgFile.length < 4) {
				this.$toast.fail('至少拍照四张');
				return;
			} else {
				this.showOverLay = true;
				this.tipMsg = '上传图片中';
				let formData = new FormData();
				let count = 0;
				let name = '';
				this.imgFile.map(item => {
					name = Date.now() + `${count}.jpeg`;
					const file = new File([item.file], name);
					count++;
					formData.append('file', file);
				});
				formData.append('imageType', '0');

				// const vm = this;
				postImg('/v1/api/uploadImgs/illegalOccUploadImg', formData).then(res => {
					this.submitForm.inspectionTime = new Date();
					this.submitForm.id = res[0];
					const formId = res[0];

					this.tipMsg = '提交数据中';
					post('/v1/api/illegalOcc/newIllegalRoadOccupation', this.submitForm).then(res => {
						if (res.msg == '操作成功') {
							let content = `【${this.submitForm.institutionalUnit}】您的${
								this.submitForm.licensePlateNum
							}于${this.$getTime(this.submitForm.inspectionTime)}停放在${
								this.submitForm.inspectionLocation
							}${
								this.submitForm.specificLocation
							}消防车通道，该行为涉嫌违反了《中华人民共和国消防法》第六十条之规定，请于尽快驶离。（按照《行政处罚法规定》，5分钟内驶离的，属于违法行为轻微，依法可以不予行政处罚。）`;

							this.tipMsg = '发送短信中';

							get('/v1/api/illegalOcc/sendSmsMessage', {
								phone: this.submitForm.vehicleOwnerPhone,
								smsType: '0',
								id: formId
							})
								.then(res => {
									if (res.msg === '操作成功') {
										this.$toast.success('已发送');
										this.showOverLay = false;
										this.imgFile = [];
										this.submitForm = {};
										this.$router.replace(`/behaviorNotice/1/${formId}`);
									} else {
										this.$toast.fail('短信发送失败');
										this.showOverLay = false;
										this.$router.push(`/behaviorNotice/1/${formId}`);
									}
								})
								.catch(err => {
									if (err) {
										this.$toast.fail('短信发送失败');
										this.showOverLay = false;
										this.$router.push(`/behaviorNotice/1/${formId}`);
									}
								});
						}
					});
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.addIllegalRoad {
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		background-color: #F5F5F5;
	}
	
	.timeInfo {
		font-size: 14px;
		height: 34px;
		min-height: 34px;
		padding: 8px 15px;
		color: #323233;
		background-color: #fff;
		margin-top: 57px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.IllegalCarInfo {
		margin-top: 10px;

		.carContent {
			font-size: 14px;
			background-color: #fff;
			padding: 15px 0;

			.carContentItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 8px 15px;

				.content {
					display: flex;
					align-items: center;
				}
			}
		}
	}

	.selectItem {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		margin-top: 2px;
	}

	.detailInfo {
		margin-top: 10px;

		.detailContent {
			font-size: 14px;
			background-color: #fff;
			padding: 15px 0;

			.detailContentItem {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 8px 15px;

				.typeSelect {
					width: 225px;
					height: 32px;
					padding: 0 10px;
					color: #b0b1b3;
					border: none;
					outline: none;
					appearance: none;
					background-color: #eee;
				}

				.locationSelect {
					width: 225px;
				}
			}

			.shotImg.detailContentItem {
				display: block;

				.label {
					margin-bottom: 10px;
					color: #666;
				}

				.imgTips {
					color: #bcbcbc;
					font-size: 12px;
					margin-top: 5px;
					line-height: 18px;
				}
			}
		}
	}

	.headTip {
		font-size: 12px;
		padding-left: 15px;
		margin-bottom: 10px;
	}

	.label {
		width: 80px;
		text-align: left;
		color: #666;
	}

	.mappopContainer {
		display: flex;
		flex-direction: column;
	}

	.searchInput {
		flex: 1;
		display: flex;
		align-items: center;
		padding: 20px 10px;
		justify-content: space-between;

		button {
			height: 30px;
			display: flex;
		}
	}
}
</style>

<style lang="scss">
.addIllegalRoad {
	.BMap_mask {
		border-top: 1px solid #cecece;
	}

	.van-nav-bar__text {
		font-size: 14px;
	}

	.van-cell.van-field {
		padding: 3px 0px;
		// border: 1px solid #9c9c9c;
		// width: 225px;
		width: 100%;
		text-align: right;
	}

	.van-field__right-icon {
		color: #0000ff;
	}

	.imgItem {
		display: flex;
		justify-content: flex-start;
		// flex-wrap: nowrap;

		.van-uploader__wrapper {
			display: flex;
			justify-content: flex-start;
			// flex-wrap: nowrap;
		}
	}

	.sureBtn {
		display: flex;
		justify-content: center;
		margin: 20px;
		// padding-top: 20px;
		// width: 100%;
		background-color: #fff;
		// padding-bottom: 20px;

		.van-button.van-button--primary {
			width: 100%;
			background-color: #0066ff;
			border: none;
		}
	}

	.line-space {
		width: 100%;
		height: 50px;
		min-height: 50px;
	}

	// 车牌
	.keyboard-wrap {
		// height: 200px;
		overflow: hidden;
		overflow-y: auto;
		// border: 1px solid #333;

		span {
			font-size: 14px;
		}
	}

	.wrap {
		span {
			font-size: 14px;
		}
	}

	.van-tabs__line {
		width: 60px;
	}

	.loc-item {
		.van-icon {
			color: #0066cc;
		}
	}	

	.van-uploader__upload {
		background-color: #fff;
		border: 1px solid #e2e2e2;
		width: 75px;
		height: 75px;

		.van-icon.van-icon-photograph.van-uploader__upload-icon {
			color: #c8c8c8;
		}
	}

	.van-uploader__preview {
		width: 75px;
		height: 75px;

		.van-image {
			width: 100%;
			height: 100%;
		}
	}

	.van-cell.van-field {
		border: none;
	}

	.bm-view {
		width: 100%;
		height: 420px;
	}

	.bm-view {
		a {
			display: none;
		}
	}

	.content {
		.van-field {
			padding: 0;
		}
	}

	.van-icon.van-icon-arrow {
		color: #666;
	}

	.van-cell.van-cell--center.van-field {
		padding: 5px 10px;
		border-bottom: 1px solid #0066cc;
	}

	.van-popup.van-popup--bottom {
		z-index: 999 !important;
	}
}

.van-toast.van-toast--middle.van-toast--success {
	color: #00d064;
	width: 50%;
}

.van-toast.van-toast--middle.van-toast--fail {
	color: #55ffff;
	width: 50%;
}
</style>
