<template>
 <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view class="main">
	<!-- 地址 -->
	<view class="cont" @click="onAddress()">
		<view class="cont_ul">
			<view class="cont_l cont_width">
				<view class="cont_text"><text class="cont_default">默认</text><text class="cont_v">花木街道浦东新区机关事务管理局人民政府-20号楼2306室</text></view>
				<view class="cont_user">悟语<text class="cont_tel">15221679766</text></view>
			</view>
			<view class="cont_arr"></view>
		</view>
	</view>
	<!-- 配送时间 -->
	<view class="cont" @click="OpenTime()">
		<view class="cont_ul">
			<view class="cont_l">
				<view class="cont_text">送达时间</view>
			</view>
			<view class="cont_arr">预计18:30</view>
		</view>
	</view>
	<!-- 订单商品 -->
	<view class="cont">
		<view class="shop_view" @click="OpenShop()">
			<view class="cart_scroll">
				<scroll-view class="cart_scroll_ul" :scroll-with-animation="true" :enhanced="true"  :show-scrollbar="false" scroll-x="true">
					
					<view class="cart_scroll_li" v-for="(item,index) in orderList" :key="index">
						<view class="cart_scroll_img">
							<image class="cart_scroll_img_url" :src="item.image" mode="widthFix"></image>
						</view>
					</view>
					
				
				</scroll-view>
			</view>
			<view class="shop_numer" >共{{orderInfoVo.orderProNum}}件</view>
		</view>
		<view class="cont_m">
			<view class="cont_m_l">商品金额</view>
			<view class="cont_m_r price">{{orderInfoVo.proTotalFee}}</view>
		</view>
		<view class="cont_m">
			<view class="cont_m_l">配送费<text class="cont_m_ps" v-if="orderInfoVo.freightFee > 0">满30免基础配送费</text></view>
			<view class="cont_m_r price" v-if="orderInfoVo.freightFee > 0">{{orderInfoVo.freightFee}}</view>
			<view class="cont_m_r" v-else>免配送费</view>
		</view>
		<view class="cont_m" @click="OpenCoupon()">
			<view class="cont_m_l"><image class="cont_m_x_img" src="../../static/order/coupon.png"></image>优惠券<text class="cont_m_ps cont_m_x_v">最佳优惠</text></view>
			<view class="cont_m_r cont_m_color">-<text class="couponprice">45.08</text></view>
		</view>
		<view class="cont_bottom"><text class="cont_text">小计:</text><text class="cont_price">{{orderInfoVo.payFee}}</text></view>
	</view>
	<!-- 支付方式 -->
	<view class="cont conttop">
		<view class="cont_title">支付方式</view>
		<view class="cont_ul">
			<view class="cont_pay">
				<view class="cont_name"><image class="cont_name_img" src="../../static/order/WeChat.png" mode="widthFix"></image>微信支付</view>
			</view>
			<view class="cont_radio"><image class="cont_radioimg" src="../../static/selected.png"></image></view>
		</view>
	</view>
	<!-- 余额抵扣 -->
	<view class="cont">
		<view class="cont_ul">
			<view class="cont_li">
				<image class="cont_balance" src="../../static/order/balance.png" mode="widthFix"></image>
				<view class="cont_balance_ul">
					<view class="cont_tx">余额抵扣<text class="cont_txx">?</text></view>
					<view class="cont_desc">{{orderInfoVo.userBalance > 0 ? orderInfoVo.userBalance:'暂无可用'}}</view>
				</view>
			</view>
			<switch :checked="isDefault == 1 ? true:false" color="#e61817" :disabled="orderInfoVo.userBalance > 0 ?false:true"  @change="switchChange" />
		</view>
	</view>
	<!-- 订单备注 -->
	<view class="cont conttop">
		<view class="cont_title">订单备注</view>
		<view class="cont_textarea">
			<textarea class="cont_textarea_text" :disable-default-padding="isIos" placeholder="选填，可以告诉我们您的特殊需求"></textarea>
		</view>
	</view>
	<view style="height: 200rpx;"></view>
	<view class="footer">
		<view class="footer_li">
			<text class="footer_name">应付:</text>
			<text class="footer_price">{{orderInfoVo.payFee}}</text>
			<view class="footer_coupon">共优惠<text class="footer_coupon_price">3.00</text></view>
		</view>
		<view class="footer_btn">去支付</view>
	</view>
	 <uni-popup ref="shopPopup" type="bottom" @change="changeShop">
	     <view class="shop_open">
			 <view class="shop_open_title">商品信息<view class="shop_open_close"  @click="OpenShop()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
			 <view class="shop_open_cont">
				 
				 
				 <view class="shop_open_item" v-for="(item,index) in orderList" :key="index">
					<view class="shop_open_cont_l">
						<view class="shop_border">
							<image class="shop_img" :src="item.image" mode="widthFix"></image>
						</view>
						<view class="shop_script">
							<view class="shop_title"><text>{{item.productName}}</text></view>
							<view class="shop_desc_price">小计<text class="shop_desc_f">{{item.subtotal}}</text></view>
							<view class="shop_desc_amount">数量:{{item.payNum}}</view>
						</view>
					</view>
					<view class="shop_open_cont_price">{{item.price}}</view>
				 </view>
														  
			 </view>
		 </view>
	</uni-popup>
	<uni-popup ref="couponPopup" type="bottom" @change="changeCoupon">
	    <view class="shop_open shop_open_bcg">
			<view class="shop_open_title">选择优惠券<view class="shop_open_close"  @click="OpenCoupon()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
			<view class="coupon_cont">
				<view class="coupon_item">
					<view class="coupon_item_l">
						<view class="coupon_item_absolute"></view>
						<view class="coupon_item_v">
							<view class="coupon_item_price">5</view>
							<view class="coupon_item_desc">满39可用</view>
						</view>
					</view>
					<view class="coupon_item_border"></view>
					<view class="coupon_item_r">
						<view class="coupon_item_r_l">
							<view class="coupon_item_name">新人限时券</view>
							<view class="coupon_item_time">今日23:59到期</view>
						</view>
						<view class="coupon_radio"><image class="cont_radioimg" src="../../static/selected.png"></image></view>
					</view>
				</view>
				<view style="height: 150rpx;"></view>
			</view>
			<view class="coupon_item_bottom" @click="OpenCoupon()">不使用优惠券</view>
		</view>
	</uni-popup>
	<uni-popup ref="timePopup" type="bottom" @change="changeTime">
	    <view class="shop_open">
			<view class="shop_open_title">选择送达时间<view class="shop_open_close"  @click="OpenTime()"><image src="../../static/order/close.png" mode="widthFix"></image></view></view>
			<view class="tiem_cont">
				<view class="tiem_l"></view>
				<view class="tiem_r"></view>
			</view>
		</view>
	</uni-popup>			
  </view>
