<template>
	<view class="container">
		<block v-for="(item, index) in detailData">
			<view>
				<view 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 0;"
								/>
							</block>
						</view>
						<text
							style="display: flex; justify-content: flex-end; color: #969799; font-size: 12px;"
						>
							x{{ item.number }}
						</text>
					</view>
				</view>
				<u-line v-if="detailData.length > 1" color="#e8e8e8" />
			</view>
		</block>
		<view class="content-footer">
			<u-button
				shape="circle"
				type="error"
				size="mini"
				style="margin-right: 30;"
				@tap="toIndex"
			>
				返回首页
			</u-button>
			<view>
				<u-button shape="circle" size="mini" @tap="generateQuote">生成报价</u-button>
				<u-button shape="circle" size="mini" style="margin-left: 20rpx;" @tap="download">
					下载pdf
				</u-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad, onBackPress } from '@dcloudio/uni-app';
import config from '@/utils/config';
import { useCurrentStore } from '@/store/useStore';
import { orderDetail } from '@/api/index';

let baseUrl = config.baseUrl;
let currentStore = useCurrentStore();
let enclosure = ref(''); // pdf key值
let detailData = ref();
let type = ref();
let orderId = ref();

onLoad((options: any) => {
	type.value = options.type;
	console.log(type.value, 'type.value ');
	orderDetail({
		orderId: options.orderId,
	}).then((res: any) => {
		if (res.data.code === 200) {
			enclosure.value = res.data.data.orderInfo.enclosure;
			detailData.value = res.data.data.orderGoods;
			orderId.value = res.data.data.orderInfo.id;
		}
		console.log(res, '订单详情信息');
	});
	// initPdf(options.orderId); // 查询pdf详细资料
});

// 返回首页
let toIndex = () => {
	uni.reLaunch({
		url: '../index/index',
	});
};

// 生成报价
let generateQuote = () => {
	uni.navigateTo({
		url: `./quotation?orderId=${orderId.value}`,
	});
};

// 下载pdf
let download = () => {
	uni.showLoading({
		title: '正在请求数据',
	});
	uni.request({
		url: baseUrl + '/wx/storage/download/' + enclosure.value,
		responseType: 'arraybuffer',
		success: (res: any) => {
			uni.hideLoading();
			if (res.data) {
				let blob = new Blob([res.data]);
				let downloadElement = document.createElement('a');
				let href = window.URL.createObjectURL(blob); //创建下载的链接
				downloadElement.href = href;
				downloadElement.download = enclosure.value + '.pdf'; //下载后文件名
				document.body.appendChild(downloadElement);
				downloadElement.click(); //点击下载
				document.body.removeChild(downloadElement); //下载完成移除元素
				window.URL.revokeObjectURL(href); //释放掉blob对象
			}
		},
		fail(err: any) {
			console.log(err);
		},
	});
};

// 获取下载pdf信息
// let initPdf = (orderId: number) => {
// 	getOrderPdf({ orderId }).then((res: any) => {
// 		if (res.data.code === 200) {
// 			console.log(res, 'pdf');
// 		}
// 	});
// };

onBackPress((options: any) => {
	if (options.from === 'navigateBack') {
		return false;
	}
	if (type.value === 'profile') {
		uni.redirectTo({
			url: '../order/orderList?showType=' + currentStore.current,
		});
	} else if (type.value === 'cart') {
		uni.reLaunch({
			url: '../cart/index',
		});
	} else if (type.value === 'goods') {
		uni.reLaunch({
			url: '../index/index',
		});
	}
	return true;
});
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	margin: 16rpx 32rpx;
	background-color: #fff;
	.details {
		width: 100%;
		padding: 16rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.img {
			margin-right: 20rpx;
		}

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

		.right {
			width: 80%;

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

	.content-footer {
		margin-top: 50rpx;
		padding: 50rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.footer {
	position: fixed;
	bottom: 0;
	z-index: 99;
	width: 100%;
	height: 100rpx;
	background-color: #fff;
	padding: 0 32rpx;
	line-height: 100rpx;
	font-size: 30rpx;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
}
</style>
