<template>
	<Layout :index="-1" :banner="0" :imgs="0" :img="'/static/img/pro.jpg'" :titles="'资产中心'" :title_content="'寻找您心仪的游戏'">
		<view class="content-game bgc-02">
			<view class="content-games">
                 	<view class="select">
						<picker @change="bindPickerChange" :value="index" :range="array">
								<view class="select_year">
								  <text>{{array[index]}}</text>
								  <image class="xia" src="../static/img/index/xia.png"></image>
								</view>
							</picker>
					</view>
				<view class="content-all">
					<view class="content-nav">
						<view class="year-nav">
							<view class="nav_title"><text class="shu">|</text>发行年份</view>
							<cj-slider v-model="priceValue" :min="2010" :max="2030" :step="1" :blockWidth="25" 
							            @start="blockStart" @moving="blockMoving" @end="blockEnd" />
							<view class="years">年份:{{priceValue[0]}}-{{priceValue[1]}}</view>	
									
							<view class="sou" @tap="getGame()">搜索</view>			
						</view>
						
						<view class="year-navs">
							<view class="nav_title"><text class="shu">|</text>发行平台</view>
							 <checkbox-group @change="checkboxChange"  class="d-b-cs">
							 	<label v-for="(item, index) in gameclass" :key="String(item.id)"
							 		:class="item.checked?'game_type_active game_type':'option_default game_type'">
							 		<view class="checkboxHidden">
							 			<checkbox :value="String(item.id)" :checked="item.checked" />
							 		</view>
							 		{{item.name}}
							 	</label>
							 </checkbox-group>
						</view>
						<view class="year-navs">
							<view class="nav_title"><text class="shu">|</text>游戏类型</view>
							<checkbox-group @change="checkboxChanges"  class="d-b-cs">
								<label v-for="(item, index) in type" :key="String(item.id)"
									:class="item.checkeds?'game_type_active game_type':'option_default game_type'">
									<view class="checkboxHidden">
										<checkbox :value="String(item.id)" :checked="item.checkeds" />
									</view>
									{{item.name}}
								</label>
							</checkbox-group>
						</view>
					</view>
					<view class="content-lists">
					<view class="content-list">
						<view class="game_list" :class="{game_list2:index%3 == 1}" v-for="(item,index) in listData" :key="index" @tap="goPath('/gameDtail?id='+item.id)">
								<image class="game_img" :src="item.image[0].file_path" mode="heightFix"></image> 
								<view class="game_name">
									<view>{{item.name}}</view>
									<view class="game_status" v-if="item.is_financing==1">需要融资</view>
									<view class="game_status" v-else-if="item.is_financing==2">融资待定</view>
									<view class="game_status" v-else>无需融资</view>
								</view>
								<view class="game_spec">{{item.make_company}}</view>
						</view>
						
						<view v-if="listData.length==0" class="nocontent">
							暂无数据
						</view>
						
					</view>
							<view style="width: 100%;">
							<el-pagination background layout="prev, pager, next" :total="total" :current-page="page" :page-size="list_rows" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
							</view>	
					</view>	
					
				</view>		
			</view>
			
		</view>
	
	</Layout>
</template>

