<template>
	<view class="container">
		<!-- 收货地址 -->
		<view class="address" @tap="tapAddresss">
			<view class="top">
				<text>收货地址</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<view class="bottom">
				<view class="">
					<text style="margin-right: 10rpx;">{{ buyNowData?.checkedAddress.name }}</text>
					<text>{{ buyNowData?.checkedAddress.tel }}</text>
				</view>
				<text>{{ addr }}</text>
			</view>
		</view>
		<!-- 商品详情 -->
		<view v-for="(item, index) in buyNowData?.checkedGoodsList" :key="item.id" class="details">
			<u-image
				width="140rpx"
				height="200rpx"
				:src="item.picUrl?.split('http').length > 1 ? item.picUrl : baseUrl + item.picUrl"
				class="img"
			></u-image>
			<view class="right">
				<view class="name">{{ item.goodsName }}</view>
				<view class="tag">
					<block v-for="(item1, index1) in item.specifications?.length" :key="index1">
						<u-tag
							:text="item?.specifications[index1]"
							type="info"
							size="mini"
							style="margin: 8rpx 8rpx 8rpx 0pt;"
						/>
					</block>
				</view>
				<view class="tag1">
					<block v-for="(item2, index2) in item.partList?.length" :key="index2">
						<u-tag
							:text="item?.partList[index2]"
							type="warning"
							size="mini"
							style="margin: 8rpx 8rpx 8rpx 0pt;"
						/>
					</block>
				</view>

				<view class="sum-price">
					<text></text>
					<text style="color: #969799; font-size: 12px;">x{{ item.number }}</text>
				</view>
			</view>
		</view>

		<!-- list -->
		<view class="list">
			<view class="item-list-end">
				<view class="label">订单备注</view>
				<u-input v-model="remarks" />
			</view>
		</view>

		<!-- 提交订单 -->
		<view class="footer">
			<view>
				<u-button type="error" size="medium" shape="circle" @tap="onsubmit">
					提交订单
				</u-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad, onBackPress, onShow } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';
import { checkoutCart, orderSubmit } from '@/api/index';
import config from '@/utils/config';

const baseUrl = config.baseUrl;
const buyNowId = ref();
const buyNowData: any = ref();
const remarks = ref(); // 订单备注
const type = ref('' as any); // 何种方式下单

onLoad((options: any) => {
	type.value = options.type;
	if (options.buyNowId) buyNowId.value = options.buyNowId;
	switch (type.value) {
		case 'cart':
			buyNowId.value = 0;
			initCheckoutCart(buyNowId.value, 0);
			break;
		case 'productLineCart':
			buyNowId.value = 0;
			initCheckoutCart(buyNowId.value, 2);
			break;
		case 'goods':
			initCheckoutCart(buyNowId.value, 0);
			break;
		case 'productline':
			initCheckoutCart(buyNowId.value, 2);
			break;
	}
	console.log(type.value, '.type');
});

onBackPress((options: any) => {
	if (options.from === 'backbutton' && type.value === 'productLineCart') {
		let pages = getCurrentPages(); // 当前页面
		let beforePage: any = pages[pages.length - 2]; // 上一页
		beforePage.type = 2; // 执行上一页的onLoad方法
	}
	if (options.from === 'backbutton' && type.value === 'cart') {
		let pages = getCurrentPages(); // 当前页面
		let beforePage: any = pages[pages.length - 2]; // 上一页
		beforePage.type = 0; // 执行上一页的onLoad方法
	}
});

// 地址的详细地区
const addr = computed(() => {
	let address = buyNowData.value?.checkedAddress.province +
		buyNowData.value?.checkedAddress.city +
		buyNowData.value?.checkedAddress.county +
		buyNowData.value?.checkedAddress.addressDetail
	// 防止全为null 相加为0
	return address === 0 ? '' : address;
});

// 设置地址
const tapAddresss = () => {
	uni.navigateTo({
		url: `../profile/address?cartId=${buyNowId.value}`,
	});
};

