<template>
	<view>
		<u-navbar bgColor="transparent" :placeholder="true" @leftClick="leftClickHandler"> </u-navbar>
		<view class="mainBox">
			<!-- 收货地址 -->
			<shopAddres :isOrder="true" :adress="orderList"></shopAddres>
			<view class="shopBox">
				<orderShops :shop="orderList"></orderShops>
				<view class="line"></view>
				<view class="mode flexJ">
					<view class="left">提货方式</view>
					<view class="right">快递配送</view>
				</view>
			</view>
			<view class="moneyBox flexJ" style="margin-bottom: 20rpx;">
				<view>实付款</view>
				<view class="money">￥{{orderList.total_price}}</view>
			</view>
			<view class="moneyBox flexJ" v-for="(item,index) in placeOrder" :key="item.id">
				<view class="items" >
					{{item.name}} <text>{{item.text}}</text>
				</view>
				<view v-if="index ==0 " @click="copy" class="copy">复制</view>
			</view>
		</view>
		<!-- 按钮 // 0=全部,1=待付款,2=待发货,3=待收货,4=待评价,11=已取消,21=售后-->
		<view class="btnBox iosAuto">
			<view v-if="btnType==3" class="service flexC">
				<button open-type="contact">联系客服</button>
			</view>
			<view v-if="btnType<=2" class="gay flexC" @click="btns(0)">{{btnType==1?'取消付款' : btnType==2?'申请退款': '联系客服'}}</view>
			<view v-if="btnType==1 || btnType==3" class="red flexC" @click="btns(1)">{{btnType==1?'立即支付' : '确认收货'}}</view>
		</view>
		<!-- 选择支付方式 -->
		<payMode @canclePop="modeShow = false" :orderId="orderId" :isOrderPay="true" :totalPrice="orderList.total_price" :modeShow="modeShow"></payMode>
		<!-- 提示弹窗 -->
		<tipPops @pointsBtns="pointsBtns" :integral="integral" :tipType="tipType" :tipShow="tipShow"></tipPops>
	</view>
</template>

