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

		<view class="mg-lr-24">
			<view>
				<view class="u-f u-f-jcfs mg-bot-10">
					<image src="../.././static/common/alarm.png" class="oclock mg-right-10" />
					<text class="light-black fs32 fw700">待到线下使用</text>
				</view>
				<view class="light-gray fs24 mg-bot-24">请在{{orderInfo.expirationDate}}(含)前到店使用</view>
			</view>

			<view class="white-bg-wrap mg-bot-20">
				<view class="u-f u-f-jcfs u-f-aic mg-bot-24">
					<image :src="orderInfo.goodsImage" style="width: 128rpx;height: 128rpx;" :mode="'scaleToFill'"
						class="mg-right-10 border-radius-9"></image>
					<view class="u-f u-f-fdc">
						<view class="fs28 light-black fw400 mg-bot-10">{{orderInfo.goodsName}}</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
							<text class="deep-gray fs24 mg-ight-8">{{orderInfo.specificationsName}}</text>
						</view>
						<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
							<text class="light-gray fs24 mg-right-8">周一至周日</text>
						</view>
					</view>
				</view>
				<view class="u-f u-f-aic u-f-jcsb">
					<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
						<view>
							<text class="fs24 main-color">￥</text>
							<text class="fs32 main-color mg-right-18">{{orderInfo.paymentAmount}}</text>
							<text class="fs24 light-gray delete-line">￥{{orderInfo.goodsUnitPrice}}</text>
						</view>
					</view>
					<view class="fs24 light-gray">x{{orderInfo.goodsNum}}</view>
				</view>
			</view>

			<view class="white-bg-wrap mg-bot-34">
				<view class="u-f u-f-jcc u-f-aic mg-bot-8">
					<view style="width: 534rpx;">
						<image style="width:100%" :mode="'widthFix'" :src="orderInfo.verificationCode"></image>
					</view>
				</view>
				<view class="u-f u-f-jcfs u-f-aic fw600 fs32 mg-bot-14">
					<text class="mg-right-10">待使用券码</text>
					<text class="mg-right-10 main-color">1</text>
					<text class="font700">张</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic">
					<view class="fs32 fw700 u-f u-f-jcfs u-f-aic" @click="copyQuamMa">
						<text class="mg-right-10">{{orderInfo.couponCode}}</text>
						<image src="../.././static/common/copy.png" class="copy"></image>
					</view>
					<text class="fs28 light-gray">待使用</text>
				</view>
			</view>

			<!-- <view class="mg-bot-20">
				<common-title :msg="'团购详情'"></common-title>
			</view>
			
			<view class="white-bg-wrap u-f u-f-jcsb u-f-aic mg-bot-34">
				<text class="fs28 light-black">200元代金券</text>
				<view class="u-f u-f-jcfs fs26">
					<text class="light-gray">1份</text>
					<text class="main-color">￥200</text>
				</view>
			</view> -->

			<view class="mg-bot-20">
				<common-title :msg="'购买须知'"></common-title>
			</view>

			<view class="white-bg-wrap mg-bot-34">
				<view class="u-f u-f-jcfs u-f-aic fs28 light-gray mg-bot-30">
					<text class="fl-1">有效日期</text>
					<text class="fl-3">购买后一年内有效</text>
				</view>

				<view class="u-f u-f-jcfs u-f-aic fs28 light-gray mg-bot-30">
					<text class="fl-1">使用时间</text>
					<text class="fl-3">营业时间内可用</text>
				</view>

				<view class="u-f u-f-jcfs u-f-aic fs28 light-gray">
					<text class="fl-1">适用规则</text>
					<text class='fl-3'>请在指定门店线下核销使用</text>
				</view>
			</view>

			<view class="mg-bot-20">
				<common-title :msg="'订单详情'"></common-title>
			</view>

			<view class="white-bg-wrap fs28">
				<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 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 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 mg-bot-30">
					<text class="light-gray">交易方式</text>
					<text class="light-black">微信支付</text>
				</view>

				<view class="u-f u-f-jcsb u-f-aic 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 mg-bot-30" v-if="orderInfo.reservationTime!=null">
					<text class="light-gray">预约时间</text>
					<text class="light-black">{{orderInfo.reservationTime}}</text>
				</view>
				<view class="u-f u-f-jcsb u-f-aic mg-bot-30">
					<text class="light-gray">付款时间</text>
					<text class="light-black">{{orderInfo.payTime}}</text>
				</view>
			</view>
		</view>

		<view class="fix-bot u-f u-f-aic u-f-jcc">
			<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(2)">
					<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="cancel-line-btn mg-right-10" style="padding-left: 42rpx;padding-right: 42rpx;"
						@click="requestRefund">申请退款</view>
					<view class="cancel-line-btn" style="padding-left: 42rpx;padding-right: 42rpx;"
						@click="showCusServeicePopup(1)">联系商家</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">{{type === 1 ? '联系商家' : '联系平台客服'}}</view>
				<view class="mg-top-28 u-f u-f-jcc u-f-aic">
					<text>{{type === 1 ? '商家' : '客服'}}电话：{{ type === 1 ?orderInfo.personChargePhone:customerService.cusServicePhone}}</text>
				</view>
				<view class="bot u-f u-f-jcc u-f-aic"
					@click="callOut(type === 1 ?orderInfo.personChargePhone:customerService.cusServicePhone)">
					<text class="confirm">拨打电话</text>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				orderId: '',
				status: '',
				orderInfo: {},
				bgColor: '#FAFBFF',
				showBotPopup: false,
				customerService: {},
				type: 0 // 1商家 2客服
			}
		},
		onLoad(options) {
			this.orderId = options.orderId;
			this.getCheckQuanDetail()
			this.getCustomerService()
		},

		methods: {
			async getCustomerService() {
				let res = await this.$http.get('/api/client/userInfo/customerService')
				let customerService = res.data.data
				this.customerService = customerService
			},
			getCheckQuanDetail() {
				this.$http.get('/api/client/order/verificationCode?orderId=' + this.orderId).then(res => {
					this.orderInfo = res.data.data
				})
			},
			requestRefund() {

			},
			showCusServeicePopup(value) {
				this.type = value
				this.showBotPopup = true
			},
			hideCusServeicePopup() {
				this.type = 0
				this.showBotPopup = false
			},
			callOut(data) {
				console.log("呼叫");
				uni.makePhoneCall({
					phoneNumber: data, //要拨打的手机号
					success: (res) => {
						// console.log("调用成功")
					},
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
			requestRefund() {
				let item = this.orderInfo
				console.log('requestRefund', item)
				uni.navigateTo({
					url: '/pagesB/request-refund/request-refund?data=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			copyQuamMa() {
				uni.setClipboardData({
					data: this.orderInfo.couponCode, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.oclock {
		width: 38rpx;
		height: 38rpx;
	}

	.copy {
		width: 32rpx;
		height: 32rpx;
	}

	.fl-1 {
		flex: 1;
	}

	.fl-3 {
		flex: 3;
	}

	.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%;
	}

	.cancel-line-btn {
		padding: 17rpx 42rpx;
		background-color: #ffffff;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		border: 1rpx solid #707070;
		font-size: 28rpx;
		color: #333333;
	}

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