<template>
	<view class="orderDetails-body">
		<view class="orderDetails-header flex jw ac">
			<text class="orderType">{{orderData.statusMerge}}</text>
			<text class="orderTime" v-if="orderData.statusMerge=='已完成'">完成时间：{{orderData.createTime}}</text>
			<text style="font-size: 36rpx;color: #333333;font-weight: 600;" v-if="orderData.statusMerge=='待核销'">
				提货码：
				<text style="color: #F83D3D;font-weight: 600;">{{orderData.takeCode}}</text>
			</text>
		</view>
		<view class="orderDetails-center">
			<view class="orderDetails-center-header">自提油站：</view>
			<view class="orderDetails-center-site">
				<view class="siteName">{{orderData.takeSiteName}}</view>
				<view class="address textov">{{orderData.takeSiteAddress}}100米处</view>
				<!-- <view>
					 <text class="juli">距离：12.8KM</text>
				 </view> -->
			</view>
			<view v-for="item in orderData.mallOrderInfoDetails" class="orderDetails-product flex ac">
				<view class="orderDetails-product-img">
					<image :src="item.oderDetailImg" mode="aspectFit" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="orderDetails-product-right">
					<view class="name">{{item.productName}}</view>
					<view class="gg">规格：默认</view>
					<view class="gg">{{item.marketPrice}} X{{item.orderNum}}</view>
				</view>
			</view>
			<view class="orderDetails-message">
				<view class="orderDetails-message-row flex jw ">
					<text>订单编号：</text>
					<text>{{orderData.orderCode}}</text>
				</view>
				<view class="orderDetails-message-row flex jw ">
					<text>下单时间：</text>
					<text>{{orderData.createTime}}</text>
				</view>
				<!-- <view class="orderDetails-message-row flex jw ">
					<text>站点电话：</text>
					<text>{{}}</text>
				</view> -->
				<view class="orderDetails-message-row flex jw">
					<text>支付方式：</text>
					<text>积分</text>
				</view>
				<view class="orderDetails-message-row flex jw">
					<text>商品金额：</text>
					<text>{{orderData.marketPrice}}</text>
				</view>
				<view class="orderDetails-message-row flex jw ">
					<text>支付积分：</text>
					<text>{{orderData.integral}}</text>
				</view>
			</view>
		</view>
		<view v-if="orderData.statusMerge=='待核销'" @click="cancelOrder" class="orderDetails-button-qx">
			取消订单
		</view>
		<view v-if="orderData.statusMerge=='已核销'" @click="$refs.popup.open('bottom')" class="orderDetails-button-qx">
			申请退款
		</view>
		<uni-popup @change="popupChange" :safe-area="false" ref="popup" type="bottom">
			<view class="refundment-body">
				<view class="refundment-form ">
					<view class="refundment-form-row-container  oneflex">
						<view @click="$refs.type.open('bottom')" class="refundment-form-row flex">
							<view class="refundment-form-row-label oneflex">退款类型</view>
							<view class="refundment-form-row-right ">
								<text style="color: #999999;font-size: 28rpx; margin-right: 10rpx;"
									v-if="refundType">{{ selects[refundType].label }}</text>
								<uni-icons type="right" size="16" color="#999999"></uni-icons>
							</view>
						</view>
						<view @click="$refs.reason.open('bottom')" class="refundment-form-row flex">
							<view class="refundment-form-row-label oneflex">退款原因</view>
							<view class="refundment-form-row-right ">
								<text style="color: #999999;font-size: 28rpx; margin-right: 10rpx;"
									v-if="refundMark">{{ refundMark }}</text>
								<uni-icons type="right" size="16" color="#999999"></uni-icons>
							</view>
						</view>
						<view class="refundment-form-row flex">
							<view class="refundment-form-row-label oneflex">可退积分</view>
							<view class="refundment-form-row-right ">
								<text style="margin-right: 20px;">{{orderData.integral}}</text>
							</view>
						</view>
					</view>
					<view @click="refundOrder" class="refundment-form-button flex jc">
						提交
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup :safe-area="false" ref="type" type="bottom">
			<view class="select-body">
				<view class="select-title">退款类型</view>
				<view @click="refundType=item.value" v-for="(item,index) in selects" :key="index"
					class="select-item-container">
					<view class="select-item flex">
						<view class="select-item-left oneflex">{{item.label}}</view>
						<view class="select-item-right">
							<radio style="transform:scale(0.7)" :value="item.value" color="#F83D3D"
								:checked="refundType===item.value" />
						</view>
					</view>
				</view>
				<view @click="$refs.type.close()" class="select-button flex jc">
					关闭
				</view>
			</view>
		</uni-popup>
		<uni-popup :safe-area="false" ref="reason" type="bottom">
			<view class="select-body">
				<view class="select-title">退款原因</view>
				<view @click="refundMark=item.value" v-for="(item,index) in refundMarks" :key="index"
					class="select-item-container">
					<view class="select-item flex">
						<view class="select-item-left oneflex">{{item.label}}</view>
						<view class="select-item-right">
							<radio style="transform:scale(0.7)" :value="item.value" color="#F83D3D"
								:checked="refundMark===item.value" />
						</view>
					</view>
				</view>
				<view @click="$refs.reason.close()" class="select-button flex jc">
					关闭
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import orderApi from "@/api/order.js";

	export default {
		data() {
			return {
				isRefundment: false,
				refundMark: "",
				refundType: "",
				selects: [{
						label: "退货退款",
						value: "0"
					},
					{
						label: "仅退款",
						value: "1"
					}
				],
				refundMarks: [{
						label: "质量问题",
						value: "质量问题"
					},
					{
						label: "不想要了",
						value: "不想要了"
					},
					{
						label: "缺货",
						value: "缺货"
					}
				],
				orderData: {
					takeSiteName: "",
					takeSiteAddress: "",
					createTime: "",
					orderStatus: "",
					mallOrderInfoDetails: []
				}
			}
		},
		filters: {
			orderStatus(e) {
				switch (Number(e)) {
					case 1:
						return '待核销'
					case 2:
						return '已核销'
					case 3:
						return '已完成'
					case 0:
						return '待支付'
					case -1:
						return '已取消'
					default:
						return '数据错误'
				}
			},
		},
		onLoad(e) {
			if (e.id) {
				this.getOrderDetails(e.id)
			}
			console.log(e)
		},
		watch: {
			isRefundment(n) {
				if (!n) {
					this.refundType = "";
					this.refundMark = "";
				}
			}
		},
		methods: {
			popupChange({
				show
			}) {
				this.isRefundment = show;
				console.log(show, "showshow")
			},
			refundOrder() {
				if (this.refundType === "" || this.refundMark === "") {
					uni.showToast({
						title: "请选择相关信息",
						icon: "none"
					})
					return
				}
				orderApi.refundOrder({
					"id": this.orderData.id,
					"refundType": this.refundType, //0 退货退款   1仅退款  【必填】 
					"refundMark": this.refundMark
				}).then(res => {
					if (res.code == 20000) {
						this.$refs.popup.close();
						this.getOrderDetails(this.orderData.id)
					}
				})
			},
			cancelOrder() {
				let that = this
				uni.showModal({
					title: "订单取消",
					content: "是否确定取消",
					success(result) {
						if (result.confirm) {
							orderApi.cancelOrder({
								"id": that.orderData.id,
								"createSource": "MALL_COMS_MINI"
							}).then(res => {
								if (res.code == 20000) {
									that.getOrderDetails(that.orderData.id)
								}
							})
						} else if (result.cancel) {
							console.log('用户点击取消');
						}

					}
				})

			},
			getOrderDetails(id) {
				orderApi.getOrderInfo(id).then(res => {
					res.code == 20000 && (this.orderData = res.data)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'index.scss';
</style>