<template>
    <view class="waper" v-if="detail">
		<u-navbar :autoBack="true" :placeholder="true" bgColor="#03AE80" leftIconColor="#fff">
			<view slot='center' style="color: #fff;">
				订单详情
			</view>
		</u-navbar>
		<view class="top_box">
			<view class="title">
				<view class="left">
					<u-icon :name="detail.icon" color="#fff" size="56rpx" />
					<view style="margin-left: 12rpx;">{{detail.status}}</view>
				</view>
				<view class="right" v-if="detail.paymentType == '0' && timeNum > 0">{{secondsToTime(timeNum)}}</view>
			</view>
			<view class="label">{{detail.text}}</view>
			<view class="btn_box">
				<view class="btn pay" v-if="payFlag" @click="goPay">去支付</view>
				<view class="btn" v-if="cancelFlag" @click="cancel">取消订单</view>
				<view class="btn" v-if="refundFlag" @click="apply">申请退款</view>
				<view class="btn" v-if="delFlag" @click="del">删除订单</view>
				<view class="btn" v-if="reserveFlag" @click="reserve">再次预定</view>
				<view class="btn" v-if="contactFlag" @click="showPopupTel = true">联系酒店</view>
				<view class="btn" v-if="againFlag" @click="apply">再次申请</view>
				<view class="btn" v-if="progressFlag" @click="refund">退款进度</view>
			</view>
		</view>
		<view class="row" v-if="cancelRuleFlag">
			<view class="left">
				<view class="label">取消规则</view>
				<view class="rule">{{roomDetail.cancelRuleTypeDesc}}</view>
			</view>
			<view class="right" @click="showPopupRead = true">
				<view class="text">取消规则</view>
				<u-icon name="arrow-right" color="#03AE80" size="28rpx" />
			</view>
		</view>
		<view class="row" v-if="onlinePaymentFlag">
			<view class="left">
				<view class="label">在线支付</view>
				<view class="price"><text class="unit">￥</text>{{ detail.totalAmount }}</view>
			</view>
			<view class="right" @click="showPopupDetailed = true">
				<view class="text">费用明细</view>
				<u-icon name="arrow-right" color="#03AE80" size="28rpx" />
			</view>
		</view>
		<view class="hotel">
			<view class="con">
				<image class="img" :src="$utils.setImgUrl(detail.zdyHotelHomestayVO.coverImage)" mode=""></image>
				<view class="msg">
					<view class="h4" @click="goHotelDetail">
						<view class="name">{{ hotelDetail.name }}</view>
						<u-icon name="arrow-right" color="#999" size="28rpx" />
					</view>
					<view class="address">{{ hotelDetail.address }}</view>
				</view>
			</view>
			<view class="col">
				<view class="btn" @click="openLocation">
                    <image src="../../static/home/location.png" mode=""></image>
					<view class="label">地图/导航</view>
				</view>
				<view class="btn" @click="showPopupTel = true">
                    <image src="../../static/image/phone.png" mode=""></image>
					<view class="label">联系酒店</view>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<view class="place">
			<view class="time" v-if="detail.stayType !== 'HOURLY'">
				<view class="time1">
					{{startDatePage}}（{{startWeek}}）
					 —— 
					{{stopDatePage}}（{{stopWeek}}）
				</view>
				<view class="time2">共{{nightsPage}}晚</view>
			</view>
			<view class="time" v-if="detail.stayType == 'HOURLY'">
				<view class="time1">
					{{hourDate}}  {{hourTimeSlot}}
				</view>
			</view>
			<view class="model">
				<view>{{ roomDetail.level2Name }}</view>
				<view @click="roomInfo">
					<view>房型信息</view>
					<u-icon name="arrow-right" color="#999" size="28rpx" />
				</view>
			</view>
			<view class="tags_box">
				<view class="tag" v-if="roomDetail.bedType">{{roomDetail.bedType}}</view>
				<view class="tag" v-if="roomDetail.limitedLivePerson">{{roomDetail.limitedLivePerson}}人入住</view>
				<view class="tag" v-if="roomDetail.window">{{roomDetail.window}}</view>
				<view class="tag" v-if="roomDetail.breakfast">{{roomDetail.breakfast}}</view>
			</view>
			<view class="row1">
				<view class="key">入住人</view>
				<view class="value">{{ detail.contactNames }}</view>
			</view>
			<view class="row1">
				<view class="key">联系电话</view>
				<view class="value">{{ detail.contactMobile }}</view>
			</view>
			<view class="row1">
				<view class="key">预计到店</view>
				<view class="value">{{ reachDate }} {{reachTime}}前</view>
			</view>
		</view>
		<view class="order">
			<view class="label">订单信息</view>
			<view class="row2">
				<view class="key">订单编号</view>
				<view class="value">
					<view>{{ detail.orderCode }}</view>
					<view></view>
					<view @click="copyCode(detail.orderCode)">复制</view>
				</view>
			</view>
			<view class="row2">
				<view class="key">下单时间</view>
				<view class="value">{{ detail.createTime }}</view>
			</view>
			<view class="row2" v-if="detail.paymentTime">
				<view class="key">付款时间</view>
				<view class="value">{{ detail.paymentTime }}</view>
			</view>
			<view class="row2" v-if="detail.paymentTime">
				<view class="key">付款方式</view>
				<view class="value">{{ detail.paymentMethod_dictText }}</view>
			</view>
			<view class="row2" v-if="detail.cancelTime">
				<view class="key">取消时间</view>
				<view class="value">{{ detail.cancelTime }}</view>
			</view>
		</view>
		<u-popup :show="showPopupRead" :round="10" mode="bottom">
		    <view class="read_con">
				<view class="head">
					<view class="title">订房必读</view>
					<view class="close" @click="showPopupRead = false">
						<u-icon name="close" color="#000000" size="36rpx" />
					</view>
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="row3">
						<view>取消规则</view>
						<view v-if="roomDetail.cancelRuleType == 3">
							{{cancelRule}}
						</view>
						<view v-else>{{roomDetail.cancelRuleTypeDesc}}</view>
					</view>
					<view class="row3">
						<view>入离时间</view>
						<view>入住时间：{{hotelDetail.checkInTime}}以后    离店时间：{{hotelDetail.leaveTime}}以前</view>
					</view>
					<view class="row3">
						<view>发票</view>
						<view>
							<text>{{hotelDetail.invoice == 'N' ? '不' : ''}}</text>
							可开具增值税普通/专用发票
						</view>
					</view>
					<view class="row3">
						<view>宠物</view>
						<view>
							<text>{{hotelDetail.pet == 'N' ? '不' : ''}}</text>
							允许携带宠物。
						</view>
					</view>
                </scroll-view>
			</view>
		</u-popup>
		<u-popup :show="showPopupDetailed" :round="10" mode="bottom">
		    <view class="detailed_con">
				<view class="head">
					<view class="title">明细</view>
					<view class="close" @click="showPopupDetailed = false">
						<u-icon name="close" color="#000000" size="36rpx" />
					</view>
				</view>
				<view class="add">
					<view class="label">订单合计</view>
					<view class="all">共<text>¥{{detail.totalAmount}}</text></view>
				</view>
				<view class="row4">
					<view class="col">
						<view class="key">房费 </view>
						<view class="value">￥{{detail.totalAmount}}</view>
					</view>
					<view class="col" v-for="(item, index) in detail.roomChargeDetails" :key="index">
						<view class="key">{{item.stayDate}}</view>
						<view class="value">{{item.roomQuantity}}x  ¥{{item.roomPrice}}</view>
					</view>
					<view class="col" v-if="detail.stayType !== 'HOURLY'">
						<view class="key">{{detail.outDateTime.split(' ')[0]}}</view>
						<view class="value"></view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showPopupTel" :round="10" mode="bottom">
		    <view class="tel_con">
				<view class="head">
					<view class="title">商家电话</view>
					<view class="close" @click="showPopupTel = false">
						<u-icon name="close" color="#000000" size="36rpx" />
					</view>
				</view>
				<view class="tel" @click="contact(hotelDetail.phone)">{{ hotelDetail.phone }}</view>
			</view>
		</u-popup>
		<u-popup :show="showPopupDelete" :round="10" mode="center">
		    <view class="delete_con">
				<view class="title">确认{{popupLabel}}订单？</view>
				<view class="tips">订单{{popupLabel}}后将无法恢复</view>
				<view class="btn-box">
					<view class="btn cancel" @click="showPopupDelete = false">取消</view>
					<view class="btn confirm" @click="popupConfirm">确认</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showPopupType" :round="10" mode="bottom">
		    <view class="type_con">
				<view class="close" @click="showPopupType = false">
					<u-icon name="close" color="#fff" size="36rpx" />
				</view>
				<scroll-view scroll-y class="scroll">
					<view class="swiper">
						<swiper :autoplay="true" :current="current" circular @change="changeSwiper">
							<swiper-item v-for="(i, index) in roomDetail.image" :key="index">
								<image  :src="$utils.setImgUrl(i)" mode=""></image>
							</swiper-item>
						</swiper>
						<view class="current">{{current + 1}}/{{roomDetail.imageLength}}</view>
					</view>
					<view class="specs">
						<view class="title">{{roomDetail.level2Name}}</view>
						<view class="list_box">
							<view class="item" v-if="roomDetail.area">
								<image src="../../static/image/hotel/area.png" mode=""></image>
								<view>{{roomDetail.area}}㎡</view>
							</view>
							<view class="item" v-if="roomDetail.bedType">
								<image src="../../static/image/hotel/bedType.png" mode=""></image>
								<view>{{roomDetail.bedType}}</view>
							</view>
							<view class="item" v-if="roomDetail.window">
								<image src="../../static/image/hotel/window.png" mode=""></image>
								<view>{{roomDetail.window}}</view>
							</view>
							<view class="item" v-if="roomDetail.wifi">
								<image src="../../static/image/hotel/wifi.png" mode=""></image>
								<view>{{roomDetail.wifi}}</view>
							</view>
							<view class="item" v-if="roomDetail.floor">
								<image src="../../static/image/hotel/floor.png" mode=""></image>
								<view>{{roomDetail.floor}}层</view>
							</view>
							<view class="item" v-if="roomDetail.breakfast">
								<image src="../../static/image/hotel/breakfast.png" mode=""></image>
								<view>{{roomDetail.breakfast}}</view>
							</view>
							<view class="item" v-if="roomDetail.limitedLivePerson">
								<image src="../../static/image/hotel/limitedLivePerson.png" mode=""></image>
								<view>{{roomDetail.limitedLivePerson}}人</view>
							</view>
						</view>
					</view>
					<view class="occupying"></view>
					<view class="policy">
						<view class="title">商家政策</view>
						<view class="list">
							<view class="item">
								<view class="label">重要通知</view>
								<u-parse :content="hotelDetail.importantNotice"></u-parse>
							</view>
							<view class="item">
								<view class="label">入住方式</view>
								<view class="text">{{hotelDetail.checkInWay}}</view>
							</view>
							<view class="item">
								<view class="label">取消规则</view>
								<view class="text" v-if="roomDetail.cancelRuleType == 3">
									{{cancelRule}}
								</view>
								<view class="text" v-else>{{roomDetail.cancelRuleTypeDesc}}</view>
							</view>
						</view>
					</view>
                </scroll-view>
			</view>
		</u-popup>
    </view>
