<template>
	<view class="uni-page">
		<u-navbar placeholder :autoBack="true" bgColor="#fff0e7" title="XX书信-手写版"></u-navbar>
		<view class="content-main">
			<view class="no-picture-chunk" v-if="fileList.length<1" @click="uploadImg">
				<view class="picture-chunk-center">
					<u-icon name="plus-circle" color="#E49458" size="40"></u-icon>
					<text style="color: #e49458; font-size: 30rpx">添加照片</text>
				</view>

			</view>
			<u-grid v-else :border="false" class="picture-chunk" :col="2">
				<u-grid-item v-for="(file,index) in fileList" :key="index">
					<view class="" style="padding: 20rpx 20rpx;">
						<image @click="$showImg(fileList.map(item=>item.url),index)"
							style="object-fit: cover; width: 335rpx;height: 278rpx; border-radius: 40rpx;overflow: hidden;"
							:src="file.url" alt="">
					</view>
				</u-grid-item>
				<u-grid-item>
					<view class="picture-chunk-center"
						style="object-fit: cover; width: 335rpx;height: 278rpx; border-radius: 40rpx;overflow: hidden;"
						@click="uploadImg">
						<u-icon name="plus-circle" color="#E49458" size="40"></u-icon>
						<text style="color: #e49458; font-size: 30rpx">添加照片</text>
					</view>
				</u-grid-item>
			</u-grid>
			<view class="upload-explain">
				<view class="upload-explain-item">
					<view class="dot"> </view>
					<text class="explain-text">请务必将信纸铺平，无褶皱</text>
				</view>
				<view class="upload-explain-item">
					<view class="dot"> </view>
					<text class="explain-text">
						请在光线充足的条件下拍照，避免阴影及画面清晰</text>
				</view>
				<view class="upload-explain-item">
					<view class="dot"> </view>
					<text class="explain-text"> 请尽量正面90°角度拍照，不要倾斜</text>
				</view>
			</view>
		</view>
		<view class="floor-explain">
			说明：照片会相纸打印随信一起寄出，首张照片免费，多出部分每张费用按以下顺序改变
			{{$store.photoPrice?$store.photoPrice.photo_write.join('元>'):''}}，
			超出的按最后一个价格延续！
		</view>
		<SelectProductionMethod @selectPlan="selectPlan" @close="isShowNextBox=false" v-if="isShowNextBox">
		</SelectProductionMethod>
		<view class="floor-button" v-if="fileList.length>0&&canShowToolbar">
			<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 SelectProductionMethod from "@/components/SelectProductionMethod/SelectProductionMethod.vue";
	import {
		uploadFile
	} from "@/request/api.js";
	import {
		getPhotoPriceApi
	} from "@/request/wm.js";
	export default {
		components: {
			SelectProductionMethod,
		},
		data() {
			return {
				fileList: [],
				isShowNextBox: false,
				canShowToolbar: false,
			};
		},
		onLoad() {
			this.getPhotoPrice();
		},
		methods: {
			async uploadImg() {
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量
					success: async (res) => {
						let lists = res.tempFilePaths;
						let fileListLen = this.fileList.length;
						lists.map((item) => {
							this.fileList.push({
								...item,
								status: "uploading",
								message: "上传中",
							});
						});
						let {
							data
						} = await uploadFile(lists[0]);
						if (data.code === 1) {
							let item = this.fileList[fileListLen];
							this.fileList.splice(
								fileListLen,
								1,
								Object.assign(item, {
									status: "success",
									message: "",
									url: data.data.fullurl,
								})
							);
							this.canShowToolbar = true
						}
					},
					fail: (err) => {
						console.log("选择照片失败", err);
					},
				});
			},
			toView() {
				// 这里要发送请求获取预览的拦截
				// this.$store.letterViewInfo.message = this.letterData;
				// this.$store.letterViewInfo.letterAthor = this.letterAthor;
				// this.$store.letterViewInfo.currentTime = this.currentTime;
				this.$store.letterViewInfo.fileList = this.fileList.map(item => item.url);
				uni.navigateTo({
					url: "pages/letter-view/letter-view",
				});
				// this.isViewLetter = true
			},
			toNextStep() {
				this.isShowNextBox = true;
			},
			async getPhotoPrice() {
				let {
					data
				} = await getPhotoPriceApi();
				// this.$mutations.setPhotoPrice(data.data)
				this.$set(this.$store, "photoPrice", data.data);
				// console.log(this.$store.photoPrice,'111');
				// console.log(data);
			},
			selectPlan(item) {
				let data = {
					message: "",
					thumb: this.fileList.map((item) => item.url),
					send_address: "",
					take_address: "",
					affix: "",
					remark: "",
					mail_type: item.id,
					isMmanual: true,
				};
				this.$set(this.$store, "letterInfo", data);
				uni.navigateTo({
					url: "pages/confirmOrder/confirmOrder",
				});
			},
		},
	};
</script>

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

		.content-main {
			flex: 1;
			overflow: auto;
			// height: 100%;
		}
	}

	.no-picture-chunk {
		margin: 30rpx 0;
		height: 496rpx;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.5);
		padding: 43rpx;
		border-radius: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.picture-chunk-center {
		margin-bottom: 20rpx;
		background-color: rgba(255, 255, 255, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.picture-chunk {
		.picture-chunk-center {
			width: 335rpx;
			height: 278rpx;
			border-radius: 40rpx;
			background-color: rgba(255, 255, 255, 0.5);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}

	.upload-explain {
		padding-left: 30rpx;

		.upload-explain-item {
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;

			.dot {
				width: 12rpx;
				height: 12rpx;
				background-color: #999796;
				margin-right: 14rpx;
				border-radius: 50%;
			}

			.explain-text {
				flex: 1;
				font-size: 26rpx;
				opacity: 0.5;
			}
		}
	}

	.floor-explain {
		font-size: 26rpx;
		font-weight: 400;
		color: #222222;
		text-align: center;
		margin-bottom: 20rpx;
		opacity: 0.7;
	}

	.floor-button {
		display: flex;

		.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;
		}
	}
</style>