<template>
	<view class="container">
		<!-- 顶部导航 -->
		<wd-navbar title="下单" :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>

		<!-- 收货地址 -->

		<view class="address-card" @click="selectAddress">
			<view class="address-content">
				<view v-if="address" class="address-text">
					<view class="province-city">{{ address.receiverArea }} {{ address.receiverAddress }}</view>
					<view class="address-detail">{{ address.receiverName }} {{ address.receiverPhone }}</view>
				</view>

				<view class="address-text" v-else>请选择地址</view>
				<view class="arrow-right">
					<image src="/static/y.png" style="width: 45rpx; height: 45rpx"></image>
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-section">
			<view class="section-title">商品信息</view>
			<view class="product-list">
				<view class="product-item" @click="viewProduct">
					<!-- src="/images/product.jpg" -->
					<image class="product-image" :src="goods.cover" mode="aspectFill"></image>
					<view class="product-info">
						<view class="product-name">{{ goods.name }}</view>
						<view class="product-count">{{ goods.specs }}</view>
						<view style="font-size: 36rpx; font-weight: bold; color: #ff2929">￥{{ goods.currentPrice }}</view>
					</view>
				</view>
				<view class="arrow-right">
					<image src="/static/y.png" style="width: 45rpx; height: 45rpx"></image>
				</view>
			</view>
			<view class="price-item" style="margin-top: 25rpx">
				<text class="price-label">商品数量</text>
				<view class="price-value">
					<wd-input-number v-model="dataFrom.goodsNum" />
				</view>
			</view>
		</view>

		<!-- 价格明细 -->
		<!-- 		<view class="price-section">
			<view class="section-title">价格明细</view>
			<view class="price-item">
				<text class="price-label">商品金额</text>
				<text class="price-value" style="color: #ff2929">¥ {{ goods.currentPrice }}</text>
			</view>

			<view class="price-item">
				<text class="price-label">商品数量</text>
				<view class="price-value">
					<wd-input-number v-model="GoodsNum" />
				</view>
			</view>
			
			<view class="price-total">
				<text class="price-label">合计</text>
				<text class="price-value total">¥ {{ goods.currentPrice * GoodsNum }}</text>
			</view>
		</view> -->

		<!-- 订单备注 -->
		<view class="remark-section">
			<view class="section-title">订单备注</view>
			<view class="remark-content">
				<wd-textarea style="height: 100rpx" v-model="dataFrom.note" placeholder="请填写订单备注" />
			</view>
		</view>

		<!-- 抵扣 -->
		<view class="price-section">
			<view class="section-title">支付方式</view>
			<view class="price-item-pay" :class="dataFrom.payType == 1 ? 'active-border' : ''" @click="changePayType(1)">
				<view style="width: 350rpx; text-align: center" class="price-label">余额支付</view>
				<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
				<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
					<text style="color: #aaa">可用余额：</text>
					{{ userInfo.money || 0 }}
				</view>
			</view>

			<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 1">
				<view style="color: #aaa; font-size: 24rpx">
					当前权益等级：{{ userInfo.userRights.rights.rightsName }}
					<text style="margin-left: 30rpx">
						可享受折扣：
						<text style="color: #ff2929">{{ userInfo.userRights.rights.rightsDiscount / 10 }}折</text>
					</text>
				</view>
			</view>

			<view class="price-item-pay" :class="dataFrom.payType == 2 ? 'active-border' : ''" @click="changePayType(2)">
				<view style="width: 350rpx; text-align: center" class="price-label">权益货值</view>
				<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>
				<view style="width: 350rpx; color: #ff2929; text-align: center" class="price-value">
					<text style="color: #aaa">可用抵扣：</text>
					{{ userInfo.userRights.pice || 0 }}
				</view>
			</view>
			<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 2">
				<view style="color: #aaa; font-size: 24rpx">提示：抵扣金额不足时，自动使用余额补足</view>
			</view>

			<view class="price-item-pay" style="flex-direction: column" :class="dataFrom.payType == 3 ? 'active-border' : ''" @click="changePayType(3)">
				<view style="display: flex; align-items: center; justify-content: space-between">
					<view style="width: 350rpx; text-align: center" class="price-label">混合支付</view>
					<view style="width: 1rpx; background-color: #f7f7f7; height: 30rpx"></view>

					<view v-if="dataFrom.payType == 3">
						<view
							style="width: 350rpx; color: #ff2929; text-align: center"
							class="price-value"
							v-if="goods.currentPrice * dataFrom.goodsNum > userInfo.userRights.pice + userInfo.money"
						>
							<view>
								<text style="color: #aaa">余额：</text>
								<text v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice > userInfo.money">
								{{userInfo.money}}
								</text>
								<text v-else>
									{{ goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice }}
								</text>
							</view>
							<view>
								<text style="color: #aaa">抵扣：</text>
								<text v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.money > userInfo.userRights.pice">
									{{userInfo.userRights.pice}}
								</text>
								<text v-else>
									{{ goods.currentPrice * dataFrom.goodsNum - userInfo.money }}
								</text>
							</view>
						</view>
						<view
							style="width: 350rpx; color: #ff2929; text-align: center"
							class="price-value"
							v-if="goods.currentPrice * dataFrom.goodsNum < userInfo.userRights.pice + userInfo.money"
						>
							<view v-if="goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice < 0">
								<text style="color: #aaa">余额：</text>
								{{ 0 }}
							</view>
							<view v-else>
								<text style="color: #aaa">余额：</text>
								{{ goods.currentPrice * dataFrom.goodsNum - userInfo.userRights.pice }}
							</view>
							<view>
								<text style="color: #aaa">抵扣：</text>
								{{ goods.currentPrice * dataFrom.goodsNum < userInfo.userRights.pice ? goods.currentPrice * dataFrom.goodsNum : userInfo.userRights.pice }}
							</view>
						</view>
					</view>
					<view v-else>
						<text style="color: #aaa">-</text>
					</view>
				</view>
			</view>

			<view class="price-item" style="margin-top: 25rpx" v-if="dataFrom.payType == 3">
				<view style="color: #aaa; font-size: 24rpx">提示：混合支付时优先使用抵扣金额</view>
			</view>

			<!-- 			<view class="price-section">
				<view class="price-item">
					<text class="price-label">商品金额</text>
					<text class="price-value" style="color: #ff2929">¥ {{ goods.currentPrice }}</text>
				</view>
			</view> -->

			<!-- 			<view class="price-item">
				<view class="price-label">是否使用抵扣金额</view>
				<view>
					<wd-radio-group shape="dot" inline v-model="typePay">
						<wd-radio :value="1" :disabled="!userInfo.userRights">是</wd-radio>
						<wd-radio :value="2">否</wd-radio>
					</wd-radio-group>
				</view>
			</view>
			<view class="price-item">
				<text class="price-label">当前余额</text>
				<text class="price-value" style="color: #ff2929">¥ {{ userInfo.money || 0 }}</text>
			</view>
			<view class="price-item">
				<text class="price-label">当前抵扣金额</text>
				<text class="price-value" style="color: #ff2929">¥ {{ userInfo.userRights.pice || 0 }}</text>
			</view>
			<view class="price-item">
				<text class="price-label">可抵扣金额</text>
				<text class="price-value" style="color: #ff2929">¥ {{ userInfo.userRights.pice || 0 }}</text>
			</view> -->
		</view>

		<view style="height: 130rpx"></view>

		<!-- 底部结算栏 -->
		<view class="footer">
			<view class="total-price">
				合计：
				<text style="color: #ff2929" v-if="dataFrom.payType == 1">¥ {{ (goods.currentPrice * dataFrom.goodsNum * userInfo.userRights.rights.rightsDiscount) / 100 }}</text>
				<text style="color: #ff2929" v-if="dataFrom.payType == 2">¥ {{ goods.currentPrice * dataFrom.goodsNum }}</text>
				<text style="color: #ff2929" v-if="dataFrom.payType == 3">¥ {{ goods.currentPrice * dataFrom.goodsNum }}</text>
			</view>
			<view class="pay-button" @click="submitOrder">确认支付</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { toast } from '@/utils/fun.js';
