<script setup lang="ts">
import { computed, ref,onMounted,watch } from 'vue'
import {apiImageUrl} from '../../API/api'
const address=ref('哈尔滨华德学院二公寓')

const { safeAreaInsets } = uni.getSystemInfoSync()

const buyerMessage = ref('')

const totalAmount = ref();

const getMerchantIdFromUrl = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1]; 

  if (currentPage && currentPage.options && currentPage.options.totalAmount) {
    let value = currentPage.options.totalAmount;

    if (typeof value === 'string' && value.trim() !== '') {
    
      totalAmount.value = Number(value);
      if (isNaN(totalAmount.value)) { // 检查是否为NaN
        console.error('Failed to parse totalAmount as a number:', value);
      } else {
        console.log(`totalAmount received: ${totalAmount.value}`);
      }
    } else {
      console.error('totalAmount is not a valid string:', value);
    }
  } else {
    console.error('Could not retrieve totalAmount from URL.');
  }
};

onMounted(() => {
  getMerchantIdFromUrl();
});

watch(totalAmount, (newValue) => {
  uni.$emit('totalAmountChanged', newValue);
});


const Code = () => {
		my.request({
			url: apiImageUrl+'/api/Alipay/trade',
			method: 'GET',
			success: function(result) {
				console.log(result);
				console.log(result.data.data);
				
				const orderNo=result.data.data;
				my.tradePay({
					tradeNO: result.data.data,
					success: (res) => {
						console.log('成功调用')
						uni.navigateTo({
							 url: `/pages/foodCode/foodCode?orderNo=${encodeURIComponent(orderNo)}`
						})
						console.log(res);
					},
					fail: (res) => {
						my.alert({
							content: JSON.stringify(res),
						})
						console.log('失败');
						console.log(res);
					}

				})
			}
		})
	}
</script>
<template>
	<!-- 订单支付页面 -->
	<scroll-view scroll-y class="viewport">
		<view class="viewportCenter">
			<view class="message">
				<view class="name1">
					zhangxinran
				</view>
				<view class="phone1">
					12353423242
				</view>
			</view>
			<view class="address">
				
				<text class="addressNow">
					{{address}}
				</text>
				<view class="changeAddress">
					切换
				</view>
			</view>
			<view class="car">
				 <!-- 商品信息 -->
				    <view class="goods">
				      <navigator
				        v-for="item in 1"
				        :key="item"
				        :url="`/pages/goods/goods?id=1`"
				        class="item"
				        hover-class="none"
				      >
				        <image
				          class="picture"
				          src="https://ts1.cn.mm.bing.net/th/id/R-C.0777a57ea66515c61ed3c535abc33e9e?rik=xrMfSXlP9XCHOQ&riu=http%3a%2f%2fi2.chuimg.com%2f67029d88893611e6b87c0242ac110003_4288w_2848h.jpg%3fimageView2%2f2%2fw%2f660%2finterlace%2f1%2fq%2f90&ehk=he85sDgN2hvkqJHLtVUTVv%2f0Hr9SGP9PM8VsWa451iI%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
				        />
				        <view class="meta">
				          <view class="name"> 金汤小鸡蘑菇面 </view>
				          <view class="attrs">金汤、小鸡、蘑菇</view>
						  <view class="attrs">月售：32</view>
				          <view class="prices">
				            <view class="money">￥{{totalAmount}}</view>
				          </view>
				        </view>
				      </navigator>
				    </view>
				
				    <view class="related">
				      <view class="item">
				        <text class="text">订单备注</text>
				        <input
				          class="input"
				          :cursor-spacing="30"
				          placeholder="备注"
				          v-model="buyerMessage"
				        />
				      </view>
				    </view>
				
				    <!-- 支付 -->
				    <uni-collapse-item title="费用明细">
				    	<view class="content">
				    		<view class="box">
				    			<text class="left">基础运费（10.23公里）</text>
				    			<text class="right">16元</text>
				    		</view>
				    		<view class="box">
				    			<text class="left">优惠券</text>
				    			<text class="right">-5元</text>
				    		</view>
				    		<view class="box">
				    			<text class="left">平台打折</text>
				    			<text class="right">-1.6元</text>
				    		</view>
				    		<view class="box">
				    			<text class="left">总费用</text>
				    			<text class="right">14.40元</text>
				    		</view>
				    	</view>
				    </uni-collapse-item>
			</view>
		</view>
    </scroll-view>

	  <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
	  	    <view class="total-pay symbol">
	  	      <text class="number">￥{{totalAmount}}</text>
	  	    </view>
	  	    <view class="button" @click="Code" :class="{ disabled: true }"> 去下单 </view>
	  	  </view>

