<template>
	<view class="content">
		<view class="top" style="border-bottom: 1rpx dashed #ccc;">
			<view class="upload" @click="chooseAvatar">
				<u-icon class="icon" name="plus-circle" size="80" color="#999999"></u-icon>
			</view>
			<view class="check">
				已选{{checkList.length}}/{{maxImg}}
			</view>
		</view>
		<!-- <view style="border: 1rpx dashed #ccc;opacity: 0.3;margin-top: 230rpx;"></view> -->
		<view class="img" style="margin-top: 230rpx;">
			<block v-for="(item,index) in imgList" :key="index">
				<view class="imgItem" @click="changeImg(item,index)">
					<image :src="'http://picture.pangdly.com/'+item.url"></image>
					<image v-if="item.check===1" src="../../../static/img/vlog/icon/check.png" class="icon"></image>
				</view>
			</block>
		</view>
		<view class="bottom">
			<view class="del" @click="del">
				删除
			</view>
			<view class="confirm" @click="confirm">
				确定
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				maxImg: "", //相册规格张数
				imgList: [], //上传的图片列表
				checkList: [], //选中的图片下标
			}
		},
		onLoad(opction) { //代替 vue 里面的 created
			this.maxImg = opction.yeshu //获取相册规格

			this.imgList = uni.getStorageSync("imgList")
			this.checkList = uni.getStorageSync("checkList")

			if (this.imgList === "") {
				this.imgList = []
				uni.setStorageSync("imgList", this.imgList)
			}
			if (this.checkList === "") {
				this.checkList = []
				uni.setStorageSync("checkList", this.checkList)
			}
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				var that = this
				var	url = "https://manager.pangdly.com/"
				uni.uploadFile({ // s上传图片
					url: url + 'upload/file/newUpload',
					filePath: path,
					name: 'uploadFile',
					header: {
						'Content-Type': 'multipart/form-data;',
					},
					success: res => { //获取图片结果
						let res1 = JSON.parse(res.data)
						if (res1.code == "00") { //请求成功
							let obj = {
								url: res1.data,
								check: 0
							}
							that.imgList.push(obj)
							uni.setStorageSync("imgList", that.imgList)
						} else {
							uni.showModal({
								title: '提示',
								content: res1.message,
								showCancel: false,
							})
						}
					}
				})
			})
		},
		onReady() { //代替 vue 里面的 mounted
		},
		methods: {
			confirm() { //确定提交
				if (this.checkList.length !== this.maxImg * 1) {
					return uni.showModal({
						showCancel: false,
						title: '提示',
						content: '相册规格' + this.maxImg + "张,请按照标准选择",
					});

				}
				this.$u.route("pages/vlog/pictureFormat/pictureFormat")
			},
			del() { //删除图片
				if (this.checkList.length === 0) {
					uni.showModal({
						showCancel: false,
						title: '提示',
						content: "当前未选中任何图片!",
					});
				} else {
					uni.showModal({
						title: '提示',
						content: "确定要删除选中的图片吗?",
						success: res => {
							if (res.confirm) {
								this.checkList.forEach(item => {
									this.imgList.splice(item, 1)
								})
								this.checkList = []
								uni.setStorageSync("checkList", this.checkList)
								uni.setStorageSync("imgList", this.imgList)
							}
						}
					});
				}
			},
			changeImg(item, index) { //选择图片
				if (item.check === 0) {
					if (this.checkList.length < this.maxImg) {
						item.check = 1;
						this.checkList.push(index)
						uni.setStorageSync("checkList", this.checkList)
						uni.setStorageSync("imgList", this.imgList)
					} else {
						uni.showModal({
							showCancel: false,
							title: '提示',
							content: '最多选取' + this.maxImg + "张",
						});
					}
				} else {
					item.check = 0;
					this.checkList.splice(this.checkList.indexOf(index), 1)
					uni.setStorageSync("checkList", this.checkList)
					uni.setStorageSync("imgList", this.imgList)
				}
			},
			chooseAvatar() { //上传照片
				this.$u.route({
					url: "pages/vlog/u-avatar-cropper/u-avatar-cropper",
					params: {
						// 输出图片宽高，单位px
						destWidth: 1000,
						destHeight: 1000,
						// 裁剪框宽高，单位px
						rectWidth: 300,
						rectHeight: 300,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
		box-sizing: border-box;
		margin-bottom: 100rpx;
		text-align: center;

		.top {
			display: flex;
			position: fixed;
			top: 0;
			z-index: 10;
			background-color: #fff;
			width: 100%;
			padding-bottom: 20rpx;
			right: 0;
			.upload {
				margin-left: 20upx;
				height: 200rpx;
				width: 200rpx;
				border-radius: 20rpx;
				background-color: #ECECEC;

				.icon {
					margin-top: 60rpx;
				}
			}

			.check {
				display: inline-block;
				border-radius: 15rpx;
				background-color: #FFE600;
				width: 180rpx;
				height: 64rpx;
				line-height: 64rpx;
				margin-top: 70rpx;
				margin-left: 200rpx;
				font-size: 28upx;
				font-weight: bold;
			}
		}

		.img {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;

			.imgItem {
				width: 33.33%;
				padding: 10rpx;
				position: relative;

				image {
					width: 100%;
					height: 200rpx;
					border-radius: 10rpx;
				}

				.icon {
					position: absolute;
					top: 15rpx;
					right: 15rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.bottom {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 98rpx;
			line-height: 98rpx;
			right: 0;
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			align-items: center;

			view {
				font-size: 32upx;
				width: 35%;
				border-radius: 10rpx;
				height: 64rpx;
				line-height: 64rpx;
			}

			.del {
				background: #ccc;
			}

			.confirm {
				background-color: #FFE600;
			}
		}
	}
</style>
