<template>
  <view class="main" v-if="apiShow">
	<view class="cont flex">
		<view class="cont_order_type">
			<view class="cont_order_type_name">{{orderDetails.statustext}}</view>
			<view class="cont_order_type_desc" v-if="orderDetails.orderStatusMsg && orderDetails.status != 5">{{orderDetails.orderStatusMsg}}</view>
		</view>
		<view class="cont_service">
			<image class="cont_service_img" src="../../static/order/service.png" mode="widthFix"></image>
			<view class="cont_service_name">联系客服</view>
		</view>
	</view>
	
	<view class="cont paddom">
		<view class="cont_title cont_border">商品信息<text>共{{orderDetails.totalcartNum}}件</text></view>
		<view class="cont_shop" v-for="(item,index) in orderInfoList" :key="index">
			<view class="cont_shop_l">
				<view class="cont_shop_img">
					<image class="cont_shop_imgUrl" :src="item.image" mode="widthFix"></image>
				</view>
				<view class="cont_shop_text">
					<view class="cont_shop_title"><text>{{item.storeName}}</text></view>
					<view class="cont_shop_desc">单价:<text class="cont_shop_desc_price">{{item.price}}</text></view>
					<view class="cont_shop_desc">数量:{{item.cartNum}}</view>
				</view>
			</view>
			<view class="cont_shop_r">
				<view class="cont_shop_payment">实付:<text class="cont_shop_payment_price">{{item.totalPrice}}</text></view>
				<view class="cont_shop_addcart">再来一件</view>
			</view>
		</view>
		<view class="cont_shop_border"></view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">商品金额</view>
			<view class="cont_shop_item_value"><text class="cont_shop_item_value_price">{{orderDetails.proTotalPrice}}</text></view>
		</view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">配送费</view>
			<view class="cont_shop_item_value"><text class="cont_shop_item_value_price">{{orderDetails.freightPrice}}</text></view>
		</view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">满减券</view>
			<view class="cont_shop_item_value cont_shop_item_color">-<text class="cont_shop_item_value_price">{{orderDetails.couponPrice}}</text></view>
		</view>
		<view class="cont_shop_border"></view>
		<view class="cont_shop_total">实付:<text>{{orderDetails.payPrice}}</text></view>
	</view>
	<view class="cont paddom">
		<view class="cont_title cont_border">配送信息</view>
		<view class="cont_shop_user">
			<view class="cont_shop_user_name">地址:</view>
			<view class="cont_shop_user_desc">
				<view class="cont_shop_user_detal">{{orderDetails.userAddress}}</view>
				<view class="cont_shop_user_tel">{{orderDetails.realName}}，{{orderDetails.userPhone}}</view>
			</view>
		</view>
		<view class="cont_shop_user" v-if="orderDetails.payTime !== null">
			<view class="cont_shop_user_name">时间:</view>
			<view class="cont_shop_user_desc">
				<view class="cont_shop_user_detal">{{orderDetails.payTime}}</view>
			</view>
		</view>
		<view class="cont_shop_user" v-if="orderDetails.mark !== null">
			<view class="cont_shop_user_name">备注:</view>
			<view class="cont_shop_user_desc">
				<view class="cont_shop_user_detal">{{orderDetails.mark}}</view>
			</view>
		</view>
	</view>
	<view class="cont paddom">
		<view class="cont_title cont_border">订单信息</view>
		<view class="cont_shop_item" @click="copyText()">
			<view class="cont_shop_item_name">订单编号</view>
			<view class="cont_shop_item_value">{{orderDetails.orderId}}<text class="cont_shop_item_copy">复制</text></view>
		</view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">下单时间</view>
			<view class="cont_shop_item_value">{{orderDetails.createTime}}</view>
		</view>
		<view class="cont_shop_item">
			<view class="cont_shop_item_name">支付方式</view>
			<view class="cont_shop_item_value">{{orderDetails.payTypeStr}}</view>
		</view>
	</view>
	<view style="height: 200rpx;"></view>
	<view class="footer">
		<view class="footer_l">
			<block v-if="orderDetails.status == 2 || orderDetails.status == 3 || orderDetails.status == 5">
				<view class="more_text" @click.stop="more_arr()">更多</view>
				<view class="more_open" v-if="openShow"> 
					<view class="more_cont">
						<view class="more_item more_border">分享</view>
						<view class="more_item" @click.stop="remove(item)">删除订单</view>
					</view>
					<view class="more_j"></view>
				</view>
			</block>
		</view>
		<view class="footer_r">
			<view class="footer_btn" v-if="orderDetails.status == 0" @click.stop="cancel()">取消订单</view>
			<view class="footer_btn" v-if="orderDetails.status == 1" @click.stop="confirmReceipt()">确认收货</view>
			<view class="footer_btn" v-if="orderDetails.status == 2" @click="evaluate()">去评价</view>
			<view class="footer_btn" v-if="orderDetails.status == 2" @click.stop="assDetail()">申请售后</view>
			<view class="footer_btn footer_btn_bcg">再来一单</view>
		</view>
	</view>
	<view class="openShow" v-if="openShow" @click="more_arr()"></view>
  </view>
