<template>
	<view class="uni-page">
		<u-navbar placeholder :autoBack="true" bgColor="#fff0e7" title="编辑书信" />
		<view class="letter-content">
			<textarea input-mode="multiline" :maxlength="-1" v-model="letterData" :autoHeight="true" placeholder="请输入内容"
				border="bottom"></textarea>
		</view>
		<view class="signature-time">
			<view class="signature">
				<!-- <u--textarea :maxlength="10" class="signature-input" v-model="letterAthor" placeholder="请输入署名"
					border="bottom"></u--textarea> -->
				<u--input style="white-space: pre-wrap;" inputAlign="center" placeholder="请输入署名" v-model="letterAthor"
					border="bottom" :customStyle="{
					width:'200rpx'
					}">
				</u--input>
			</view>
			<view class="time">
				<!-- {{typeof new Date}} -->
				{{ currentTime }}
			</view>
		</view>
		<view class="img-list-box">
			<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="10"
				:previewFullImage="true">
				<view class="upload-box">
					<view class="plus-circle">
						<u-icon name="plus-circle" color="#e49458" size="35"></u-icon>
						<view style="margin-top:10rpx;">
							添加照片
						</view>
					</view>
				</view>
			</u-upload>
		</view>
		<view class="photo-explain">
			<SelectProductionMethod @selectPlan="selectPlan" @close="isShowNextBox=false" v-if="isShowNextBox">
			</SelectProductionMethod>
			说明：照片会相纸打印随信一起寄出，首张照片免费，多出部分每张费用按以下顺序改变
			{{$store.photoPrice?$store.photoPrice.photo_artificial:''}}
			超出的按最后一个价格延续！
		</view>
		<view class="bottom-button">
			<view class="to-view-button" @click="toView">
				<u-icon name="eye" color="#222222" size="28" style="margin-right:10px;"></u-icon>书信预览
			</view>
			<view class="nextstep-button" @click="toNextStep">
				下一步
			</view>
		</view>

	</view>
</template>

<script>
	import {
		uploadFile
	} from '@/request/api.js'
	import {
		getPhotoPriceApi
	} from '@/request/wm.js'
	import SelectProductionMethod from '@/components/SelectProductionMethod/SelectProductionMethod.vue'
	export default {
		components: {
			SelectProductionMethod
		},
		data() {
			return {
				letterData: '',
				letterAthor: '',
				fileList: [],
				isShowNextBox: false,
				currentTime: (new Date).$formatDate()
			}
		},
		onLoad(opt) {
			if (opt.clear) {
				this.$set(this.$store, 'letterInfo', {})
			}
			this.getPhotoPrice()
			this.letterData = this.$store.letterInfo.message
			console.log(this.letterData);
		},
		methods: {
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			async afterRead(event) {
				console.log(event);
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length;
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})

				let res = await uploadFile(event.file[0].url);
				console.log(res);
				if (res.data.code === 1) {
					let item = this.fileList[fileListLen];
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: res.data.data.fullurl
					}))
				}
			},
			toView() {
				// 这里要发送请求获取预览的拦截
				// uni.showLoading({
				// 	title: '加载中'
				// });
				this.$store.letterViewInfo.message = this.letterData;
				this.$store.letterViewInfo.letterAthor = this.letterAthor;
				this.$store.letterViewInfo.currentTime = this.currentTime;
				this.$store.letterViewInfo.fileList = this.fileList;
				console.log(this.$store.letterViewInfo);
				uni.navigateTo({
					url: "pages/letter-view/letter-view",
				})
				// this.isViewLetter = true
			},

			toNextStep() {
				this.isShowNextBox = true
			},
			async getPhotoPrice() {
				let {
					data
				} = await getPhotoPriceApi()
				this.$set(this.$store, 'photoPrice', data.data)
				this.$store.productionType.forEach(item => {
					console.log(data.data[item.key],'111111111111111');
					let price = data.data[item.key]?.find(price => {
						if (+price > 0) {
							return true
						}
					})
					item.price = price || 0
				})
				console.log(this.$store.productionType, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaa');
			},
			selectPlan(item) {
				this.$store.letterInfo.message = this.letterData;
				this.$store.letterInfo.mail_type = item.id
				this.$store.letterInfo.thumb = this.fileList.map(item => {
					return item.url
				})
				this.$store.letterInfo.affix = this.letterAthor

				uni.navigateTo({
					url: 'pages/confirmOrder/confirmOrder?plan=' + item.id,
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.uni-page {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.letter-content {
		padding: 30rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 20rpx;
		height: fit-content;
		flex: 1;
		margin-top: 20rpx;

		textarea {
			// min-height: 300rpx;
			width: 100%;
			background-color: transparent;
		}
	}

	::v-deep.signature-input {
		max-width: 300rpx;
		width: 300rpx;
		text-align: center;
		height: 30rpx;
		border-bottom: unset;
		// text-align: center;
		background-color: transparent;

		textarea {
			height: 30rpx;
		}

	}

	.signature-time {
		margin-top: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: end;
		text-align: center;
		align-items: flex-end;
		;

		.time,
		.signature {
			width: 300rpx;
			text-align: center;
			display: flex;
			justify-content: center;
		}

		>view {
			width: fit-content;
			// width: 250px;
			text-align: center;
		}
	}

	.upload-box {
		width: 150rpx;
		height: 150rpx;
		border-radius: 20rpx;
		background-color: #fffdfc;
		color: #CE7A2C;
		font-size: 25rpx;
		font-weight: 500;
	}

	.plus-circle {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.photo-explain {
		height: 100rpx;
		margin-top: 20rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #9f9a97;
		margin-bottom: 150rpx;
	}

	.bottom-button {
		position: fixed;
		bottom: 10rpx;
		width: calc(100% - 40rpx);
		display: flex;
		z-index: 11;
	}

	.to-view-button {
		width: 459rpx;
		min-height: 98rpx;
		background-color: #ffe4d9;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.nextstep-button {
		flex: 1;
		background: linear-gradient(to bottom right, #e8b648, #e08745);
		min-height: 98rpx;
		border-radius: 20rpx;
		color: white;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.nextstep-button:hover {
		background-color: black;
	}
</style>