<template>
	<view class="preview">
		<u-navbar title="书信预览" autoBack bg-color="transparent" placeholder></u-navbar>
		<view class="preview-content">
			<view class="preview-content-inner" style="background: url(../../static/mine/preview_bg.png) center/100% 100% no-repeat;">
				<view style="white-space: pre-wrap; line-height: 40rpx;">
					{{ detailsInfo.message }}
				</view>
				<view class="preview-image" v-if="loading && detailsInfo.thumb.length > 0">
					<image v-for="(item, index) in detailsInfo.thumb" :key="index" :src="item" style="width: 100%; min-height: 100rpx;"></image>
				</view>
				<view class="preview-ft" v-if="loading">
					<view class="name">
						{{ detailsInfo.send_address[0] }}
					</view>
					<view class="time">
						{{ detailsInfo.create_time }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getOrderDetails } from '@/request/yyf.js';
	export default {
		data() {
			return {
				content: {},
				detailsInfo: {},
				loading: false
			}
		},
		onLoad() {
			this.content = this.$Route.query;
			console.log(this.content);
			
			this.onGetDetails();
		}, 
		methods: {
			async onGetDetails() {
				const { data } = await getOrderDetails({
					id: this.content.id
				})
				console.log(data);
				if(data.code === 1) {
					this.detailsInfo = data.data;
					this.loading = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.preview {
	box-sizing: border-box;
	height: 100vh;
	padding: 30rpx 0 0 0;
	display: flex;
	flex-direction: column;
	.preview-content {
		flex: 1;
		overflow: auto;
		
		
		.preview-content-inner {
			box-sizing: border-box;
			padding: 240rpx 80rpx 140rpx;
			overflow-y: auto;
			
			font-family: caisemenghuanjingyu;
		}
		
		.preview-ft {
			// padding-top: 40rpx; 
			view {
				display: flex;
				justify-content: flex-end;
			}
		}
	}
}
</style>
