<template>
	<view id="hot-list" @click="getImg">
		<!-- <view class=" yulan" @click="getImg">
			预览大图
		</view> -->
		<scroll-view class="scroll-view_H" scroll-x="true" >
			<image src="../../static/hot_list/hotList-bg.jpg" mode="widthFix" style="width: 4236rpx;" class="bg">
				<view class="box-text">
					大卫博士卖货学位争霸赛第二十八季
				</view>
				<view class="nav">
					<view class="box-fix">
						<view class="fix-item" v-for="(item,index) in list" :key="index">
							<image :src="item.imgurl" mode="widthFix" style="width: 146rpx;" @click.stop="getID(item.id,index,0)"></image>
						</view>
					</view>
					<view class="right">
						<view class="right-box" v-for="(item,index) in headerList" :key="index">
							<view class="right-text">
								学霸
							</view>
							<view class="right-image">
								<image :src="item.imgurl" mode="widthFix" style="width: 146rpx;" @click.stop="getID(item.id,index,1)"></image>
							</view>
						</view>
					</view>
				</view>
			</image>
		</scroll-view>
		<previewImage ref="previewImage" :imgs="lists" :opacity="0.8" @longPress="longPress" :descs="descs"></previewImage>
		<previewImage ref="previewBgmage" :imgs="bgimg" :opacity="0.8" @longPress="longPress"></previewImage>
	</view>
</template>
<script>
	import { HotListRule } from "@/api.js"
	import previewImage from '@/components/kxj-previewImage.vue';
	export default {
		components: { previewImage}, //注册插件
		data() {
			return {
				list: [],
				headerList: [],
				lists:[],
				previewImage: [],
				descs:[],
				bgimg:[]
			}
		},
		onLoad() {
			let that = this;
			uni.showLoading()
			this.$ajax.get(HotListRule).then(([, { data: res }]) => {
				uni.hideLoading()
				console.log(res)
				if(res.code === 200) {
					that.list = res.data.min
					that.headerList = res.data.max
					that.lists = that.list.concat(that.headerList).map((item,index) => {
						  return item.imgurl
					})
					for(var i = 1;i<=that.lists.length;i++){
						that.descs.push('hello,我是第'+i+'名')
					}
					that.bgimg.push(res.data.main_img)
				}else{
					uni.showModal({
						content: '查看荣誉榜单失败',
						showCancel: false
					})
				}
			}).catch(() => {
				uni.hideLoading()
				uni.showModal({
					content: '查看荣誉榜单失败',
					showCancel: false
				})
			})
		},
		methods: {
			getImg() {
				this.$refs.previewBgmage.open();
			},
			// scroll() {},
			getID(id,index,type) {
				var param = index;
				if(type){
					param += this.list.length
				}
				this.$refs.previewImage.open(param); // 传入当前选中的图片地址或序号
				return; //如需测试和uni原生预览差别可注释这两行
			},
			// previewOpen(e) {
			// 	var param = e.currentTarget.dataset.src;
			// 		console.log(param);
			// 		this.$refs.previewImage.open(param); // 传入当前选中的图片地址或序号
			// 	return; //如需测试和uni原生预览差别可注释这两行
			// }
			longPress(data){
				console.log(data)
				this.$refs.previewImage.save();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bg{
		width:4236rpx!important;
		max-width: none!important;
	}

	.yulan {
		background-color: #F0AD4E;
		width: 150rpx;
		height: 50rpx;
	}
	.nav {
		position: absolute;
		left: 281rpx;
		top: 538rpx;
		display: flex;
		align-items: center;
	}
	.box {
		position: relative;
		&-text {
			position: absolute;
			width: 960rpx;
			top: 320rpx;
			left: 1624rpx;
			color: #a383f3;
			font-size: 60rpx;
		}
		// width: 3542rpx;
		// height: 1594rpx;
		&-fix {
			width: 3420rpx;
			// width: 146rpx;
			// height: 176rpx;
			// background-color: #808080;
			display: flex;
			flex-wrap:wrap;
			.fix-item {
				width: 146rpx;
				height: 176rpx;
				background-color: #808080;
				margin-right: 25rpx;
				margin-bottom: 25rpx;
			}
		}
	}
	.right {
		display: flex;
		flex-direction: column;
		&-box {
			display: flex;
			align-items: center;
			margin-bottom: 38rpx;
		}
		&-text {
			width: 60rpx;
			color: #d90d18;
			font-size: 50rpx;
			font-weight: bold;
			margin-right: 65rpx;
		}
		&-image {
			width: 146rpx;
			height: 176rpx;
			background-color: #808080;
		}
	}
</style>
