<template>
	<view>
		<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-34">
				<view class="title u-f u-f-jcsb u-f-aic mg-bot-20 mg-top-18" @click="jumpToShopDetail">
					<view class="u-f u-f-jcfs u-f-aic">
						<text class="fs24 fw400 light-black mg-right-10">{{orderInfo.storeName}}</text>
						<image v-if="orderInfo.storeName!=null" src="../.././static/common/big_gray_right_arrow.png"
							:mode="'widthFix'" style="width: 13rpx;height: 26rpx"></image>
					</view>
					<view class="u-f u-f-jcfe u-f-aic">
						<text class="fs28 main-color">{{orderInfo.status === 0 ? '待付款' : '已取消'}}</text>
					</view>
				</view>

				<view class="u-f u-f-jcfs u-f-aic mg-bot-6">
					<image :src="orderInfo.goodsImage" style="width: 128rpx;height: 128rpx;flex: 1"
						:mode="'scaleToFill'" class="mg-right-10 border-radius-9"></image>
					<view class="u-f u-f-fdc" style="flex: 4">
						<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="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;">
								<text class="fs32 main-color fw700">{{orderInfo.goodsPrice}}</text>
							</view>
							<view class="fs24 light-gray">x{{orderInfo.goodsNum}}</view>
						</view>
					</view>
				</view>
				<view class="u-f u-f-jcfe u-f-aic fs24">
					<text class="light-gray mg-right-20">共 {{orderInfo.goodsNum}} 件</text>
					<text class="mg-right-6">实付金额</text>
					<text class="main-color">￥{{orderInfo.paymentAmount}}</text>
				</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 fs28 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.orderId}}</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>

			<view class="fix-bot u-f u-f-aic u-f-jcc" v-if="orderInfo.status===0">
				<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="cancelOrder">取消订单</view>
						<view class="line-gradient-btn" style="padding-left: 42rpx;padding-right: 42rpx;"
							@click="payMoney">立即付款</view>
					</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>客服电话：{{orderInfo.storeCustomerService}}</text>
				</view>
				<view class="bot u-f u-f-jcc u-f-aic" @click="callOut(orderInfo.storeCustomerService)">
					<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: 0,
				customerService: {},
				showBotPopup: false,
				bgColor: '#FAFBFF',
				orderInfo: {}
			}
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.getOrderDetails()
		},
		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
			},
			payMoney() {
				let data = {
					orderId: this.orderInfo.largeOrderId
				}

				console.log("payMoney", data)
				uni.showLoading()
				this.$http.get('/api/client/lkl/pay', data, {
					token: true,
					checkToken: true
				}).then((res) => {
					console.log("支付", res.data)
					let resData = res.data.data
					uni.hideLoading()

					this.wakeWxPay(resData)
				})

			},
			wakeWxPay(resData) {
				var app_id = resData.resp_data.acc_resp_fields.app_id
				var nonce_str = resData.resp_data.acc_resp_fields.nonce_str
				var package_word = resData.resp_data.acc_resp_fields['package']
				var partner_id = resData.resp_data.acc_resp_fields.partner_id
				var prepay_id = resData.resp_data.acc_resp_fields.prepay_id
				var time_stamp = resData.resp_data.acc_resp_fields.time_stamp
				var pay_sign = resData.resp_data.acc_resp_fields.pay_sign
				var sign_type = resData.resp_data.acc_resp_fields.sign_type

				uni.requestPayment({
					provider: "wxpay",
					appid: app_id, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					nonceStr: nonce_str, // 随机字符串
					package: package_word, // 固定值
					partnerid: partner_id, // 微信支付商户号
					prepayid: prepay_id, // 统一下单订单号
					timeStamp: time_stamp, // 时间戳（单位：秒）
					signType: sign_type,
					paySign: pay_sign, // 签名，这里用的 MD5/RSA 签名
					success(res) {
						uni.redirectTo({
							url: "/pagesE/pay-success/pay-success"
						})
					},
					fail(e) {
						console.log("fail", e)
					}
				})
			},
			cancelOrder() {
				uni.showModal({
					content: '确定取消该订单吗？',
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							this.$http.get('/api/client/order/cancelOrder', {
								orderId: this.orderId
							}).then(res => {
								if (res.data.code == 200) {
									uni.navigateBack({
										delta: 1
									})
								}
								uni.showToast({
									icon: 'none',
									title: res.data.msg
								})
							})
						}
					},
					fail: (res) => {
						console.log(res);
					}
				})
			},
			init() {
				this.getOrderDetails()
				this.getCustomerService()
			},
			showCusServeicePopup() {
				this.showBotPopup = true
				console.log("showCusServeicePopup", this.showBotPopup)
			},
			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>
	.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;
	}

	.common-card {
		padding: 20rpx;
		border-radius: 18rpx;
		background-color: #ffffff;
	}
</style>