<template>
	<view class="map" :style="getHeight()">
		<!-- <page-head title="待排查任务" :warnNum='1' :isFixed="true" :isRight="true"></page-head> -->
		<!-- 轮播图 -->
		<map id="maps" style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers"
			:polyline="polyline" @mousedown="onMapTap">
		</map>
		<cover-view class="location" @click="getLocationInfo" :style="getTop()">
			<cover-image src="../../static/map/3746.png" alt="" srcset="" />
		</cover-view>
		<view class="dialog dialog-one" v-if="pageType == 1">
			<view class="status" v-if="pageType1Result.deadlineType == 1">超期</view>
			<view class="status" v-if="pageType1Result.deadlineType == 2">延期</view>
			<!-- <view class="status" v-if="pageType1Result.deadlineType == 3">正常</view> -->
			<view class="top">
				<image src="/static/logo.png" mode="" style="width: 120px; height: 90px" class="mimg"></image>
				<view class="font">
					<view class="tit">{{ pageType1Result.name }}</view>
					<view class="desc">
						<view style="margin-right: 12px">排查</view>
						<view>{{ pageType1Result.deadlineStatus }}</view>
					</view>
				</view>
			</view>
			<view class="btn-box">
				<view @click="handleCheck(1)" class="btn btn1" v-show="type!='view'"> 智能排查 </view>
				<view @click="handleCheck2" class="btn btn2" v-show="type!='view'"> 人工排查 </view>
				<view @click="handleCheck(2)" class="btn btn8" v-show="type=='view'"> 查看排查详情 </view>
			</view>
		</view>
		<view class="dialog dialog-two" v-if="pageType == 2">
			<view class="two-f1">根据当前定位信息，您要排查的是这条路吗？</view>
			<view class="two-f2">{{ rname }}</view>
			<view class="btn-box">
				<view @click="onJump(3)" class="btn btn3" v-show="type!='view'"> 更换 </view>
				<view @click="handleCheck(1)" class="btn btn4" v-show="type!='view'"> 智能排查 </view>
				<view @click="handleCheck2" class="btn btn5" v-show="type!='view'"> 人工排查 </view>
				<view @click="handleCheck(2)" class="btn btn8" v-show="type=='view'"> 查看排查详情 </view>
			</view>
		</view>
		<view class="dialog dialog-three" v-if="pageType == 3">
			<view class="search">
				<view class="searchL">
					<image src="/static/map/search.png" alt="" />
					<input v-model="search" class="sinput" placeholder-style="color: #BFBFBF;" placeholder="搜索路段或路口"
						type="text" confirm-type="search" @confirm="confirm" />
				</view>
				<view @click="onJump(4)" class="addbtn"> 新增 </view>
			</view>
			<scroll-view :scroll-top="0" scroll-y="true" class="list-box">
				<view class="list-item" v-for="(item, index) in data" :key="index" @click="onList(item, index)"
					:style="idx == index ? 'background: #E5EFFF' : ''">
					<image src="/static/task/3811.png" alt="" v-if="item.type == 1" />
					<image src="/static/task/3806.png" alt="" v-else />
					<view class="tit">
						{{ item.name }}
					</view>
					<view class="jl">{{ item.distance }}m内</view>
				</view>
				<view></view>
			</scroll-view>
		</view>
		<view class="dialog dialog-four" v-if="pageType == 4">
			<view class="form-item">
				<view class="form-label">对象</view>
				<view class="form-sw">
					<view :style="ftype == 1 ? 'background: #2663bf; color: #fff;' : ''" @click="ftype = '1'">路段</view>
					<view :style="ftype == 2 ? 'background: #2663bf; color: #fff;' : ''" @click="ftype = '2'">路口</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">道路名称</view>
				<view class="form-tent">
					<input class="linput" v-model="name1" placeholder-style="color: #BFBFBF;" placeholder="请输入" />
				</view>
			</view>
			<view class="form-item" v-if="ftype == 1">
				<view class="form-label">起始路口</view>
				<view class="form-tent">
					<input class="linput" v-model="name2" placeholder-style="color: #BFBFBF;" placeholder="请输入" />
				</view>
			</view>
			<view class="form-item" v-if="ftype == 1">
				<view class="form-label">终止路口</view>
				<view class="form-tent">
					<input class="linput" v-model="name3" placeholder-style="color: #BFBFBF;" placeholder="请输入" />
				</view>
			</view>
			<view class="form-item" v-if="ftype == 2">
				<view class="form-label">路口名称</view>
				<view class="form-tent">
					<input class="linput" v-model="name4" placeholder-style="color: #BFBFBF;" placeholder="请输入" />
				</view>
			</view>
			<view class="btn-box" :style="ftype == 1 ? 'margin-top: 18px' : 'margin-top: 80px'">
				<view @click="onJump(3)" class="btn btn6"> 取消 </view>
				<view @click="handleSubmit" class="btn btn7"> 确定 </view>
			</view>
		</view>

		<cover-view class="umodal" v-show="show">
			<cover-view class="umodal-box">
				<cover-view class="umodal-content"> 新增成功</cover-view>
				<cover-view class="umodal-line1"></cover-view>
				<cover-view class="umodal-btnbox">
					<cover-view class="umodal-btn" @click="handleCheck2">
						人工排查
					</cover-view>
					<cover-view class="umodal-line2"></cover-view>
					<cover-view class="umodal-btn" @click="handleCheck(1)">
						智能排查
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
		<cover-view class="umodal" v-show="show2">
			<cover-view class="umodal-box" style="height: 280rpx;">
				<cover-view class="umodal-content"
					style="padding: 12px 0 0 22px;box-sizing: border-box; height: 180rpx;">
					<cover-view style="height: 40rpx; margin-top: 2px;">您将进入人工排查，智能排查数据将自动转入</cover-view>
					<cover-view style="height: 40rpx;">人工排查结果，但无法再次转回智能排查。</cover-view>
					<cover-view style="height: 40rpx;">是否继续，请确认？</cover-view>

				</cover-view>
				<cover-view class="umodal-line1"></cover-view>
				<cover-view class="umodal-btnbox">
					<cover-view class="umodal-btn" style="color: #606266;" @click="show2 = false">
						取消
					</cover-view>
					<cover-view class="umodal-line2"></cover-view>

					<cover-view class="umodal-btn" @click="handleCheck(2, true)">
						确认
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</view>
</template>
<script>
	import TopTitle from "../../components/top-title.vue";
	import {
		wgs84LL2gcjLL2
	} from "./c.js";
	export default {
		components: {
			TopTitle
		},
		data() {
			return {
				pageHeight: 300,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [],
				title: "下拉刷新 + 加载更多",
				data: [],
				idx: -1,
				loadMoreText: "加载中...",
				showLoadMore: false,
				max: 0,
				polyline: [],
				pageType: 1,
				ftype: "1",
				faddress: "",
				fcoordinate: "",
				businessId: "",
				operator: "",
				deptId: "",
				sectionCode: "",
				roadName: "",
				pointType: "",
				pageType1Result: {
					deadlineType: 3,
				},
				rname: "",
				search: "",
				name1: "",
				name2: "",
				name3: "",
				name4: "",
				show: false,
				type: 'edit',
				show2: false,
				pcType: 0,
				pcTypes: 0,
				name: "",
				sectionName: '',
				sectionCode: '',
			};
		},
		onLoad(options) {
			console.log(options);
			// this.businessId = "RX202310210238";
			this.businessId = options.businessId;
			this.operator = options.operator;
			this.deptId = options.deptId;
			this.pcType = options.pcType;
			this.sectionCode = options.sectionCode
			this.name = options.taskName
			this.sectionName = options.sectionName
			this.type = options.type;
			this.pageHeight = uni.getSystemInfoSync().windowHeight;

			this.pageType = 1;
			this.initData();
			this.getSystemInfo()
		},
		onShow() {
			if (this.pcTypes == 2) {
				this.pcTypes = 0
				this.backPage()
			}
		},
		onReady() {
			// wx请求获取位置权限
			this.getAuthorize()
				.then(() => {
					//   同意后获取
					// this.getLocationInfo();
				})
				.catch(() => {
					//   不同意给出弹框，再次确认
					// this.getLocationInfo();
				});
		},

		onUnload() {
			// this.max = 0,
			// 	this.data = [],
			// 	this.loadMoreText = "加载更多",
			// 	this.showLoadMore = false;
		},
		onReachBottom() {
			// console.log("onReachBottom");
			// if (this.max > 40) {
			// 	this.loadMoreText = "没有更多数据了!"
			// 	return;
			// }
			// this.showLoadMore = true;
			// setTimeout(() => {
			// 	this.setListData();
			// }, 300);
		},
		onPullDownRefresh() {
			console.log("onPullDownRefresh");
		},
		mounted() {
			let that = this;
			var maps = uni.createMapContext("maps", this).$getAppMap();
			maps.onclick = function(point) {
				console.log(point, "point");
				if (that.pageType == 4) {
					that.longitude = point.longitude;
					that.latitude = point.latitude;
					that.covers = [{
						id: "markers1",
						latitude: that.latitude,
						longitude: that.longitude,
						iconPath: "/static/icon/fill_position.svg",
						width: 24, //宽
						height: 28, //高
					}, ];
				}

				// that.covers = [];
				// that.covers = [{
				// 	id: 2, //点击时候是第二次作为标记点定义。id为2，不能重复
				// 	latitude: point.latitude,
				// 	longitude: point.longitude,
				// 	iconPath: img,
				// 	fontSize: 80,
				// 	title: "所选位置"
				// }]
				// let pages = getCurrentPages()
				// let prevPage = pages[pages.length - 2]
				// let currentLocat = that.longitude + ',' + that.latitude
				// prevPage.$vm.getMapValue(currentLocat)
				// setTimeout(res=>{
				// 	uni.navigateBack({
				// 		delta: 1 // 返回的页面数
				// 	})
				// },1000)
			};
		},
		methods: {
			getSystemInfo() {
				// #ifdef APP-PLUS
				// 在 App 端执行的代码
				// 获取系统信息
				uni.getSystemInfo({
					success: function(res) {
						// 判断运行环境是否为 App
						// if (res.platform === 'android' || res.platform === 'ios') {
						// 在 App 端执行获取定位信息的逻辑
						uni.getLocation({
							success: function(locationRes) {
								console.log('已获取定位信息', locationRes);
								// 在这里处理定位成功的逻辑
							},
							fail: function(error) {
								console.error('获取定位信息失败', error);
								if (error.errMsg.indexOf('auth deny') !== -1) {
									// 用户拒绝授权定位权限，可以引导用户打开权限设置页面
									uni.showModal({
										title: '提示',
										content: '请授权使用您的定位服务',
										confirmText: '去授权',
										success: function(modalRes) {
											if (modalRes.confirm) {
												uni.openSetting({
													success: (settingRes) => {
														console.log(
															'openSetting success',
															settingRes
															.authSetting
															);
														// 在这里可以处理打开设置页面后的逻辑
													},
													fail: (settingError) => {
														console.log(
															'openSetting fail',
															settingError
															);
														// 打开设置页面失败的处理逻辑
													}
												});
											}
										}
									});
								}
							}
						});
						// } else {
						//     console.log('当前不在 App 环境中');
						//     // 在非 App 环境中的处理逻辑
						// }
					}
				});
				// #endif
			},
			initData() {
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/getDangerRoad", {
							businessId: this.businessId
						},
						"GET"
					)
					.then((res) => {
						console.log(res);
						if (res.code === 200) {
							if (res.result) {
								this.pageType1Result = res.result;
								this.sectionCode = res.result.sectionCode;
								this.roadName = res.result.name;
								this.pointType = res.result.pointType;
								this.longitude = res.result.coordinateList[0].longitude; //118.787575;
								this.latitude = res.result.coordinateList[0].latitude; //32.05024;
								this.covers = [{
									id: "markers1",
									latitude: this.latitude,
									longitude: this.longitude,
									iconPath: "/static/icon/fill_position.svg",
									width: 24, //宽
									height: 28, //高
								}, ];
								this.polyline = [{
									name: "xian1",
									arrowLine: true,
									color: "#CC2936",
									width: 8,
									id: 1,
									points: res.result.coordinateList,
								}, ];
							} else {
								this.pageType = 2;
								this.getLocationInfo();
							}
						} else {
							this.$.toast(res.message);
						}
					});
			},
			initDat2() {
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/getNearRoadInfo", {
							x: this.longitude,
							y: this.latitude,
						},
						"POST"
					)
					.then((res) => {
						console.log(res);
						if (res.code === 200) {
							this.data = res.result;
							this.sectionCode = this.data[0].sectionCode;
							this.roadName = this.data[0].name;
							this.pointType = this.data[0].type;
							this.rname = this.data[0].name;
							this.polyline = [{
								name: "xian1",
								arrowLine: true,
								color: "#CC2936",
								width: 8,
								id: 1,
								points: this.data[0].position,
							}, ];
						} else {
							this.$.toast(res.message);
						}
					});
			},
			// 返回
			backPage() {
				uni.navigateBack({
					delta: 1, // 默认值是1，表示返回的页面层数
				});
			},
			setListData() {
				// let data = [];
				// this.max += 10;
				// for (var i = this.max - 9; i < this.max + 1; i++) {
				// 	data.push(i)
				// }
				// this.data = this.data.concat(data);
			},
			handleCheck(v, t) {
				this.show = false;
				if (v == 1) {
					// let json = {
					//   name: "023县道",
					//   operator: "admin1",
					//   deptId: "3702000000",
					//   sectionCode: "37020017609",
					//   businessId: "000001",
					//   pointType: '1'
					// };

					this.$request
						.globalRequest(
							"/hiddenDanger/highDanger/HighDangerSaveStatus", {
								businessId: this.businessId,
								pcType: "1",
							},
							"GET"
						)
						.then((res) => {
							console.log(res);
							if (res.code === 200) {
								this.pcType = 1
								this.$.open(
									"/pages/index/detail?taskId=" +
									this.businessId +
									"&id=" +
									this.sectionCode +
									"&sectionId=" +
									this.sectionCode +
									"&roadName=" +
									this.roadName +
									"&userId=" +
									this.operator +
									"&deptId=" +
									this.deptId +
									"&sectionType=" +
									this.pointType
								);
							} else {
								this.$.toast(res.message);
							}
						});
				}
				if (v == 2) {
					if (t) {
						this.$request
							.globalRequest(
								"/hiddenDanger/highDanger/HighDangerSaveStatus", {
									businessId: this.businessId,
									pcType: "2",
								},
								"GET"
							)
							.then((res) => {
								console.log(res);
								if (res.code === 200) {
									this.pcTypes = 2
									this.pcType = 2
									this.show2 = false;
									// this.$.open("/pages/investigation/task" + "?id=" + this.businessId);
									this.$.open("/pages/investigation/task" + "?id=" + this.businessId + '&sectionId=' + this.sectionCode +
										'&operator=' + this.operator + '&deptId=' + this.handleDept + '&taskName=' + this.name +
										'&pcType' + this.pcType + '&sectionName=' + this.sectionName + '&sectionCode=' + this.sectionCode);
								} else {
									this.$.toast(res.message);
								}
							});
					} else {

						this.show2 = false;
						this.$.open("/pages/investigation/task" + "?id=" + this.businessId);
					}
				}

				// this.$.open(url + "?id=" + 'RX202310210236');
			},
			handleCheck2() {

				if (this.pcType == 1) {
					this.show2 = true
				} else if (this.pcType == 2) {
					this.handleCheck(2, true)
				} else {
					this.handleCheck(2, true)
				}
			},
			handleSubmit() {
				let address = "";
				if (this.ftype == 1) {
					address = `${this.name1}（${this.name2}-${this.name3}）`;
				} else {
					address = `${this.name1}（${this.name4}）`;
				}
				this.$request
					.globalRequest(
						"/hiddenDanger/highDanger/saveSectionOrCrossing", {
							businessId: this.businessId,
							address,
							coordinate: this.longitude + "," + this.latitude,
							addType: this.ftype,
						},
						"POST"
					)
					.then((res) => {
						console.log(res);
						if (res.code === 200) {
							this.show = true;
							this.sectionCode = res.sectionCode;
							this.roadName = address;
							this.pointType = this.ftype;
							// this.data = res.result;
							// console.log(this.data[0][Object.keys(this.data[0])])
							// this.rname = Object.keys(this.data[0])[0]
							// this.polyline = [
							//   {
							//     name: "xian1",
							//     arrowLine: true,
							//     color: "#CC2936",
							//     width: 8,
							//     id: 1,
							//     points: this.data[0][Object.keys(this.data[0])].position,
							//   },
							// ];
						} else {
							this.$.toast(res.message);
						}
					});
			},
			onList(e, i) {
				console.log(e);
				this.pageType = 2;
				this.idx = i;
				this.sectionCode = e.sectionCode;
				this.roadName = e.name;
				this.pointType = e.type;
				if (e && e.name && e.position) {
					this.rname = e.name;
					this.longitude = e.position[0].longitude;
					this.latitude = e.position[0].latitude;
					this.covers = [{
						id: "markers1",
						latitude: e.position[0].latitude,
						longitude: e.position[0].longitude,
						iconPath: "/static/icon/fill_position.svg",
						width: 24, //宽
						height: 28, //高
					}, ];
					this.polyline = [{
						name: "xian1",
						arrowLine: true,
						color: "#CC2936",
						width: 8,
						id: 1,
						points: e.position,
					}, ];
				}
			},
			//   初次位置授权

			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							resolve(); // 允许授权
						},
						fail: () => {
							reject(); // 拒绝授权
						},
					});
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				console.log("getLocationInfo");
				uni.getLocation({
					type: "wgs84",
					success: (res) => {
						console.log(res);
						const coord = wgs84LL2gcjLL2(res.longitude, res.latitude);
						console.log(coord);
						this.longitude = coord[0]; //118.787575;
						this.latitude = coord[1]; //32.05024;
						//   this.longitude = 120.38771;
						//   this.latitude = 36.110146;
						this.covers = [{
							id: "markers1",
							latitude: this.latitude,
							longitude: this.longitude,
							iconPath: "/static/icon/fill_position.svg",
							width: 24, //宽
							height: 28, //高
						}, ];
						this.initDat2();
					},
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "你拒绝了授权，无法获得周边信息",
					icon: "none",
					duration: 2000,
				});
			},
			confirm() {
				this.getList();
			},
			getList() {
				const data = {
					x: this.longitude,
					y: this.latitude,
					search: this.search,
				};
				console.log(data)
				if (!this.search) delete data.search;
				this.$request
					.globalRequest("/hiddenDanger/highDanger/getNearRoadInfo", data, "POST")
					.then((res) => {
						console.log(res);
						this.data = res.result;
					});
			},
			onJump(v) {
				this.pageType = v;
			},
			getTop() {
				if (this.pageType == 1) {
					return `top: calc(${this.pageHeight}px - 280px)`;
				}
				if (this.pageType == 2) {
					return `top: calc(${this.pageHeight}px - 280px)`;
				}
				if (this.pageType == 3) {
					return `top: calc(${this.pageHeight}px - 410px)`;
				}
				if (this.pageType == 4) {
					return `top: calc(${this.pageHeight}px - 440px)`;
				}
			},
			getHeight() {
				if (this.pageType == 1) {
					return `height: ${this.pageHeight - 230}px`;
				}
				if (this.pageType == 2) {
					return `height: ${this.pageHeight - 210}px`;
				}
				if (this.pageType == 3) {
					return `height: ${this.pageHeight - 350}px`;
				}
				if (this.pageType == 4) {
					return `height: ${this.pageHeight - 388}px`;
				}
			},
			onMapTap(r) {
				if (this.pageType == 4) {
					this.covers = [{
						id: "markers2",
						latitude: this.latitude,
						longitude: this.longitude,
						iconPath: "/static/icon/fill_position.svg",
						width: 24, //宽
						height: 28, //高
					}, ];
				}
				console.log(r);
			},
		},
	};