import api from '@/api/index';
import { Store } from '@/store';
const store = Store();

const userInfo = computed(() => {
	if (!store.userInfo.userRights) {
		dataFrom.value.payType = 2;
	}
	return (
		store.userInfo || {
			inviteCode: '',
			nickname: '',
			mobile: '',
			avatar: '',
			paywallet: {
				balance: 0
			},
			userRights: null
		}
	);
});

const goods = ref({});
const address = ref(null);

const dataFrom = ref({
	goodsId: null,
	goodsNum: 1,
	totalAmount: 0,
	payableAmount: 0,
	payAmount: 0,
	payType: 1,
	receiverId: null,
	note: '',
	orderType: 1
});

const submitOrder = () => {
	//余额支付
	if (dataFrom.value.payType == 1) {
		//存在权益包
		if (userInfo.value.userRights) {
			if ((goods.value.currentPrice * dataFrom.value.goodsNum * userInfo.value.userRights.rights.rightsDiscount) / 100 > userInfo.value.money) {
				toast('当前可用余额不足');
				return;
			}
			dataFrom.value.payAmount = (goods.value.currentPrice * dataFrom.value.goodsNum * userInfo.value.userRights.rights.rightsDiscount) / 100;
			dataFrom.value.payableAmount = dataFrom.value.payAmount;
			dataFrom.value.totalAmount = goods.value.currentPrice * dataFrom.value.goodsNum;
		}
	}

	// 权益包支付
	if (dataFrom.value.payType == 2) {
		//判断权益包货值是否大于总金额
		if (goods.value.currentPrice * dataFrom.value.goodsNum > userInfo.value.userRights.pice) {
			// 判断权益货值+余额是否>商品总价 >走混合支付

			console.log(goods.value.currentPrice * dataFrom.value.goodsNum);
			console.log(userInfo.value.userRights.pice + userInfo.value.money);
			console.log(goods.value.currentPrice * dataFrom.value.goodsNum > userInfo.value.userRights.pice + userInfo.value.money);

			if (goods.value.currentPrice * dataFrom.value.goodsNum < userInfo.value.userRights.pice + userInfo.value.money) {
				uni.showModal({
					title: '提示',
					content: '当前货值不足，是否使用余额补足？',
					success: (res) => {
						if (res.confirm) {
						}
					}
				});
			} else {
				toast('当前权益货值不足');
			}
			return;
		}
	}

	api.orderCreate(dataFrom.value).then((res: any) => {
		uni.navigateTo({
			url: '/pages/order/success?id=' + res.id
		});
	});
};

