<template>
	<view style="padding-bottom: 110rpx">
		<u-navbar title="订单详情" leftIconColor='#333333' leftIconSize='38rpx' autoBack="true" :fixed="false"
			:bgColor="bgColor">
		</u-navbar>

		<view class="mg-lr-24">
			<view class="common-card mg-bot-38">
				<view class="u-f u-f-jcsb u-f-aic">
					<view class="mg-right-10 u-f u-f-aic u-f-jcc">
						<image :src="orderInfo.storeLogo" class="product-image" :lazy-load="true" :mode="'scaleToFill'">
						</image>
					</view>
					<view class="u-f u-f-jcsb u-f-aifs" style="width: calc(100% - 180rpx)">
						<view class="u-f u-f-fdc">
							<view class="fs28 light-blac fw400 mg-bot-32">{{orderInfo.storeName}}</view>
							<view class="u-f u-f-jcfs u-f-aic">
								<text class="sign mg-right-8" v-for="(item, index) in orderInfo.storeLabelList"
									:key="index">{{item}}</text>
							</view>
						</view>
						<view class="u-f u-f-aifs">
							<text class="fs28 main-color">{{orderInfo.status === 9 ? '进行中' : '已完成'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mg-bot-20">
				<common-title :msg="'订单信息'"></common-title>
			</view>

			<view class="common-card">
				<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
					<text class="light-gray">留言</text>
					<text class="light-black">{{orderInfo.remark==null?"无":orderInfo.remark}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">订单号</text>
					<text class="light-black">{{orderInfo.orderNo}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">手机号</text>
					<text class="light-black">{{orderInfo.phoneNumber}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">下单时间</text>
					<text class="light-black">{{orderInfo.createTime}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">预付金额</text>
					<text class="light-black">￥{{orderInfo.orderAmount}}</text>
				</view>
			</view>

			<view class="mg-bot-20">
				<common-title :msg="'服务信息'"></common-title>
			</view>

			<view class="common-card mg-bot-24">
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">服务类型</text>
					<text class="light-black">自助洗车</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">服务时长</text>
					<text class="light-black">{{orderInfo.serviceDuration}}</text>
				</view>
			</view>
		</view>

		<!-- 已完成显示 -->
		<view class="mg-lr-24" v-if="orderInfo.status === 3">
			<view class="mg-bot-20">
				<common-title :msg="'费用明细'"></common-title>
			</view>
			<view class="common-card">
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">消费总额</text>
					<text class="main-color fw600">{{orderInfo.costDetails.xfze}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">清水</text>
					<text class="light-black">{{orderInfo.costDetails.qs}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">泡沫</text>
					<text class="light-black">{{orderInfo.costDetails.pm}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">吸尘</text>
					<text class="light-black">{{orderInfo.costDetails.xc}}</text>
				</view>

				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">洗手</text>
					<text class="light-black">{{orderInfo.costDetails.xs}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">消毒</text>
					<text class="light-black">{{orderInfo.costDetails.xd}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
					<text class="light-gray">镀膜</text>
					<text class="light-black">{{orderInfo.costDetails.dm}}</text>
				</view>
			</view>
		</view>

		<view class="fix-bot u-f u-f-aic u-f-jcc" v-if="orderInfo.status === 9 ">
			<view style="width: calc(100% - 48rpx);" class="u-f u-f-jcsb u-f-aic">
				<view class="u-f u-f-fdc u-f-jcc" @click="showCusServeicePopup">
					<text class="serve-person mg-bot-10"></text>
					<text class="light-black fs24 fw400">客服</text>
				</view>
				<view class="u-f u-f-jcfe u-f-aic">
					<view class="line-gradient-btn" style="padding-left: 42rpx;padding-right: 42rpx;"
						@click="showEndClearCarModal">结束洗车</view>
				</view>
			</view>
		</view>

		<!-- 客服 -->
		<uni-popup :position="'middle'" class="middle-wrap" :show="showBotPopup" @hidePopup="hideCusServeicePopup">
			<view class="common-mes-nofity">
				<view class="top u-f u-f-aic u-f-jcc">联系客服</view>
				<view class="mg-top-28 u-f u-f-jcc u-f-aic">
					<text class="deep-gray fs28">客服电话：{{customerService.cusServicePhone}}</text>
				</view>
				<view class="bot u-f u-f-jcc u-f-aic" @click="callOut(customerService.cusServicePhone)">
					<text class="confirm">拨打电话</text>
				</view>
			</view>
		</uni-popup>

		<!-- 结束洗车 -->
		<uni-popup :position="'middle'" class="middle-wrap" :show="endClearCarModal" @hidePopup="hideEndClearCarModal">
			<view class="common-mes-nofity">
				<view class="top u-f u-f-aic u-f-jcc">结束洗车</view>
				<view class="mg-top-28 u-f u-f-jcc">
					<text class="deep-gray fs28">确认结束本次洗车服务吗？</text>
				</view>
				<view class="bot u-f u-f-jcc u-f-aic">
					<text class="confirm" @click="handleEndClearCar">确认</text>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				bgColor: '#FAFBFF',
				endClearCarModal: false,
				billProgress: 1, // 1进行中 2结束洗车
				customerService: {},
				showBotPopup: false,
				orderInfo: {},
				costDetails: []
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.getOrderDetails()
			this.getCustomerService()
		},
		methods: {
			async getOrderDetails() {
				let data = {
					orderId: this.orderId
				}
				let res = await this.$http.get('/api/client/order/orderDetails', data, {
					token: true,
					checkToken: true
				})
				let resData = res.data.data || {}
				this.orderInfo = resData
			},
			async getCustomerService() {
				let res = await this.$http.get('/api/client/userInfo/customerService')
				let customerService = res.data.data
				this.customerService = customerService
			},
			async endCarWash() {
				let data = {
					orderId: this.orderInfo.orderId
				}
				let res = await this.$http.get('/api/client/order/endCarWash', data, {
					token: true,
					checkToken: true
				})

				if (res.data.code === 200) {
					uni.navigateTo({
						url: '/pagesA/order-center/order-center'
					})
				}

			},
			setCostDetails() {
				let setostDetails = this.orderInfo.setostDetails
				let costDetailsObj = {}
				for (let key in setostDetails) {
					if (key === '吸尘') {
						costDetailsObj['xichen'] = setostDetails[key]
					} else if (key === '泡沫') {
						costDetailsObj['paomo'] = setostDetails[key]
					} else if (key === '洗手') {
						costDetailsObj['xishou'] = setostDetails[key]
					} else if (key === '消毒') {
						costDetailsObj['xiaodu'] = setostDetails[key]
					} else if (key === '清水') {
						costDetailsObj['qingshui'] = setostDetails[key]
					} else if (key === '镀膜') {
						costDetailsObj['dumo'] = setostDetails[key]
					} else if (key === '消费总额') {
						costDetailsObj['paymentAmount'] = setostDetails[key]
					}
				}

				console.log('costDetailsObj', costDetailsObj)
				this.costDetailsObj = costDetailsObj
			},
			showEndClearCarModal() {
				this.endClearCarModal = true
			},
			hideEndClearCarModal() {
				this.endClearCarModal = false
			},
			handleEndClearCar() {
				this.hideEndClearCarModal()
				this.endCarWash()
			},
			showCusServeicePopup() {
				this.showBotPopup = true
			},
			hideCusServeicePopup() {
				this.showBotPopup = false
			},
			callOut(data) {
				console.log("呼叫");
				uni.makePhoneCall({
					phoneNumber: data, //要拨打的手机号
					success: (res) => {
						// console.log("调用成功")
					},
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style lang="scss" scoped>
	.common-card {
		padding: 20rpx;
		border-radius: 18rpx;
		background-color: #ffffff;
	}

	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 10rpx 0;
		background-color: #ffffff;
	}

	.serve-person {
		width: 40rpx;
		height: 40rpx;
		background: url(../.././static/common/say.png) no-repeat center center;
		background-size: 100%;
	}

	.middle-wrap :deep(.uni-popup-insert) {
		width: 624rpx !important;
	}
</style>