</script>

<style scoped lang="scss">
	.map {
		width: 100%;
		height: 64vh;
		position: relative;

		.location {
			position: absolute;
			width: 48px;
			height: 48px;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 10px;
			top: calc(50vh + 70px);
			background: #fff;
			border-radius: 16px;
			z-index: 99998;

			cover-image {
				width: 32px;
				height: 32px;
			}
		}

		.dialog {
			width: 96%;
			position: fixed;
			left: 2%;
			bottom: 0;
			background: #fff;
			border-radius: 4px;
			box-sizing: border-box;
			z-index: 99999;

			.status {
				position: absolute;
				top: 0px;
				right: 0;
				width: 50px;
				height: 28px;
				line-height: 28px;
				font-size: 22rpx;
				background: #cc2936;
				color: #fff;
				text-align: center;

				&::after {
					content: "";
					position: absolute;
					left: -11px;
					top: 0;
					width: 0;
					height: 0;
					border-left: 11px solid transparent;
					border-right: 12px solid transparent;
					border-top: 26px solid #cc2936;
				}
			}

			.font {
				width: 65%;
			}

			.mimg {
				width: 120px;
				height: 90px;
			}

			.top {
				padding: 14px;
				display: flex;

				.tit {
					width: 92%;
					height: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 18px;
					color: #363f4d;
					font-weight: bold;
					margin: 8px 14px 8px 14px;
				}

				.desc {
					color: #666666;
					display: flex;
					margin-left: 14px;
				}
			}

			.btn-box {
				display: flex;
				justify-content: space-between;
				padding: 14px;
				border-top: 1px solid #d3e0f2;

				.btn {
					color: white;
					cursor: pointer;
					position: relative;
					height: 50px;
					line-height: 50px;
					text-align: center;
					font-size: 18px;
				}

				.btn1 {
					width: 50%;
					background: url(../../static/map/elright.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.btn2 {
					width: 50%;
					background: url(../../static/map/elleft.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.btn3 {
					width: 33%;
					background: url(../../static/map/l.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					color: #363f4d;
				}

				.btn4 {
					width: 33%;
					background: url(../../static/map/c.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.btn5 {
					width: 33%;
					background: url(../../static/map/r.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.btn6 {
					width: 33%;
					background: url(../../static/map/ll.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;

					color: #363f4d;
				}

				.btn7 {
					width: 67%;
					background: url(../../static/map/rr.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}

				.btn8 {
					width: 100%;
					/* background: url(../../static/map/rr.png);
        background-size: 100% 100%;
        background-repeat: no-repeat; */
					background-color: rgb(53, 103, 193);
					border-radius: 9px;
				}
			}
		}

		.dialog-one {
			height: 410rpx;
		}

		.dialog-two {
			height: 410rpx;

			.two-f1 {
				text-align: center;
				margin: 56rpx 0;

				font-size: 28rpx;
				color: #777777;
			}

			.two-f2 {
				text-align: center;
				height: 96rpx;
				margin-bottom: 16rpx;

				font-size: 36rpx;
				color: #333333;
			}
		}

		.dialog-three {
			width: 100%;
			height: 340px;
			left: 0;
			padding: 0 23px;
			box-sizing: border-box;
			box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.16);
			border-radius: 4px 4px 0px 0px;

			.search {
				margin: 23px 0;
				height: 48px;
				display: flex;
				justify-content: space-between;

				.searchL {
					width: 74%;
					height: 100%;
					border: 1px solid #d9d9d9;
					display: flex;

					image {
						width: 24px;
						height: 24px;
						margin: 12px;
					}

					input {
						width: 80%;
						height: 100%;
					}
				}

				.addbtn {
					width: 23%;
					height: 100%;
					color: #fff;
					background: #2663bf;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.list-box {
				width: 100%;
				height: 244px;

				// overflow: auto;
				.list-item {
					width: 100%;
					height: 50px;
					line-height: 50px;
					display: flex;

					image {
						width: 22px;
						height: 24px;
						margin: 12px;
					}

					.tit {
						width: 62%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.jl {
						width: 30%;
						text-align: right;
						color: #666666;
						padding-right: 4px;
						box-sizing: border-box;
					}
				}
			}
		}

		.dialog-four {
			width: 100%;
			height: 372px;
			left: 0;
			padding: 0 23px;
			box-sizing: border-box;
			box-shadow: 0px -4px 10px 1px rgba(0, 0, 0, 0.16);
			border-radius: 4px 4px 0px 0px;

			.form-item {
				width: 100%;
				height: 45px;
				line-height: 45px;
				margin-top: 24px;
				display: flex;

				.form-label {
					width: 24%;
					font-size: 16px;
					color: #5e6f8a;
					text-align: right;
					margin-right: 10px;
				}

				.form-sw {
					display: flex;

					view {
						width: 60px;
						height: 100%;
						border-radius: 4px 4px 4px 4px;
						background: #f0f3f7;
						margin-right: 12px;
						color: #363f4d;
						font-size: 16px;
						text-align: center;
					}
				}

				.form-tent {
					width: 76%;
					height: 100%;
					border-radius: 4px 4px 4px 4px;
					border: 1px solid #d9d9d9;
					padding-left: 12px;

					input {
						width: 100%;
						height: 100%;

						font-size: 16px;
					}
				}
			}
		}
	}

	.umodal {
		position: absolute;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 99999;
		background: rgba(0, 0, 0, 0.16);

		.umodal-box {
			width: 90%;
			height: 240rpx;
			position: absolute;
			background: #fff;
			border-radius: 12rpx;
			top: 600rpx;
			left: 5%;

			.umodal-content {
				width: 100%;
				height: 140rpx;

				font-size: 14px;
				color: #606266;
				line-height: 140rpx;
				padding-left: 12px;
			}

			.umodal-line1 {
				width: 100%;
				height: 1px;
				background: #eaebec;
			}

			.umodal-line2 {
				width: 1px;
				height: 100%;
				background: #eaebec;
			}

			.umodal-btnbox {
				display: flex;
				width: 100%;
				height: 100rpx;
				justify-content: center;

				.umodal-btn {
					width: 50%;
					height: 100%;

					line-height: 90rpx;
					text-align: center;
					font-size: 16px;
					color: rgb(41, 121, 255);
					box-sizing: border-box;
				}
			}
		}
	}
</style>