<script>
	import Layout from './part/layout.vue';
	import cjSlider from '@/components/jxs-slider/jxs-slider.vue'
	export default {
		components:{
			Layout,
			cjSlider
		},
		data(){
			return {
				 array: ['年份最新','评分最高'],
				 sort: '',
				 index:0,
				 priceValue: [2020, 2024], // 可以指定默认值
				 listData: [],
				 gameclass: [],
				 type: [],
				 page: 1,
				 list_rows: 9,
				 total:0,
				 sclass :[],
				 stype :[],
				 hasMore: true,
			}
		},
		created() {
			const width = window.innerWidth;
			const height = window.innerHeight;
			const mobileWidth = 768; // 可以根据需要调整这个值
			const isMobile = width <= mobileWidth || height <= mobileWidth;
			if(isMobile){
				this.list_rows = 30;
			}
			this.getGame();
			this.getTypeList();
		},
		beforeDestroy() {
		},
		onPullDownRefresh() {
		    this.page = 1;
		    this.listData = [];
		    this.getGames();
		  },
		  onReachBottom() {
		    if (this.hasMore) {
		      this.page += 1;
		      this.getGames();
		    }
		  },
		methods:{
			/*每页多少条*/
			handleSizeChange(val){
				this.list_rows = val;
				this.getGame();
			},
			/*选择第几页*/
			handleCurrentChange(val){
				this.page = val;
				this.getGame();
			},
			// 多选题
			checkboxChange(e) {
				var items = this.gameclass,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(String(item.id))) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				this.stype = values.sort((a, b) => a - b);//将其排个序arr.sort((a, b) => a - b); 类型
				console.log(this.stype);
			},
			checkboxChanges(e) {
				var items = this.type,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(String(item.id))) {
						this.$set(item, 'checkeds', true)
					} else {
						this.$set(item, 'checkeds', false)
					}
				}
				this.sclass = values.sort((a, b) => a - b);//将其排个序arr.sort((a, b) => a - b); 分类
				console.log(this.sclass);
			},
			getGame(){
				this._get('game.index/gameList',{
					page: this.page,
					list_rows: this.list_rows,
					order: this.sort,
					year:this.priceValue,
					stype:this.stype,
					sclass:this.sclass,
				},res=>{
					if(res.code==1){
						this.listData = res.data.list.data;
						this.total = res.data.list.total;
					}
				})
			},
			getGames(){
				this._get('game.index/gameList',{
					page: this.page,
					list_rows: this.list_rows,
					order: this.sort,
					year:this.priceValue,
					stype:this.stype,
					sclass:this.sclass,
				},res=>{
					if(res.code==1){
						if(res.data.list.data.length>0){
							this.listData = res.data.list.data;
							//滚动
							uni.pageScrollTo({
							    scrollTop: 0,
							    duration: 0 // 动画时长，默认300ms
							  });
						}
						this.total = res.data.list.total;
						
						if (this.total >= 100) { // 假设总数据量不会超过100条
						          this.hasMore = false;
						}
						uni.stopPullDownRefresh();
					}
				})
			},
			getTypeList(){
				this._get('game.index/typeList',{
				},res=>{
					if(res.code==1){
						this.gameclass = res.data.class
						this.type = res.data.type
						
						
						console.log(this.gameclass,222)
						console.log(this.type,222)
					}
				})
			},
			
			 blockStart() {
			                    // console.log('滑动触发')
			    },
			  blockMoving() {
				 console.log('正在滑动中',this.priceValue)
			  },
			  blockEnd() {
				 console.log('滑动结束',this.priceValue)
			  },
			  bindPickerChange: function(e) {
			      // console.log('picker发送选择改变，携带值为', e.detail.value)
				  this.index = e.detail.value;
				  if(e.detail.value==1){
					  this.sort = 'score desc';
					   this.getGame();
				  }else{
					  this.sort = '';
					   this.getGame();
				  }
				  
			      
			  },
			
			// 鼠标移入事件
			mouseover(e){
				this.is_xuan = false;
			},
			// 鼠标移出事件
			mouseleave(e){
				this.is_xuan = true;
			},
			change(e){
				this.currentIndex = e.detail.current;
			},
			changeSub(){
				if(this.currentIndex<=0){
					this.currentIndex = this.storeList.length-1;
				}else{
					this.currentIndex--;
				}
			},
			changeAdd(){
				if(this.currentIndex>=(this.storeList.length-1)){
					this.currentIndex = 0;
				}else{
					this.currentIndex++;
				}
			},
		}
	}
</script>

