<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 class="white-bg-wrap mg-bot-30">
				<view class="shop-car-item mg-bot-20">
					<view class="title u-f u-f-jcsb u-f-aic mg-bot-20">
						<view>
							<text class="fs24 fw400 light-black">{{orderInfo.storeName||''}} &nbsp;&nbsp;</text>
							<text class="fs24 fw400 light-gray">共{{orderInfo.storeNum||1}}家店通用</text>
							<text class="gray-right-arrow"></text>
						</view>
						<view>
							<text class="main-color fs28 fw400">待评价</text>
						</view>
					</view>
					<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
						<image :src="orderInfo.goodsImage" style="width: 128rpx;height: 128rpx;" :mode="aspectFill"
							class="mg-right-10 border-radius-9"></image>
						<view class="u-f u-f-fdc" style="flex: calc(100% - 128rpx)">
							<view class="fs28 light-black fw400 mg-bot-10">{{orderInfo.goodsName}}</view>
							<view class="mg-bot-10 u-f u-f-aic u-f-jcsb">
								<text class="light-gray fs24 mg-right-8">{{orderInfo.specificationsName || ''}}</text>
							</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">{{orderInfo.goodsPrice}}</text>
									</view>
								</view>
								<view class="fs24 light-gray">x{{orderInfo.goodsNum}}</view>
							</view>
						</view>
					</view>

					<view class="u-f u-f-jcfe u-f-aic fs24 light-gray mg-bot-20">
						<text class="mg-right-20">共 {{orderInfo.goodsNum}} 件</text>
						<text class="mg-right-6">实付金额</text>
						<text class="main-color">￥{{orderInfo.paymentAmount}}</text>
					</view>
				</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">
					<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">
					<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="againBuyOne(item)">再来一单</view>
					<view class="cancel-line-btn mg-right-10" style="padding-left: 42rpx;padding-right: 42rpx;"
						@click="requestShouHou(item)">申请售后</view>
					<view class="line-gradient-btn" style="padding-left: 59rpx;padding-right: 59rpx;"
						@click="goToEvalution(item)">去评价</view>
				</view>
			</view>
		</view>

		<!-- 客服 -->
		<uni-popup :position="'middle'" class="middle-wrap" :show="showBotPopup" @hidePopup="hideCusServeicePopup">
			<view class="sys-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>客服电话：{{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>

	</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: {}
			}
		},
		onLoad(options) {
			this.orderId = options.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
			},
			getCheckQuanDetail() {
				this.$http.get('/api/client/order/verificationCode?orderId=' + this.orderId).then(res => {
					this.orderInfo = res.data.data
				})
			},
			requestRefund() {

			},
			showCusServeicePopup(value) {
				this.showBotPopup = true
			},
			hideCusServeicePopup() {
				this.showBotPopup = false
			},
			callOut(data) {
				console.log("呼叫");
				uni.makePhoneCall({
					phoneNumber: data, //要拨打的手机号
					success: (res) => {
						// console.log("调用成功")
					},
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
			requestRefund() {
				let item = this.orderInfo
				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'
						})
					}
				})
			},
			requestShouHou() {
				let item = this.orderInfo
				uni.navigateTo({
					url: '/pagesB/request-shouhou/request-shouhou?data=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			goToEvalution() {
				let item = this.orderInfo
				uni.navigateTo({
					url: '/pagesA/add-evaluation/add-evaluation?data=' + encodeURIComponent(JSON.stringify(item))
				})
			}
		}
	}
</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%;
	}

	.sys-mes-nofity {
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		border-radius: 14rpx;
		background-color: #ffffff;

		.top {
			width: 100%;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}

	.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>