<template>
	<view class="content">
		<view class="title">
			<u-icon name="bell-fill" color="#6C8EF3"></u-icon><text style="margin-left: 20rpx;">提醒:长按拖拽排序</text>
		</view>
		<view class="top">
			<dragImg :alternateImages="alternateImages" :listData="imgList" @change="changeImgList" :columns="columns"></dragImg>
		</view>
		<view class="bottom" @click="next">
			下一步
		</view>
	</view>
</template>

<script>
	import dragImg from "../components/dragImg/dragImg.vue"
	export default {
		components:{
			dragImg
		},
		data() {
			return {
				columns:3,//每行显示几张图片
				alternateImages:[],//备选图片
				imgList: [],//已选择图片
				sortImglist:[]//排序后图片
				
			}
		},
		onLoad() { //代替 vue 里面的 created
			var allImgList=uni.getStorageSync('imgList')
			//深拷贝方式防止改变源数据
			var allImgList1=JSON.parse(JSON.stringify(allImgList))
			allImgList.forEach(item=>{//备选图片
				var obj={
					images:item.url
				}
				this.alternateImages.push(obj)
			})
			allImgList1.forEach(item=>{//已选择图片
				if(item.check===1){
					var obj={
						images:item.url
					}
					this.imgList.push(obj)
				}
			})
		},
		onReady() { //代替 vue 里面的 mounted
			this.imgList.forEach((item,index)=>{//处理数据并保存初始顺序
				let obj={
					imgName:index,
					imgUrl:item.images
				}
				this.sortImglist.push(obj)
			})
			uni.setStorageSync("sortImglist",this.sortImglist)
		},
		methods: {
			changeImgList(res) {//接收子组件传递数据更改排序
				this.sortImglist=[]
				res.listData.forEach((item,index)=>{
					let obj={
						imgName:index,
						imgUrl:item.images
					}
					this.sortImglist.push(obj)
				})
				uni.setStorageSync("sortImglist",this.sortImglist)
			},
			next(){//下一步
				this.$u.route("pages/vlog/orderPay/orderPay")
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20rpx;
		height: 100%;
		width: 100%;
		position: relative;
		.title{
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			color: #ABABAB;
			background-color: #fff;
			position: fixed;top: 0;z-index: 10;
			border-bottom: 1upx dashed #ccc;
		}
		.top{
			margin-top: 50rpx;
			margin-bottom: 100rpx;
		}
		.bottom{position: fixed;bottom: 0;width: 100%;height: 100rpx;background-color:#FFE600;right: 0;line-height: 100rpx;font-size: 32rpx;font-weight: bold;border-top-left-radius: 10rpx;border-top-right-radius: 10rpx;z-index: 10;text-align: center;}
	}
</style>