<style lang="scss">
	
	// 选中的颜色
	.option_active {
		background: #D52101;
	}
	.checkboxHidden {
		display: none;
	}

	.content-game{
		width: 100%;
		min-height: 800px;
		background-image: url(../static/img/index/gbgs.png);
		background-size: 100%;
		background-repeat: no-repeat;
		margin: 0 auto;
		.content-games{
			width: 1600px;
			margin: 0 auto;
		}
		.select{
			margin-top: 21px;
			float: right;
			width: 349px;
			height: 43px;
			border: 1px solid #9E9E9E;
			border-radius: 5px;
			margin-bottom: 15px;
			.select_year{
				padding: 0 13px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 21px;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 43px;
			}
			.xia{
				float: right;
				width: 24px;
				height: 13px;
			}
		}
		.content-all{
			width: 1600px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			
			.content-nav{
				width: 265px;
				.year-nav{
					width: 265px;
					padding: 30px 19px;
					min-height: 251px;
					background: #383838;
					border-radius: 8px;
					margin-bottom: 27px;
					.nav_title{
						font-size: 21px;
						color: #FFFFFF;
						.shu{
							color: #F48612;
							margin-right: 10px;
						}
					}
					.years{
						margin-top: 80px;
						font-size: 22px;
						font-weight: 400;
						color: #FFFFFF;
					}
					.sou{
						width: 123px;
						height: 37px;
						border: 1px solid #F48612;
						border-radius: 19px;
						margin-top: 30px;
						color: #F48612;
						text-align: center;
						line-height: 37px;
						cursor: pointer;
					}
				}
				.year-navs{
					width: 265px;
					padding: 30px 19px;
					min-height: 251px;
					background: #383838;
					border-radius: 8px;
					margin-bottom: 27px;
					
					.nav_title{
						font-size: 21px;
						color: #FFFFFF;
						padding-bottom: 15px;
						border-bottom: 1px solid #727272;
						.shu{
							color: #F48612;
							margin-right: 10px;
						}
					}
					.d-b-cs{
						flex-wrap: wrap;
						margin-top: 20px;
						display: flex;
						justify-content: space-between;
						
					}
					.game_type{
						width: 104px;
						height: 37px;
						border: 1px solid #9E9E9E;
						border-radius: 5px;
						float: left;
						font-size: 19px;
						font-weight: 400;
						color: #9E9E9E;
						text-align: center;
						line-height: 37px;
						margin-bottom: 18px;
						cursor: pointer;
					}
					.game_type_active{
						width: 104px;
						background-image: url('../static/img/index/xz.png');
						background-size: 100%;
						border: 1px solid #383838
					}
				}
			}
			.content-lists{
				display: flex;
				flex-direction: column;
			}
			.content-list{
					width: 1273px;
					// padding-bottom: 80px;
					.game_list{
						width: 389px;
						height: 339px;
						background: #3C3C3C;
						border-radius: 8px;
						margin-bottom: 37px;
						cursor: pointer;
						float: left;
						text-align: center;
					}
					.game_list2{
						margin: 0 52px;
					}
					.game_img{
						width: 389px;
						height: 219px;
						transition: transform 0.3s ease;
					}
					.game_img:hover {
					    transform: scale(1.05) translate(0%, 0%);
						z-index: 999;
					}
					.game_name{
						margin-top: 12px;
						padding:0 23px;
						font-size: 24px;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.game_status{
							width: 77px;
							font-size: 19px;
							font-weight: 400;
							color: #F48715;
						}
					}
					.game_spec{
						padding:0 23px;
						height: 20px;
						font-size: 19px;
						font-family: "Source Han Sans CN", sans-serif;
						font-weight: 400;
						color: #9E9E9E;
						line-height: 40px;
						    text-align: left;
					}
					
				}
			
		}
	}
	
	
	@media screen and (max-width: 768px) {
	.select{
		display: none;
	}
	.content-nav{
		display: none;
	}
	 .el-pagination{
		 display: none;
	 }
	 .content-game{
		 background-size: 100% 100%;
		 min-height: 500px !important;
	 }
	 .nocontent{
	 		 font-size: 12px;
	 		 margin-top: 60px;
	 }
	 .content-lists{
		 width: 100%;
		 margin-top: 20px;
	 }
	 .content-list{
		 margin: 0 auto;
		 width: 200px !important;
	 }
	 .game_list{
		 width: 100% !important;
		 height: 160px !important;
	 }
	  .game_list2{
		  margin: 0 auto !important;
		  margin-bottom: 10px !important;
	  }
	   .game_img{
		   width: 178px !important;
		   height: 100px !important;
		   margin-top: 10px;
	   }
	   .game_name{
		   width: 90% !important;
		   padding:5% !important;
		   font-size: 13px !important;
	   }
	   .game_status{
		    width: 20% !important;
	   }
	   .game_spec{
		   width: 90% !important;
		   padding:0 5% !important;
		   font-size: 10px !important;
	   }
	  
	  
	}
	.nocontent{
		height: 240px;color: #ffffff;text-align: center;margin-top: 10px;
	}
</style>
