<template>
	<view class="box">
		<image :src="item.cover_url" mode="widthFix" class="box_top" />
		<view class="box_nav">
			<view class="title">
				{{  item.travel_name }}
			</view>
			<view class="little flex">
				<image src="../../static/img/time.png" mode="widthFix" style="width: 20rpx;" />
				<text>{{  item.time }}</text>
			</view>
			<view class="little flex">
				<image src="../../static/img/gps.png" mode="widthFix" style="width: 20rpx;" />
				<text>全国</text>
			</view>
			<view class="tab flex">
				<view class="tab_title flexC" :class="index == active ? 'active':''" v-for="(item, index) in tabList" :key="index" @click="active = index, getInfo()">
					<view style="margin-bottom: 8rpx;">{{ item }}</view>
					<view :class="index == active ? 'line1':'line2'" />
				</view>
			</view>
			<view v-show="active == 0" class="images">
				<view class="images_item" v-for="(item, index) in imageList" :key="index">
					<!-- <image v-show="item.cover && item.cover.thumbnail" :src="item.cover && item.cover.thumbnail" mode="aspectFill" @click="getDetail(item)" /> -->
					<image v-show="item.cover" :src="item.cover" mode="aspectFill" @click="getDetail(item)" />
					<view v-show="!item.cover" class="noCover" @click="getDetail(item)">
						<image src="../../static/img/photo.png" mode="widthFix"></image>
					</view>
					<view class="title">
						{{ item.image_name }}
					</view>
					<view class="num">
						{{ item.total }}张
					</view>
				</view>
			</view>
			<view v-show="active == 1" class="videos">
				<view class="videos_item" v-for="(item, index) in videoList" :key="index">
					<video v-if="active == 1" :src="item.img_url" :poster="item.img_url + '?vframe/jpg/offset/3'"></video>
					<view class="title">
						{{ item.file_name }}
					</view>
				</view>
			</view>
		</view>
		<view class="fixed flexC">
			<image src="../../static/img/user.png" mode="widthFix"></image>
			<view class="font" @click="getUser">
				我的
			</view>
		</view>
	</view>
</template>

<script>
	import { TravelImageList, GetFolder } from '../../api/index.js';
	export default {
		data() {
			return {
				item: {},
				tabList: ['图片', '视频'],
				active: 0,
				imageList: [],
				videoList: []
			}
		},
		onLoad(option) {
			this.item = JSON.parse(decodeURIComponent(option.item))
			if (this.item.id){
				this.getInfo()
			}
		},
		methods: {
			getUser() {
				uni.navigateTo({
					url: './user?id=' + this.item.id
				})
			},
			getInfo() {
				if (this.active == 0) {
					GetFolder({ type: 0, id: this.item.id }).then(res => {
						if (res.code === 200) {
							this.imageList = res.data.list
						} else {
							uni.showToast({ title: res.message || '获取列表失败', icon: 'none' })
						}
					})
				} else {
					GetFolder({ type: 1, id: this.item.id }).then(res => {
						if (res.code === 200) {
							this.videoList = res.data.list
						} else {
							uni.showToast({ title: res.message || '获取列表失败', icon: 'none' })
						}
					})
				}
			},
			getDetail(item) {
				if (!item.total) {
					uni.showToast({ title: '该相册没有照片', icon: 'none' })
					return
				}
				uni.navigateTo({
					url: '../picture/detail?title=' + item.image_name + '&id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	* { touch-action: pan-y; }
	.box {
		&_top {
			width: 100%;
			height: 300rpx;
			background-color: #707070;
		}
		&_nav {
			padding: 16rpx 24rpx 0 24rpx;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
			.liulan {
				font-size: 26rpx;
				margin-bottom: 24rpx;
				color: #666;
				text {
					color: #3D6EF6;
					font-weight: bold;
				}
			}
			.little {
				font-size: 22rpx;
				color: #999999;
				margin-bottom: 6rpx;
				text {
					margin-left: 16rpx;
				}
			}
			.tab {
				margin: 32rpx 0;
				.active {
					color: #3D6EF6;;
				}
				&_title {
					margin-right: 40rpx;
					font-size: 30rpx;
					font-weight: bold;
					text-align: center;
					.line1 {
						width: 24rpx;
						height: 6rpx;
						background: #3D6EF6;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}
					.line2 {
						width: 24rpx;
						height: 6rpx;
					}
				}
			}
			.images {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				.noCover {
					width: 340rpx;
					height: 340rpx;
					background-color: #e6e6e6;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					text-align: center;
					line-height: 420rpx;
					image {
						width: 100rpx;
					}
				}
				&_item {
					margin-bottom: 24rpx;
					image {
						width: 340rpx;
						height: 340rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
					.title {
						font-size: 32rpx;
						font-weight: bold;
						margin: 24rpx 0 4rpx 0;
					}
					.num {
						font-size: 28rpx;
						color: #999;
					}
				}
			}
			.videos {
				padding-bottom: 1rpx;
				&_item {
					margin-bottom: 40rpx;
					video {
						width: 100%;
						height: 396rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
					}
					.title {
						margin-top: 24rpx;
						font-size: 32rpx;
						font-weight: bold;
						text-align: center;
					}
				}
				
			}
		}
	}
	.fixed {
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
		// text-align: center;
		// line-height: 104rpx;
		background: #3D6EF6;
		position: fixed;
		right: 24rpx;
		bottom: 40rpx;
		color: #fff;
		z-index: 100;
		font-size: 22rpx;
		image {
			margin: 12rpx 0 3rpx 0;
			width: 42rpx;
		}
	}
</style>