</template>
<style>
	.viewport {
	height: 100vh; 
	width: 100%; 
	background-image: linear-gradient(to bottom, #4095e5 25%, #ffffff 25%);
	}
	.viewportCenter {
		height: 100vh;
		width: 90%; 
		margin: 35% auto;
		background-image: linear-gradient(to bottom, #f5f5f5 25%, #fff 25%);
		border-radius: 15px;
	}
	.message {
		width: 90%;
		height: 10%;
		margin: 0 auto;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.name1,.phone1 {
		font-size: 35rpx;
		display: block;
		margin: 10px;
		font-weight: 700;
	}
	.address {
		width: 90%;
		height: 150rpx;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 10px;
		
	}
	.addressNow {
		font-size: 40rpx;
		font-weight: 700;
		line-height: 80px;
		padding-left: 20px;
	}
	.changeAddress {
		width: 40px;
		height: 30px;
		float: right;
		margin-top: 25px;
		margin-right: 20px;
		line-height: 32px;
		padding-left: 5px;
		border-radius: 10px;
		border: 1px solid #7a7a7a;
	}
	.car {
		width: 100%;
		height: 100vh;
		margin-top: 20px;
	}
	.goods {
	  margin: 20rpx;
	  padding: 0 20rpx;
	  border-radius: 10rpx;
	  background-color: #fff;
	  }
	
	  .item {
	    display: flex;
	    padding: 30rpx 0;
	    border-top: 1rpx solid #eee;
		}
	
	    &:first-child {
	      border-top: none;
	    }
	
	    .picture {
	      width: 250rpx;
	      height: 170rpx;
	      border-radius: 15rpx;
	      margin-right: 20rpx;
	    }
	
	    .meta {
	      flex: 1;
	      display: flex;
	      flex-direction: column;
	      justify-content: center;
	      position: relative;
	    }
	
	    .name {
	      height: 20px;
	      font-size: 30rpx;
		  font-weight: 700;
	      color: #444;
	    }
	
	    .attrs {
	      line-height: 1.8;
	      padding: 0 15rpx;
	      margin-top: 6rpx;
	      font-size: 24rpx;
	      align-self: flex-start;
	      border-radius: 4rpx;
	      color: #888;
	      background-color: #f7f7f8;
	    }
	
	    .money {
			font-size: 30rpx;
			font-weight: 700;
			margin-left: 20px;
		}
	
	.related {
	  margin: 20rpx;
	  padding: 0 20rpx;
	  border-radius: 10rpx;
	  background-color: #fff;
	  }
	
	  .item {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    min-height: 80rpx;
	    font-size: 26rpx;
	    color: #333;
	  }
	
	  .input {
	    flex: 1;
	    text-align: right;
	    margin: 20rpx 0;
	    padding-right: 20rpx;
	    font-size: 26rpx;
	    color: #999;
	  }
	
	  .item .text {
	    width: 125rpx;
	  }
	
	  .picker {
	    color: #666;
	  }
	
	  .picker::after {
	    content: '\e6c2';
	  }
	
	
	.settlement {
	  margin: 20rpx;
	  padding: 0 20rpx;
	  border-radius: 10rpx;
	  background-color: #fff;
	  }
	
	  .item {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    height: 80rpx;
	    font-size: 26rpx;
	    color: #333;
	  }
	
	  .danger {
	    color: #000;
	  }

.toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--window-bottom));
  z-index: 1;
  background-image: linear-gradient(to right, #525252 70%, #4095e5 70%);
  height: 20px;
  padding: 0 20rpx;
  border-top: 1rpx solid #eaeaea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
  margin: 0 auto;
  width: 90%;
  border-radius: 50rpx;
  margin-bottom: 10px;
  }

  .total-pay {
    font-size: 40rpx;
    color: #fff;
	margin-top:30px;
	}

    .decimal {
      font-size: 75%;
    }

  .button {
    width: 200rpx;
    text-align: center;
    margin-top: 30px;
    font-size: 30rpx;
    color: #fff;
	font-weight: 700;
  }

.box {
	padding-top: 5px;
	padding-bottom: 5px;
}
.left,.right {
	font-size: 30rpx;
}
.right {
	float: right;
	padding-right: 5px;
	font-weight: 700;
}
.left {
	padding-left: 5px;
}
</style>