// 结算
const onsubmit = () => {
	if (uni.getStorageSync('addressId') === 0)
		return uni.showToast({
			title: '请设置收货地址',
			icon: 'none',
		});
	let types = 0;
	if (type.value === 'productline' || type.value === 'productLineCart') types = 2;
	else types = 0;
	let data: object = {
		addressId: uni.getStorageSync('addressId'),
		cartId: uni.getStorageSync('cartId'),
		couponId: uni.getStorageSync('couponId'),
		message: remarks.value,
		type: types,
	};
	// 提交订单
	orderSubmit(data).then((res: any) => {
		if (res.data.code === 200) {
			if (type.value == 'productline' || type.value == 'productLineCart') {
				uni.navigateTo({
					url: `../productLine/productLineDetails?orderId=${res.data.data.orderId}&type=${
						type.value
					}`,
				});
			} else {
				uni.navigateTo({
					url: `/pages/order/downPdf?orderId=${res.data.data.orderId}&type=${type.value}`,
				});
			}
		}
	});
};

let addressId = ref(null); // 但值为null时，显示为默认地址

// 重新选择地址时的回调
uni.$on('updataAddressId', (data: any) => {
	uni.setStorage({
		key: 'addressId',
		data: data.id,
		success() {
			addressId.value = uni.getStorageSync('addressId');
		},
	});
});
// 初始化数据
const initCheckoutCart = (cartId: number, types: number) => {
	let couponId = uni.getStorageSync('couponId');
	// let addressId = uni.getStorageSync('addressId');
	checkoutCart({
		cartId,
		couponId,
		addressId: addressId.value,
		type: types,
	}).then((res: any) => {
		if (res.data.code === 200) {
			buyNowData.value = res.data.data;
			uni.setStorage({
				key: 'addressData',
				data: res.data.data.checkedAddress,
			});
			let storage: any = {
				addressId: res.data.data.addressId,
				cartId: res.data.data.cartId,
				couponId: res.data.data.couponId,
			};
			Object.keys(storage).forEach((prop: any) => {
				const el: any = storage[prop];
				uni.setStorage({
					key: prop,
					data: el,
				});
			});
			// console.log(buyNowData.value, '购买数据');
		}
	});
};

// 更新
const init = () => {
	switch (type.value) {
		case 'cart':
			buyNowId.value = 0;
			initCheckoutCart(buyNowId.value, 0);
			break;
		case 'productLineCart':
			buyNowId.value = 0;
			initCheckoutCart(buyNowId.value, 2);
			break;
		case 'goods':
			initCheckoutCart(buyNowId.value, 0);
			break;
		case 'productline':
			initCheckoutCart(buyNowId.value, 2);
			break;
	}
};

// 防止地址选择后不会更新渲染
onShow(() => {
	init();
});
</script>

<style lang="scss" scoped>
.container {
	.address {
		width: 100%;
		padding: 20rpx 32rpx;
		border-top: 2rpx solid #e8e8e8;
		background-color: #fff;
		margin-bottom: 20rpx;

		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
		}

		.bottom {
			font-size: 24rpx;
			color: #969799;
			line-height: 36rpx;
		}
	}

	.details {
		width: 100%;
		padding: 16rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		background-color: #fff;

		.img {
			margin-right: 20rpx;
		}

		.tag {
			margin-top: 1%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}
		.tag1 {
			margin-top: 1%;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-bottom: 13%;
		}

		.right {
			width: 80%;

			.sum-price {
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.list {
		width: 100%;
		display: flex;
		background-color: #fff;
		flex-direction: column;

		.item-list {
			width: 100%;
			padding: 20rpx 32rpx;
			display: flex;
			justify-content: space-between;

			.label {
				width: 30%;
			}

			.item-price {
				color: #db3d3c;
			}
		}

		.item-list-end {
			padding: 20rpx 32rpx;
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			align-items: center;

			.label {
				width: 30%;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 32rpx;
	}
}
</style>