</template>

<script>
export default {
	data () {
		return {
			id: '',
			detail: null,
			hotelId: '',
			hotelDetail: {},
			roomId: '',
			roomDetail: {},
			showPopupRead: false,
			showPopupDetailed: false,
			showPopupTel: false,
			showPopupDelete: false,
			showPopupType: false,
			current: 0,
            configData: null,
            timeNum: 0,
            timer: null,
			payFlag: false,
			cancelFlag: false,
			reserveFlag: false,
			contactFlag: false,
			againFlag: false,
			delFlag: false,
			refundFlag: false,
			progressFlag: false,
			cancelRuleFlag: true,
			onlinePaymentFlag: true,
			popupLabel: '',
			
			// 到店日期
			reachDate: '',
			// 到店时间
			reachTime: '',
			
			// 全日房
			startDatePage: '',
			stopDatePage: '',
			nightsPage: null,
			startWeek: '',
			stopWeek: '',
			weekList: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
			
			// 钟点房
			// 日期
			hourDate: '',
			// 入住时段
			hourTimeSlot: '',
			cancelRule: ''
		}
	},
	onShow() {
		this.getDetail();
	},
	onLoad (options) {
		this.id = options.id;
		this.getDetail();
	},
	onUnload () {
		clearInterval(this.timer);
		this.timer = null;
	},
	methods: {
		async getDetail() {
			let res=await this.$http.hotelOrderDetail(this.id);
			this.detail=res.data;
			this.hotelId = this.detail.hotelHomestayId;
			this.roomId = this.detail.roomClassifyId;
			
			if (this.detail.stayType == 'HOURLY') {
				this.hourDate = this.$moment(this.detail.inDateTime).format("MM月DD日");
				this.hourTimeSlot = this.detail.inDateTime.split(' ')[1].slice(0, 5) + '-' + this.detail.outDateTime.split(' ')[1].slice(0, 5);
			} else {
				this.startDatePage = this.$moment(this.detail.inDateTime).format("MM月DD日");
				this.stopDatePage = this.$moment(this.detail.outDateTime).format("MM月DD日");
				this.nightsPage = this.$moment(this.detail.outDateTime.split(' ')[0]).diff(this.$moment(this.detail.inDateTime.split(' ')[0]), 'days');
				this.startWeek = this.weekList[this.$moment(this.detail.inDateTime).day()];
				this.stopWeek = this.weekList[this.$moment(this.detail.outDateTime).day()];
			}
			
			if (this.detail.paymentType == '0') {
				this.configData = uni.getStorageSync('configData');
				let creaetdTime = parseInt(new Date(this.detail.createTime).getTime() / 1000);
				let nowtime = parseInt(new Date().getTime() / 1000);
				if ((creaetdTime + this.configData.expirationTime * 60) >= nowtime) {
					this.timeNum = (creaetdTime + this.configData.expirationTime * 60) - nowtime;
					this.setIntervalFn()
				} else {
					this.detail.paymentType = '2';
				}
			} 
			
			this.getOrderStatus();
			this.getHotelDetail();
			this.getRoomDeatil();
		},
		getOrderStatus() {
			this.payFlag = false;
			this.cancelFlag = false;
			this.reserveFlag = false;
			this.contactFlag = false;
			this.againFlag = false;
			this.delFlag = false;
			this.refundFlag = false;
			this.progressFlag = false;
			this.cancelRuleFlag = true;
			this.onlinePaymentFlag = true;
			if (this.detail.stayType == 'HOURLY') {
				this.reachDate = this.$moment(this.detail.inDateTime).format("MM月DD日");
				this.reachTime = this.detail.inDateTime.split(' ')[1].slice(0, 5);
			} else {
				let currentDate = this.detail.estimatedArrivalDateTime.split(' ')[0];
				this.reachDate = this.$moment(currentDate).format("MM月DD日");
				this.reachTime = this.detail.estimatedArrivalDateTime.split(' ')[1].slice(0, 5);
			}
			if (this.detail.refundStatus == '1') {
				this.detail.icon = 'checkmark-circle';
				this.detail.status = '审核中';
				this.detail.text = '您已成功取消了您的订单，系统正在审核';
				this.contactFlag = true;
				this.progressFlag = true;
				this.cancelRuleFlag = false;
			} else if (this.detail.refundStatus == '100') {
				this.detail.icon = 'error-circle';
				this.detail.status = '已驳回';
				this.detail.text = '您申请的取消订单系统已被驳回，请重新申请或联系酒店前台';
				this.contactFlag = true;
				this.againFlag = true;
				this.cancelRuleFlag = false;
			} else if (this.detail.refundStatus == '2') {
				this.detail.icon = 'checkmark-circle';
				this.detail.status = '退款中';
				this.detail.text = '系统正在退款中，请耐心等待';
				this.contactFlag = true;
				this.progressFlag = true;
				this.cancelRuleFlag = false;
			} else if (this.detail.refundStatus == '200') {
				this.detail.icon = 'checkmark-circle';
				this.detail.status = '已取消';
				this.detail.text = '您已成功取消了您的订单';
				this.reserveFlag = true;
				this.progressFlag = true;
				this.cancelRuleFlag = false;
			} else if (this.detail.refundStatus == '4') {
				this.detail.icon = 'error-circle';
				this.detail.status = '退款失败';
				this.detail.text = '对不起，您的订单退款失败，请再次申请或联系酒店前台';
				this.contactFlag = true;
				this.againFlag = true;
				this.cancelRuleFlag = false;
			} else if (this.detail.stayStatus == 'BOOKED') {
				this.detail.icon = 'checkmark-circle';
				this.detail.status = '预定成功，等待您的入住';
				this.detail.text = '房间将为你保留至预计在' + this.reachDate + this.reachTime + '前';
				this.refundFlag = true;
				this.reserveFlag = true;
			} else if (this.detail.stayStatus == 'CHECKED_IN') {
				this.detail.icon = 'checkmark-circle';
				this.detail.status = '已入住';
				this.detail.text = '订单已入住，欢迎您再次预定';
				this.reserveFlag = true;
				this.cancelRuleFlag = false;
			} else if (this.detail.stayStatus == 'CHECKED_OUT') {
				this.detail.icon = 'checkmark-circle';
				this.detail.status = '已完成';
				this.detail.text = '订单已完成，欢迎您再次预定';
				this.delFlag = true;
				this.reserveFlag = true;
				this.cancelRuleFlag = false;
				this.onlinePaymentFlag = false;
			} else if ((this.detail.stayStatus == 'CANCELED' || this.detail.paymentType == '1') && !this.detail.refundStatus) {
				this.detail.icon = 'checkmark-circle';
				this.detail.status = '已取消';
				this.detail.text = '您已成功取消了您的订单';
				this.reserveFlag = true;
				this.cancelRuleFlag = false;
			} else if (this.detail.paymentType == '2') {
				this.detail.icon = 'error-circle';
				this.detail.status = '支付超时';
				this.detail.text = '订单已超时可支付时间，请重新下单';
				this.reserveFlag = true;
				this.cancelRuleFlag = false;
			} else if (this.detail.paymentType == '0') {
				this.detail.icon = 'clock';
				this.detail.status = '待付款';
				this.detail.text = '该订单需要尽快支付，超时后订单将自动取消';
				this.payFlag = true;
				this.cancelFlag = true;
				this.reserveFlag = true;
			}
		},
        setIntervalFn () {
            clearInterval(this.timer);
            this.timer = setInterval(() => {
                if (this.timeNum <= 0) {
                    clearInterval(this.timer)
                    // this.getDetail();
					this.detail.paymentType = '2';
					this.getOrderStatus();
                }
                this.timeNum --;
            }, 1000)
        },
        secondsToTime(seconds) {
            const minutes = Math.floor((seconds % 3600) / 60);
            const remainingSeconds = seconds % 60;
            return (minutes >= 10 ? minutes : '0' + minutes) + ":" + (remainingSeconds >= 10 ? remainingSeconds : '0' + remainingSeconds);
        },
		// 酒店详情
		async getHotelDetail() {
			let res=await this.$http.homestayId(this.hotelId);
			this.hotelDetail = res.data;
		},
		// 房型详情
		async getRoomDeatil() {
			let params = {
				roomClassifyId: this.roomId,
				startTime: this.detail.inDateTime.split(' ')[0],
				endTime: this.detail.outDateTime.split(' ')[0]
			}
			let res=await this.$http.classifyDetail(params);
			res.data.image = res.data.image.split(',');
			this.roomDetail = res.data;
			this.roomDetail.imageLength = this.roomDetail.image.length;
			
			if (this.roomDetail.cancelRuleType == 3) {
				let cancelRuleContent = JSON.parse(this.roomDetail.cancelRuleContent);
				if (Number(cancelRuleContent[0].handlingFee)) {
					this.cancelRule = `入住当天${cancelRuleContent[0].start}后取消，将收取额外费用`;
				} else {
					this.cancelRule = `入住当天${cancelRuleContent[0].end}前可免费取消，超期将收取额外费用`;
				}
			}
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		goHotelDetail() {
			uni.navigateTo({ url: `/pages/hotel/detail?id=${this.hotelId}` });
		},
		openLocation() {
            if (this.hotelDetail.latitude && this.hotelDetail.longitude) {
                let latitude = this.hotelDetail.latitude;
                let longitude = this.hotelDetail.longitude;
                uni.openLocation({
                    latitude: Number(latitude),
                    longitude: Number(longitude),
                    name: this.hotelDetail.name,
                    address: this.hotelDetail.address,
                })
            }
		},
		roomInfo() {
			this.showPopupType = true;
		},
        copyCode (code) {
        	uni.setClipboardData({
        		data: code,
        		success: () => {
        			uni.showToast({ mask: true, title: '内容已复制到剪切板', icon: 'none' })
        		}
        	})
        },
		// 再次预定
		reserve() {
			uni.navigateTo({ url: `/pages/hotel/detail?id=${this.hotelId}` });
		},
		// 取消
		cancel() {
			this.showPopupDelete = true;
			this.popupLabel = '取消';
		},
		// 删除
		del() {
			this.showPopupDelete = true;
			this.popupLabel = '删除';
		},
		async popupConfirm() {
			let info = null;
			if (this.popupLabel === '删除') {
				info = await this.$http.delHotelOrder(this.detail.id);
				this.showPopupDelete = false;
				uni.navigateBack();
			} else {
				let params = {
					orderId: this.detail.id
				}
				info = await this.$http.hotelOrderCancel(params);
				this.showPopupDelete = false;
				this.getDetail();
			}
		},
		contact(e) {
		    uni.makePhoneCall({ phoneNumber: e, fail: () => {} });
		},
		// 退款进度
		refund() {
			uni.navigateTo({ url: `/pages/hotelOrder/refundProgress?id=${this.id}` });
		},
		// 申请退款
		async apply() {
			let res = await this.$http.computePenaltyFee(this.detail.id);
			if (res.errMsg) {
				uni.$u.toast(res.errMsg);
			} else {
				uni.navigateTo({ url: `/pages/hotelOrder/cancelOrder?id=${this.detail.id}&amount=${res.data}&refund=${res.refund}` });
			}
		},
		// 去支付
		goPay() {
			uni.navigateTo({ url: `/pages/hotel/submitOrder?id=${this.detail.id}&hotelId=${this.hotelId}&source=order` })
		}
	}
}
</script>

<style lang="scss">
.waper { min-height: 100vh; background-color: #F6F6F6; padding-bottom: 22rpx; box-sizing: border-box; }
.top_box {
	background: #03AE80; border-radius: 0 0 50rpx 0; padding: 24rpx; box-sizing: border-box;
	.title {
		display: flex; align-items: center; justify-content: space-between;
		.left {
			display: flex; align-items: center;
			view { font-weight: 500; font-size: 48rpx; color: #FFFFFF; }
		}
		.right { font-weight: 500; font-size: 36rpx; color: #FFFFFF; }
	}
	.label { margin-top: 12rpx; font-size: 26rpx; color: #FFFFFF; }
	.btn_box {
		margin-top: 24rpx; display: flex; align-items: center; justify-content: space-between;
		.btn {
			flex: 1; height: 80rpx; background: #FFFFFF; border-radius: 4rpx; line-height: 80rpx; text-align: center; font-size: 28rpx; color: #03AE80; margin-right: 20rpx;
			&:last-child { margin-right: 0; }
			}
		.pay { color: #EE595A; }
	}
}
.row {
	margin: 22rpx 24rpx 0; height: 90rpx; background: #FFFFFF; border-radius: 10rpx; display: flex; align-items: center; justify-content: space-between; padding: 0 24rpx; box-sizing: border-box;
	.left {
		display: flex; align-items: center;
		.label { font-size: 28rpx; color: rgba(0,0,0,0.45); margin-right: 24rpx; }
		.rule { font-size: 28rpx; color: rgba(0,0,0,0.65); }
		.price {
			font-weight: bold; font-size: 32rpx; color: #EE595A;
			.unit { font-weight: 400; font-size: 24rpx; }
		}
	}
	.right {
		display: flex; align-items: center;
		.text { font-size: 28rpx; color: #03AE80; margin-right: 8rpx; }
	}
}
.hotel {
	margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
	.con {
		display: flex; align-items: center;
		.img { width: 110rpx; height: 110rpx; margin-right: 24rpx; border-radius: 8rpx; }
		.msg {
			flex: 1;
			.h4 {
				display: flex; align-items: center;
				.name { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); margin-right: 12rpx; }
			}
			.address { margin-top: 10rpx; font-size: 24rpx; color: rgba(0,0,0,0.45); }
		}
	}
	.col {
		margin-top: 24rpx; position: relative; display: flex; height: 38rpx;
		.btn {
			width: 50%; display: inline-block; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%;
            image{ width: 38rpx; height: 38rpx; }
			.label { font-size: 24rpx; color: #000000; margin-left: 20rpx; display: inline-block; }
		}
		.line { width: 1rpx; height: 24rpx; background-color: #ECEAEA; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
	}
}
.place {
	margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
	.time {
		display: flex; align-items: center; justify-content: space-between;
		.time1 { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
		.time2 { font-size: 26rpx; color: rgba(0,0,0,0.65); }
	}
	.model {
		display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx;
		view {
			&:first-child { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
			&:last-child {
				display: flex; align-items: center;
				view { font-size: 24rpx; color: rgba(0,0,0,0.45); margin-right: 4rpx; }
			}
		}
	}
	.tags_box {
		display: flex; align-items: center; margin-top: 13rpx; padding-bottom: 24rpx; border-bottom: 1rpx solid #ECEAEA;
		.tag {
			padding: 0 16rpx; position: relative; font-size: 24rpx; color: rgba(0,0,0,0.45);
			&::after{ content: ""; width: 1rpx; height: 23rpx; background: #ECEAEA; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
			&:first-child { padding-left: 0; }
			&:last-child {
				padding-right: 0;
				&::after {display: none;}
			}
		}
	}
	.row1 {
		margin-top: 24rpx; display: flex; align-items: center;
		.key { width: 176rpx; font-size: 26rpx; color: rgba(0,0,0,0.65); }
		.value { font-size: 26rpx; color: rgba(0,0,0,0.85); }
	}
}
.order {
	margin: 22rpx 24rpx 0; background: #FFFFFF; border-radius: 10rpx; padding: 32rpx 24rpx; box-sizing: border-box;
	.label { font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); }
	.row2 {
		margin-top: 24rpx; display: flex; align-items: center; justify-content: space-between;
		.key {font-size: 28rpx; color: rgba(0,0,0,0.65);}
		.value {
			font-size: 28rpx; color: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: end;
			view {
				&:nth-child(1) { font-size: 28rpx; color: rgba(0,0,0,0.85); }
				&:nth-child(2) { width: 2rpx; height: 19rpx; background-color: #ECEAEA; margin: 0 16rpx; }
				&:nth-child(3) { font-size: 28rpx; color: #03AE80; }
			}
		}
	}
}
.read_con {
	padding: 32rpx;
	.head {
		position: relative; text-align: center; margin-bottom: 30rpx;
		.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
		.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
	}
	.scroll { max-height: 60vh; }
	.row3 {
		margin-top: 24rpx;
		view {
			margin-top: 8rpx; font-size: 28rpx; color: rgba(0,0,0,0.65);
			&:first-child { margin-top: 0; font-weight: 500; font-size: 30rpx; color: rgba(0,0,0,0.85); }
			&:nth-child(2) { margin-top: 16rpx; }
		}
	}
}
.detailed_con {
	padding: 32rpx 0; position: relative;
	.head {
		position: relative; text-align: center; margin: 0 32rpx 30rpx;
		.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
		.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
	}
	.add {
		padding: 54rpx 0 24rpx; margin: 0 32rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #ECEAEA;
		.label { font-size: 32rpx; color: rgba(0,0,0,0.85); }
		.all {
			font-size: 28rpx; color: rgba(0,0,0,0.85);
			text { font-weight: bold; font-size: 28rpx; color: #E54042; }
		}
	}
	.row4 {
		padding: 0 32rpx;
		.col {
			display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx;
			&:first-child {
				margin: 24rpx 0 13rpx;
				.key, .value { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); }
			}
			.key, .value { font-size: 28rpx; color: rgba(0,0,0,0.65); }
		}
	}
}
.tel_con {
	padding: 32rpx 0; position: relative;
	.head {
		position: relative; text-align: center; margin: 0 32rpx 30rpx;
		.title { font-weight: 500; font-size: 34rpx; color: rgba(0,0,0,0.85); }
		.close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
	}
	.tel { padding-top: 54rpx; font-size: 28rpx; color: rgba(0,0,0,0.85); text-align: center; }
}
.delete_con {
	width: 596rpx; height: 398rpx; background: linear-gradient( 360deg, rgba(71,175,195,0) 0%, rgba(71,175,195,0.3) 100%); border-radius: 20rpx; padding: 64rpx 46rpx; box-sizing: border-box; text-align: center;
	.title { font-weight: 500; font-size: 40rpx; color: rgba(0,0,0,0.85); }
	.tips { font-size: 28rpx; color: rgba(0,0,0,0.65); margin-top: 24rpx; }
	.btn-box {
		margin-top: 64rpx; display: flex; align-items: center; justify-content: space-between;
		.btn { width: 240rpx; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 66rpx; font-size: 30rpx; }
		.cancel { border: 1rpx solid rgba(0,0,0,0.45); color: rgba(0,0,0,0.45); }
		.confirm { color: #FFFFFF; background: #03AE80; }
	}
}
/deep/.u-popup__content {overflow: hidden;}
.type_con {
	position: relative;
	.close {
		position: absolute; top: 32rpx; right: 24rpx; z-index: 1; width: 56rpx; height: 56rpx; background: rgba(0,0,0,0.4); border-radius: 50%;
		::v-deep .u-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
	}
	.scroll { max-height: 80vh; }
	.swiper{
		width: 100%; height: 500rpx; position: relative;
		swiper{ width: 100%; height: 100%; }
		.current{ padding: 0 20rpx; height: 40rpx; line-height: 40rpx; color: #fff; background: rgba(0, 0, 0, 0.5); font-size: 24rpx; border-radius: 50rpx; position: absolute; right: 24rpx; bottom: 24rpx; }
	}
	.specs {
		background: #FFFFFF; padding: 24rpx 24rpx 32rpx; box-sizing: border-box;
		.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); margin-bottom: 6rpx; }
		.list_box {
			display: flex; align-items: center; flex-wrap: wrap;
			.item {
				margin-top: 18rpx; width: 33.33%; display: flex; align-items: center;
				image { width: 28rpx; height: 28rpx; }
				view {
					margin-left: 12rpx; font-size: 24rpx; color: rgba(0,0,0,0.85);
					.text { color: #03AE80; }
				}
			}
		}
	}
	.occupying { width: 100%; height: 22rpx; background-color: #F6F6F6; }
	.policy {
		background: #FFFFFF; padding: 22rpx 24rpx 24rpx; box-sizing: border-box;
		.title { font-weight: 500; font-size: 36rpx; color: rgba(0,0,0,0.85); padding-bottom: 7rpx; }
		.list {
			.item {
				border-bottom: 2rpx solid #ECEAEA; padding: 24rpx 0;
				&:last-child { border-bottom: none; }
				.label { font-weight: 500; font-size: 28rpx; color: rgba(0,0,0,0.85); margin-bottom: 16rpx; }
				.text { font-size: 24rpx; color: rgba(0,0,0,0.45); line-height: 28rpx; }
			}
		}
	}
}
</style>