<script setup>
	import { ref,reactive, getCurrentInstance } from 'vue'
	import {onShow,onLoad} from '@dcloudio/uni-app'
	import shopAddres from '@/componets/address.vue'
	import orderShops from '@/componets/orderShop.vue'
	import tipPops from '@/componets/tipPop.vue'
	import PayMode from '@/componets/checkPayMode.vue'
	import { getOrderdetail,getCancleOrder,getRefund,getReceipt } from '@/api/'
	onLoad((e)=>{
		console.log(e.id)
		orderId.value = e.id
		getOrderdetails(e.id)
	})
	let tipShow = ref(false) //是否取消订单弹窗
	let orderList = ref({}) //订单
	let modeShow = ref(false) //选择支付方式
	let orderId = ref('')//订单id
	let btnType = ref(1) //按钮状态
	let integral = ref(0) //积分
	let tipType = ref(1) //1取消支付 2取消订单
	let placeOrder = ref([{id:1,name:'订单编号',text:'1212'},
	{id:2,name:'支付方式',text:'1212'},
	{id:3,name:'下单时间',text:'1212'},
	{id:4,name:'快递编号',text:'1212'}])

	const leftClickHandler = () => {
		// const pages = getCurrentPages()
		// const page = pages[pages.length - 2]
		// page.onLoad({ status: 0 })
		uni.navigateBack({ delta: 1 })
	}
	
	// 复制订单号
	const copy = ()=> {
		uni.setClipboardData({
			data: orderList.value.order_no,
				success: () => {
					uni.showToast({ title: "复制成功",icon:'none' })
				}
			})
	}
	// 立即支付 type==0灰色按钮 否者橙色按钮
	// 0=全部,1=待付款,2=待发货,3=待收货,4=待评价,11=已取消,21=售后 getCancleOrders()
	const btns = (type)=> {
		if(type==0) {
			tipType.value = btnType.value == 1  ? 1 : 2
			tipShow.value = true
			// btnType.value == 1 ? tipShow.value = true  : getRefunds()
		} else {
			btnType.value == 1 ? modeShow.value = true : getReceipts()
			// btnType.value == 3 ? getReceipts() :''
		}
	}
	//提示弹窗按钮点击
	const pointsBtns = (type)=> {
		console.log(type)
		tipShow.value = false
		if(type == 1) {
			tipType.value == 1 ? getCancleOrders() : getRefunds()
		}
	}
	const { proxy } = getCurrentInstance() //获取当前实例
	// 订单详情
	const getOrderdetails = async (id)=>{
	  try {
	    const res = await getOrderdetail(id)
		orderList.value = res
		btnType.value = res.order_status
		placeOrder.value[0].text = res.order_no
		placeOrder.value[1].text = res.zhifu == 1? '微信' : '余额'
		placeOrder.value[2].text = res.createtime
		placeOrder.value[3].text = res.pay_order_no
	    console.log('getOrderdetail', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getOrderdetail', err)
	  }
	}
	// 取消订单
	const getCancleOrders = async ()=> {
	  try {
	    const res = await getCancleOrder(orderId.value)
		proxy.$methods.showTN('订单已取消~')
	    console.log('getCancleOrder', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getCancleOrder', err)
	  }
	}
	// 退款
	const getRefunds = async ()=>{
	  try {
	    const res = await getRefund(orderId.value)
		proxy.$methods.showTN('已申请,等待客服审核')
	    console.log('getRefund', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getRefund', err)
	  }
	}
	// 确认收货
	const getReceipts = async ()=>{
	  try {
	    const res = await getReceipt(orderId.value)
		proxy.$methods.showTN('已收货,期待下次下单~')
	    console.log('getReceipt', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getReceipt', err)
	  }
	}
</script>

<style lang="scss">
	page {
		background: #f7f8faff;
	}
	
	.mainBox {
		width: 100%;
		padding:20rpx 24rpx;
		box-sizing: border-box;
		
		.shopBox {
			width: 100%;
			padding: 24rpx 20rpx 32rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			background: #ffffffff;
			margin-bottom: 20rpx;
			
			.line {
				margin: 40rpx auto 32rpx;
				width: 100%;
				height: 1rpx;
				background: #eeeff0ff;
			}
			
			.mode {
				.left {
					 color: #000000e6;
					 font-size: 26rpx;
				}
				.right {
					 color: #000000e6;
					 font-size: 26rpx;
					 font-weight: 700;
				}
			}
		}
			
			.moneyBox {
				width: 100%;
				padding: 32rpx 20rpx;
				box-sizing: border-box;
				margin: 0 auto ;
				border-radius: 24rpx;
				background: #ffffffff;
				
				:nth-child(1) {
					 color: #000000e6;
					 font-size: 26rpx;
				}
				
				.money {
					 color: #fc4338ff;
					 font-size: 28rpx;
					 font-weight: 700;
				}
				
				.items {
					 color: #323233ff;
					 font-size: 26rpx;
					 
					 text {
						margin-left: 40rpx;
						color: #323233ff;
						font-size: 26rpx;
						font-weight: 700;
					 }
				}
				
				.copy {
					 color: #969799ff;
					 font-size: 26rpx;
				}
			}
	}
	
	.btnBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 112rpx;
		padding-top: 16rpx;
		background: #fff;
		display: flex;
		justify-content: flex-end;
		
		.service {
			position: relative;
			margin-right: 24rpx;
			width: 248rpx;
			height: 80rpx;
			border-radius: 80rpx;
			border: 1rpx solid #dcdee0ff;
			
			button {
				position: absolute;
				width: 100%;
				height: 100%;
				background: transparent;
				padding: 0;
				color: #646566ff;
				font-size: 30rpx;
			
				&::after {
					border: none;
				}
			}
		}
		
		.gay {
			margin-right: 24rpx;
			width: 248rpx;
			height: 80rpx;
			border-radius: 80rpx;
			color: #646566ff;
			font-size: 30rpx;
			border: 1rpx solid #dcdee0ff;
		}
		
		.red {
			margin-right: 24rpx;
			width: 248rpx;
			height: 80rpx;
			border-radius: 80rpx;
			color: #ffffffff;
			font-size: 30rpx;
			font-weight: 700;
			background: linear-gradient(-88deg, #fe6434ff 0%, #ff2f2fff 100%);
		}
	}
</style>