<template>
	<view class="container">
		<block v-for="res in detailData">
			<view style="margin-bottom: 20rpx; background-color: #fff;">
				<view style="width: 100%; text-align: end; padding: 20rpx 20rpx 0 0;">{{
						res.name
				}}</view>
				<block v-for="(item, index) in res.values">
					<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="res.values.length >= 1" color="#e8e8e8" />
				</block>
			</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">
					下载技术规格书
				</u-button>
			</view>
		</view>
	</view>
	<view style="height: 100rpx;"></view>
</template>

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

let store = useStore();
let baseUrl = config.baseUrl;
let enclosure = ref(''); // pdf key值
let detailData = ref([] as any);
let type = ref();
let orderId = ref();

onLoad((options: any) => {
	type.value = options.type;
	orderId.value = options.orderId;
	console.log(type.value, 'type.value');
	initOrderData(options.orderId);
});

// 返回首页
let toIndex = () => {
	uni.reLaunch({
		url: '../index/index',
		success() {
			if (type.value === 'productline') {
				store.$reset(); // 重置pinia数据
			}
		},
	});
};

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

// 下载技术规格书pdf
let download = () => {
	open(baseUrl + '/wx/storage/downloadFile/' + enclosure.value)
	// 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);
	// 	},
	// });
};

let lineNames = ref([] as any)
// 获取goodsId
let initOrderData = (orderId: number) => {
	orderDetail({ orderId }).then((res: any) => {
		if (res.data.code === 200) {
			enclosure.value = res.data.data.orderInfo.enclosure;
			let lineArr = [] as any
			res.data.data.orderGoods.map((item: any, i: number) => {
				if (item.goodsId) {
					lineArr.push(item.goodsId)
					lineNames.value.push({
						id: item.goodsId,
						name: item.goodsName
					})
				}
			});
			initProductLineMultipleDetail(lineArr)
		}
	});
};

let initProductLineMultipleDetail = (lineArr: []) => {
	getProductLineMultipleDetail(lineArr).then((res: any) => {
		if (res.data.code === 200) {
			for (const key in res.data.data) {
				lineNames.value.map((item: any) => {
					if (key == item.id) {
						detailData.value.push({
							name: item.name,
							values: res.data.data[key]
						})
					}
				})
			}
			// console.log(detailData.value, 'getProductLineMultipleDetail', lineNames.value);
		}
	})
}

// 通过type判断返回页面
onBackPress((options: any) => {
	if (type.value === 'productline') {
		if (options.from === 'navigateBack') {
			return false;
		}
		uni.switchTab({
			url: './productLine',
			success() {
				store.$reset(); // 重置pinia数据
				let pages = getCurrentPages(); //获取所有页面的数组对象
				let currPage: any = pages[pages.length - 1]; //当前页面
				uni.reLaunch({
					url: '/' + currPage.route,
				});
			},
		});
		return true;
	} else if (type.value === 'productLineCart') {
		if (options.from === 'navigateBack') {
			return false;
		}
		uni.switchTab({
			url: '../cart/index',
			success() {
				let pages = getCurrentPages(); //获取所有页面的数组对象
				let currPage: any = pages[pages.length - 1]; //当前页面
				uni.reLaunch({
					url: '/' + currPage.route,
				});
			},
		});
		return true;
	}
});
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	margin: 16rpx;
	// background-color: #fff;

	.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;
			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;
		background-color: #fff;
	}
}

.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>