onLoad(async (options: any) => {
	dataFrom.value.goodsId = options.id;

	await store.usersGetInfo();

	api.goodsInfo({ id: options.id }).then((res: any) => {
		goods.value = res;
	});

	api.addressPage({ isDefault: 1 }).then((res: any) => {
		if (res.list.length !== 0) {
			address.value = res.list[0];
			// 赋值默认收货地址;
			dataFrom.value.receiverId = address.value.id;
		}
	});

	uni.$on('address', (e) => {
		address.value = e;
	});
});

const selectAddress = () => {
	uni.navigateTo({
		url: '/pages/address/list?type=1'
	});
};

const viewProduct = () => {
	uni.navigateTo({
		url: '/pages/goods/goods?id=' + goods.value.id
	});
};

const changePayType = (e = 1) => {
	dataFrom.value.payType = e;
};

const back = () => {
	uni.navigateBack();
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	position: relative;
}

/* 地址卡片 */
.address-card {
	margin: 25rpx;
	margin-bottom: 0;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
}

.address-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.address-text {
	flex: 1;
}

.province-city {
	font-size: 15px;
	margin-bottom: 5px;
}

.address-detail {
	font-size: 14px;
	color: #666;
}

.arrow-right {
	color: #ccc;
	font-size: 18px;
}

/* 商品部分 */
.product-section {
	margin: 25rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 0;
}

.section-title {
	font-size: 15px;
	color: #333;
	margin-bottom: 15px;
	font-weight: 500;
}

.product-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.product-item {
	display: flex;
	align-items: center;
}

.product-image {
	width: 80px;
	height: 80px;
	border-radius: 4px;
	margin-right: 10px;
}

.product-info {
	flex: 1;
}

.product-name {
	font-size: 14px;
	margin-bottom: 5px;
}

.product-count {
	font-size: 13px;
	color: #999;
	margin: 10rpx 0;
}

/* 价格明细 */
.price-section {
	margin: 25rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 0;
}

.price-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}
.price-item-pay {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15rpx;
	padding: 24rpx 0rpx;
	border: 1rpx solid #f7f7f7;
	border-radius: 10rpx;
	background-color: #f7f7f7;
}

.price-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.price-label {
	font-size: 14px;
	color: #333;
}

.price-value {
	font-size: 14px;
	color: #333;
}

.total {
	color: #ff2929;
	font-weight: 500;
}

/* 订单备注 */
.remark-section {
	margin: 25rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 0;
}

.remark-content {
	border-radius: 16rpx;
	border: 1rpx solid #f7f7f7;
	overflow: hidden;
	height: 100rpx;
}

/* 底部结算栏 */
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	padding: 0 30rpx;
	background-color: #fff;
	border-top: 1rpx solid #eee;
}

.total-price {
	font-size: 15px;
	color: #333;
}

.pay-button {
	background-color: #799675;
	color: #fff;
	font-size: 16px;
	padding: 0 30px;
	height: 36px;
	line-height: 36px;
	border-radius: 18px;
}

.active-border {
	background-color: rgba(121, 150, 117, 0.1);
	border: 1rpx solid #799675;
	.price-label {
		color: #799675;
	}
}
</style>