</template>

<script setup>
import NP from 'number-precision';
import { loads } from '@/utils/index.js'
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
import { orderdetail,ordercancel,orderdel,ordertake } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const { storeId } = storeToRefs(counterStore);
const orderId = ref("");
const orderDetails = ref({});
const orderInfoList = ref([]);
const apiShow = ref(false);
const openShow = ref(false);
const evaluate = () =>{
	// uni.navigateTo({
	// 	url:`/order/orderevallist/orderevallist?type=0`
	// })
	uni.navigateTo({
		url:`/order/editeval/editeval?orderNo=${orderDetails.value.orderId}`
	})
}
const assDetail=()=>{
	uni.navigateTo({
		url:`/order/assedit/assedit?orderId=${orderDetails.value.orderId}`
	})
};
const more_arr = ()=>{
	openShow.value = !openShow.value
}
const copyText = () =>{
	uni.setClipboardData({
		data:'订单编号:'+orderDetails.value.orderId,
		success: () => {
			uni.showToast({
				title: '复制成功',
				icon: 'success',
			});
		},
		fail: () => {
			uni.showToast({
			    title: '复制失败',
				icon: 'none',
			});
		}
	})
}
const api_orderdetail=()=>{
	loads('', true)
	apiShow.vaue = false;
	return orderdetail(orderId.value).then(({data}) => {
		uni.hideLoading();
		apiShow.value = true;
		let statustext = "";
		if(data.status == 0){
			statustext = "待支付"
		}else if(data.status == 1){
			statustext = "待收货"
		}else if(data.status == 2){
			statustext = "已收货，待评价"
		}else if(data.status == 3){
			statustext = "已完成"
		}else if(data.status == 4){
			statustext = "备货中"
		}else{
			statustext = "已取消"
		}
		data.orderInfoList.forEach(item => {item.totalPrice = NP.round(NP.times(item.cartNum, item.price),2)})
		data.totalcartNum = data.orderInfoList.reduce((sum, item) => sum + item.cartNum, 0);
		data.statustext = statustext;
		orderDetails.value = data;
		orderInfoList.value = data.orderInfoList
	}).catch(({message}) => {
		apiShow.value = false;
		uni.hideLoading();
		uni.showModal({
			content:message,
			showCancel: false,
			success: () => {
				uni.navigateBack({
					delta:1
				})
			}
		})
	})
}
//确认收货
const confirmReceipt = ()=>{
	ordertake(orderDetails.value.id).then(({message}) => {
		uni.showToast({
			title:message,
			icon:'success',
			success: () => {
				setTimeout(()=>{
					api_orderdetail();
				},1400)
			}
		})
	}).catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
//删除订单
const remove = ()=>{
	uni.showModal({
		content:"您确定要删除当前订单吗？",
		confirmText:'确定',
		confirmColor:'#F14D48',
		success: ({confirm}) => {
			if (confirm) {
				orderdel(orderDetails.value.id).then(({message}) => {
					uni.showToast({
						title:message,
						icon:'success',
						success: () => {
							setTimeout(()=>{
								openShow.value = false;
								api_orderdetail();
							},1400)
						}
					})
				}).catch(({message}) => {
					openShow.value = false;
					uni.showModal({
						content:message,
						showCancel: false
					})
				})
			}
		}
	})
}
//取消订单
const cancel = ()=>{
	uni.showModal({
		content:"您确定要取消当前订单吗？",
		confirmText:'确定',
		confirmColor:'#F14D48',
		success: ({confirm}) => {
			if (confirm) {
				ordercancel(orderDetails.value.id).then(({message}) => {
					uni.showToast({
						title:message,
						icon:'success',
						success: () => {
							setTimeout(()=>{
								api_orderdetail();
							},1400)
						}
					})
				}).catch(({message}) => {
					uni.showModal({
						content:message,
						showCancel: false
					})
				})
			}
		}
	})
}
onLoad((options) => {
	if(options.orderId){
		orderId.value = options.orderId
		api_orderdetail();
	}
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{
	api_orderdetail();
	uni.stopPullDownRefresh();
})
onReachBottom(()=>{})
</script>

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