</template>

<script setup>
import NP from 'number-precision';
import { loads } from '@/utils/index.js'
import { computed,ref } from 'vue';
import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
import { storeToRefs } from 'pinia';//实现解构付值
import { onLoad,onShow,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
import { orderloadpre,deliverytimes } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store
const isDefault = ref(0);
const shopPopup = ref(null);
const shopShow = ref(false);
const couponPopup = ref(null);
const couponShow = ref(false);
const timePopup = ref(null);
const timeShow = ref(false);
const show = ref(false);
const timList = ref([]);
const orderDetailList = ref({});
const orderInfoVo = ref({});
const orderList = ref([]);
const preOrderNos = ref('');
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
//const { count,doubleCount } = storeToRefs(counterStore);
const isIos = ref(false);
const System = () =>{
	const phone = wx.getSystemInfoSync();
	if (phone.platform == 'ios') {
	    isIos.value = true
	} else if (phone.platform == 'android') {
	    isIos.value = false
	}
};
const OpenShop = ()=>{
	shopShow.value ? shopPopup.value.close():shopPopup.value.open();
};
const changeShop = (e)=>{
	shopShow.value = e.show;
	show.value = e.show;
};
const OpenCoupon =() =>{
	couponShow.value ? couponPopup.value.close():couponPopup.value.open()
};
const changeCoupon = (e)=>{
	couponShow.value = e.show;
	show.value = e.show;
};
const OpenTime =() =>{
	timeShow.value ? timePopup.value.close():timePopup.value.open()
};
const changeTime = (e)=>{
	timeShow.value = e.show;
	show.value = e.show;
};
const timeFun = (e)=>{
	const time = [{id:1,name:'今天',list:[
		{id:1,text:'立即配送(预计13:54送达)'},
		{id:2,text:'14:00-14:30'},
		{id:3,text:'14:00-14:30'},
		{id:4,text:'14:00-14:30'},
		{id:5,text:'14:00-14:30'},
		{id:6,text:'14:00-14:30'},
		{id:7,text:'14:00-14:30'},
		{id:8,text:'14:00-14:30'},
		{id:9,text:'14:00-14:30'},
		{id:10,text:'14:00-14:30'},
		{id:11,text:'14:00-14:30'},
	]},{id:2,name:'明天 周三',list:[
		{id:1,text:'立即配送(预计13:54送达)'},
		{id:2,text:'14:00-14:30'},
		{id:3,text:'14:00-14:30'},
		{id:4,text:'14:00-14:30'},
		{id:5,text:'14:00-14:30'},
		{id:6,text:'14:00-14:30'},
		{id:7,text:'14:00-14:30'},
		{id:8,text:'14:00-14:30'},
		{id:9,text:'14:00-14:30'},
		{id:10,text:'14:00-14:30'},
		{id:11,text:'14:00-14:30'},
	]}]
	timList.value = time;
}
const onAddress=()=>{
	const params = {page:1,limit:10}
	return addresslist(params).then(({data}) => {
		if(data.list.length){
			uni.navigateTo({
				url:`/userserve/addressList/addressList?address_isDefaults=true`
			})
		}else{
			uni.navigateTo({
				url:`/userserve/addressList/addressList?address_isDefaults=true`
			})
		}
	}).catch(({message}) => {
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
};
//加载预下单
const api_orderloadpre = () => {
	loads('', true)
	return orderloadpre(preOrderNos.value).then(({data})=>{
		uni.hideLoading();
		orderDetailList.value = data;
		data.orderInfoVo.orderDetailList.forEach(item => {
			item.subtotal = NP.times(item.price,item.payNum);
		})
		orderList.value = data.orderInfoVo.orderDetailList;
		orderInfoVo.value = data.orderInfoVo;
	})
	.catch(({message}) => {
		uni.hideLoading()
		uni.showModal({
			content:message,
			showCancel: false
		})
	})
}
onLoad((options) => {
	const { preOrderNo } = options;
	preOrderNos.value = preOrderNo;
	System();
	timeFun();
	api_orderloadpre();
});
onShow(() => {
  
});
onPullDownRefresh(()=>{
	
})
onReachBottom(()=>{
	
})
</script>

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