<template>
	<view class="app-container">
		<view class="details">
			<view class="">
				<u-button type="primary" size="mini" style="margin: 0;" @tap="reQuote">
					重新报价
				</u-button>
				<u-button type="primary" size="mini" style="margin: 0 0 0 20rpx; " @tap="downXLSX">
					下载xlsx
				</u-button>
			</view>
			<text class="quotation-details" @tap="show = true">报价详情</text>
		</view>
		<view style="display: flex; justify-content: space-between; margin-top: 20rpx;">
			<h4>总金额：￥{{ totlePirce }}</h4>
			<h4>含税总金额：￥{{ taxTotlePirce }}</h4>
		</view>
		<view class="content">
			<view v-for="(item, index) in quotationData?.items" class="item">
				<h4>{{ item.goodsName }}</h4>
				<view
					style="display: flex; flex-direction: row; align-items: center; margin-bottom: 10rpx;"
				>
					<text>重新设置单价：</text>
					<u-input
						v-model="item.price"
						type="number"
						height="50"
						placeholder="请输入单价"
						style="width: 200rpx;"
						@input="priceInput($event, index)"
					/>
				</view>
				<view style="margin-bottom: 10rpx; display: flex; justify-content: space-between;">
					<view class="">
						<view style="margin-bottom: 10rpx;">
							当前金额：￥{{ item.totalPrice.toFixed(2) }}
						</view>
						<view>当前含税金额：￥{{ item.totalPriceTex.toFixed(2) }}</view>
					</view>
					<u-number-box
						v-model="item.number"
						:input-width="60"
						:input-height="30"
						:min="1"
						:index="index"
						@change="valChange"
					></u-number-box>
				</view>
				<view style="margin-bottom: 10rpx;">
					商品详情：{{ item.remarks === '[]' ? '无' : item.remarks }}
				</view>
				<u-line color="#f0f0f0" />
			</view>
		</view>
	</view>
	<u-popup v-model="show" mode="center" closeable width="80%" height="70%">
		<h3 style="padding: 30rpx; text-align: center;">报价详情</h3>
		<u-cell-group>
			<block v-for="(item, index) in quotationList" :key="index">
				<u-cell-item
					icon=""
					:title="item.title"
					:value="item.value"
					:arrow="false"
				></u-cell-item>
			</block>
		</u-cell-group>
	</u-popup>

	<u-modal
		v-model="showModel"
		:content="content"
		@confirm="modelConfirm"
		@cancel="modelCancel"
		showCancelButton
	></u-modal>
</template>

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

let baseUrl = config.baseUrl;
let orderId = ref();
let quotationData = ref();
let quotationList = ref();
let tax = ref();
let content = ref('确认重新报价？');
let show = ref(false);
let showModel = ref(false);
onLoad((options: any) => {
	orderId.value = options.orderId;
	getTax().then((res: any) => {
		if (res.data.code === 200) {
			tax.value = Number(res.data.data.mall_tax_rate) * 0.01;
		}
	});
	init()
});

// 总价格
let totlePirce: any = computed(() => {
	let totlePic = 0;
	if (quotationData.value) {
		quotationData.value.items.map((item: any) => {
			totlePic += Number(item.totalPrice);
		});
	}
	return totlePic.toFixed(2);
});

// 含税总价格
let taxTotlePirce = computed(() => {
	let taxTotlePic = Number(totlePirce.value) + Number(totlePirce.value) * tax.value;
	return Number(taxTotlePic).toFixed(2);
});

let reQuote = () => {
	content.value = '确认重新报价？';
	showModel.value = true;
};

let downXLSX = () => {
	content.value = '如要获取最新xlsx，请点击取消，重新报价后下载';
	showModel.value = true;
};

// 重新报价
let modelConfirm = () => {
	if (content.value === '确认重新报价？') {
		fillQuotation(quotationData.value).then((res: any) => {
			if (res.data.code === 200) {
				init()
				showModel.value = false;
			}
		});
	} else {
		uni.downloadFile({
			url: baseUrl + '/wx/quotation/download?orderId=' + orderId.value,
			header: {
				Authorization: uni.getStorageSync('token'),
				'Content-Type': 'application/octet-stream;charset=UTF-8',
			},
			success: (res: any) => {
				let downloadElement = document.createElement('a');
				downloadElement.href = res.tempFilePath;
				downloadElement.download = orderId.value + '.xlsx'; //下载后文件名
				document.body.appendChild(downloadElement);
				downloadElement.click(); //点击下载
				document.body.removeChild(downloadElement); //下载完成移除元素
				window.URL.revokeObjectURL(res.tempFilePath); //释放掉blob对象
			},
		});
	}
};

let modelCancel = () => {
	showModel.value = false;
};

// 数量变化处理
let valChange = (val: any) => {
	quotationData.value.items[val.index].number = val.value;

	quotationData.value.items[val.index].totalPrice =
		quotationData.value.items[val.index].number * quotationData.value.items[val.index].price;

	quotationData.value.items[val.index].totalPriceTex =
		quotationData.value.items[val.index].totalPrice * tax.value +
		quotationData.value.items[val.index].totalPrice;
};

// 单价变化处理
let priceInput = (val: any, index: number) => {
	quotationData.value.items[index].price = val;

	quotationData.value.items[index].totalPrice =
		Number(quotationData.value.items[index].number) * val;

	quotationData.value.items[index].totalPriceTex =
		quotationData.value.items[index].totalPrice * tax.value +
		quotationData.value.items[index].totalPrice;
};

let init = () => {
	quotationInitAgain({ orderId: orderId.value }).then((res: any) => {
		if (res.data.code === 200) {
			quotationData.value = res.data.data;
			let data = quotationData.value.quotation;
			quotationList.value = [
				{ title: '发货人', value: data.attend },
				{ title: '发货联系电话', value: data.tel },
				{ title: '发货email', value: data.email },
				{ title: '发货地址', value: data.addr },
				{ title: '收货公司名称', value: data.toCust },
				{ title: '收货人', value: data.quotationAttend },
				{ title: '收货email', value: data.quotationEmail },
				{ title: '收货联系电话', value: data.quotationTel },
				{ title: '交货日期', value: data.deliveryDate },
				{ title: '收货地址', value: data.deliveryAddr },
				{ title: '订单号', value: data.noOrder },
				{ title: '付款方式', value: data.pay },
				{ title: '保修', value: data.guarantee },
				{ title: '备注', value: data.remarks },
			];
		}
	});
};

// onBackPress((options: any) =>{
// 	if(options.from === 'navigateBack') {
// 		return false
// 	}
// })
</script>

<style lang="scss" scoped>
.app-container {
	background-color: #fff;
	padding: 20rpx;
	.details {
		display: flex;
		justify-content: space-between;
	}
	.quotation-details:hover {
		color: #2979ff;
	}
	.content {
		margin-top: 30rpx;
		.item {
			margin-top: 30rpx;
		}
	}
}
</style>
