<template>
	<view>
		<view class="photo">
			<view class="photo_con" v-for="item in imgList" :key="item.id">
				<view class="collect flexC" @click="getCollect(item)">
					<image src="../../static/imgs/ph_collected.png" v-if="item.like"></image>
					<image src="../../static/imgs/ph_collect.png" v-else></image>
				</view>
				<image :src="item.thumbnail" class="photo_img" @click="previewImg($event, item)" ></image>
			</view>
		</view>
	</view>
</template>

<script>
import * as apis from '../../api/album.js';
export default {
	data() {
		return {
			imgList: [], //照片列表
			title: '', //当前页面标题
			params: {
				//获取列表传的参数
				id: '',
				activity_id: '',
				page_index: 1,
				page_size: 20
			},
			pages: '', //总页数
			preList: [] ,//要放大的图片列表,
			type: 0
		};
	},
	onLoad(options) {
		this.title = options.title;
		this.params.id = options.id;
		this.params.activity_id = options.activity_id;
		this.type = options.type ? Number(options.type) : 0
		this.getPhotos();
	},
	onShow() {
		uni.setNavigationBarTitle({
			title: this.title
		});
	},
	onReachBottom() {
		this.more();
	},
	methods: {
		/*
		*收藏照片 
		* 
		*/
		getCollect(item) {
			if (item.like == true) {
				uni.showModal({
					content: '您已收藏过，请勿重复收藏',
					showCancel: false
				});
				return false;
			}
			let { id, activity_id, img_type } = item;
			apis.getCollect({
				id,
				activity_id,
				img_type
			}).then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '收藏成功'
					});
					let list = this.imgList;
					list.map(i => {
						if (item.id == i.id) {
							this.$set(i, 'like', true);
						}
					});
					this.imgList = list;
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		//点击图片放大
		previewImg(e, item) {
			uni.previewImage({
				current: item.img_url, //当前图片地址
				urls: this.preList //所有要预览的图片的地址集合 数组形式
			});
		},
		/*获取照片列表
		 * @params id  当前相册id
		 * @params activity_id  当前活动id
		 * @params page_index 第几页
		 * @params page_size  每页显示数量
		 */
		getPhotos() {
			this.params.page_index = 1;
			let { id, activity_id, page_index, page_size } = this.params;
			apis[this.type ? 'getImgByClassify' : 'albumDetail']({
				id,
				activity_id,
				page_index,
				page_size
			}).then(res => {
				if (res.code == 200) {
					this.imgList = res.data.list;
					this.pages = Math.ceil(res.data.total / this.params.page_size);
					let list = res.data.list;
					if (this.preList.length < list.length) {
						list.map(i => {
							this.preList.push(i.img_url);
						});
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		},
		//上拉加载更多
		more() {
			this.params.page_index++;
			if (this.params.page_index > this.pages) {
				uni.showToast({
					title: '没有更多啦~',
					icon: 'none'
				});
				return false;
			}
			let { id, activity_id, page_size, page_index } = this.params;
			apis[this.type ? 'getImgByClassify' : 'albumDetail']({
				id,
				activity_id,
				page_index,
				page_size
			}).then(res => {
				if (res.code == 200) {
					if (res.data.list.length > 0) {
						this.imgList = this.imgList.concat(res.data.list);
						let list = res.data.list;
						if (this.preList.length < this.imgList.length) {
							list.map(i => {
								this.preList.push(i.img_url);
							});
						}
					}
				} else {
					uni.showModal({
						content: res.message || '请求失败',
						showCancel: false
					});
				}
			});
		}
	}
};
</script>

<style lang="scss">
.photo {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	.photo_con {
		width: 33.33%;
		text-align: center;
		position: relative;
		.photo_img {
			margin: 5rpx;
			height: 236rpx;
			width: 236rpx;
			border-radius: 24rpx;
		}
		.collect {
			width: 58rpx;
			height: 49rpx;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 24rpx 0 24rpx 0;
			bottom: 16rpx;
			right: 9rpx;
			z-index: 9999;
			image {
				height: 30rpx;
				width: 30rpx;
			}
		}
		.active {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
