<template>
    <view class="content">
		<view class="top">
			<view class="upload" @click="chooseAvatar">
				<u-icon class="icon" name="plus-circle" size="80" color="#999999"></u-icon>
			</view>
			<view class="check">
				已选{{checkList.length}}/24
			</view>
		</view>
		<view style="border: 1rpx dashed #ccc;opacity: 0.3;margin-top: 230rpx;"></view>
		<view class="img">
			<block v-for="(item,index) in imgList" :key="index">
				<view class="imgItem" @click="changeImg(item,index)">
					<image :src="item.url" mode=""></image>
					<u-icon v-if="item.check===1" class="icon" name="checkmark-circle-fill" color="#2979FF" size="50"></u-icon>
				</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:24,
			imgList:[
				{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/1.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/2.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/swiper/3.jpg",check:0},
				{url:"https://cdn.uviewui.com/uview/common/logo.png",check:0},
			],
			checkList:[]
		}
    },
	onLoad(){//代替 vue 里面的 created
		// 监听从裁剪页发布的事件，获得裁剪结果
		uni.$on('uAvatarCropper', path => {
			this.avatar = path;
			// 可以在此上传到服务端
			uni.uploadFile({
				url: 'http://www.example.com/upload',
				filePath: path,
				name: 'file',
				complete: (res) => {
					console.log(res);
				}
			});
		})
	},
	onReady() {//代替 vue 里面的 mounted
	},
    methods: {
		confirm(){//确定提交
			if(this.checkList.length<this.maxImg){
				uni.showModal({title: '提示',content: '相册规格'+this.maxImg+"张,请按照标准选择确定",});
			}else{
				this.$u.route({
					url:"pages/vlog/pictureFormat/pictureFormat"
				})
			}
			
		},
		del(){//删除图片
		},
		changeImg(item,index){//选择图片
			if(item.check===0){
				 if(this.checkList.length<this.maxImg){ 
					item.check=1;
					this.checkList.push(index)
				 }else{
					uni.showModal({title: '提示',content: '最多选取'+this.maxImg+"张",});
				 }
			}else{
				 item.check=0;
				 this.checkList.splice(this.checkList.indexOf(index),1)
			}
		},
		chooseAvatar() {
			// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
			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;
			.upload{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: 150rpx;height: 60rpx;line-height: 60rpx;margin-top: 70rpx;margin-left: 200rpx;}
		}
		.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: 10rpx;right: 10rpx;}
			}
		}
		.bottom{position: fixed;bottom: 0;width: 100%;height: 80rpx;line-height: 80rpx; right: 0;display: flex;justify-content: space-around;background-color: #fff;align-items: center;
			view{width: 35%;border-radius: 10rpx;height: 60rpx;line-height: 60rpx;}
			.del{background: #ccc;}
			.confirm{background-color: #FFE600;}
		}
	}
</style>