<template>
	<view class="content">
		<view class="home-top">
			<image src="../../static/img/home-top-bg.png" class="home-top-bg" mode="widthFix"></image>
			<view class="home-top-til">“碳汇+”生态产品价值实现</view>
			<view class="home-top-subtil">The value of ecological environment is realized</view>
		</view>
		<view class="swiper-wrap">
			<swiper class="swiper"
			:indicator-dots="swiper.indicatorDots" 
			:indicator-color="swiper.indicatorColor"  
			:indicator-active-color="swiper.indicatorActiveColor" 
			:autoplay="swiper.autoplay"
			@change="swiperChange"
			:interval="swiper.interval" :duration="swiper.duration">
				<!-- <swiper-item>
					<view class="adv-item"><image :src="$getimg +'banner01.png'" class="pic" mode="scaleToFill"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="adv-item" @click="goIndex"><image :src="$getimg +'guide02.png'" class="pic" mode="scaleToFill"></image></view>
				</swiper-item> -->
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<view class="adv-item" @click="swiperClick"><image :src="$getimg +item.src" class="pic" mode="scaleToFill"></image></view>
				</swiper-item>
			</swiper>
			<view class="dots-container">
			  <view v-for="(item, index) in swiperList" :key="index">
			    <view :class="['dot', index === swiperCurrent ? 'active' : '']"></view>
			  </view>
			</view>
		</view>
		<view class="wrap40">
			<view class="title">推荐生态产品</view>
			<view class="buy-now">
				<view class="buy-now-imgwrap">
					<image src="../../static/img/home-buy-now-img.png" class="buy-now-img" mode="aspectFit"></image>
				</view>
				<view class="buy-now-text">
					<view class="buy-now-text-big">立即购碳</view>
					<view class="buy-now-text-small">点击去购碳哟</view>
				</view>
				<view class="buy-now-icon">
					<text class="iconfont icon-down-s"></text>
				</view>
			</view>
			<!-- buy-now end -->
			<view class="type-nav">
				<view class="type-nav-item active">
					<view class="type-nav-item-til">林业碳汇</view>
					<view class="type-nav-item-subtil">为您推荐</view>
					<image src="../../static/img/type-nav-active.png" class="active-bg" mode="aspectFit"></image>
				</view>
				<view class="type-nav-item">
					<!-- <view class="type-nav-item-til">新能源汽车</view>
					<view class="type-nav-item-subtil">绿色出行</view> -->
				</view>
				<view class="type-nav-item">
					<!-- <view class="type-nav-item-til">分布式光伏</view>
					<view class="type-nav-item-subtil">新能源</view> -->
				</view>
			</view>
			<view class="common-content">
				<view class="common-content-title">
					<view class="common-content-icon">
						<image src="../../static/img/icon-tanpuhui.png" class="icon" mode="aspectFit"></image>
					</view>
					<view class="common-content-til">
						碳汇产品展示
					</view>
					<view class="common-content-right" @click="refreshProductList">
						<image src="../../static/img/icon-refresh.png" class="icon" mode="aspectFit"></image>
						换一批
					</view>
				</view>
				<view class="product-list">
					<view class="product-list-item" v-for="(item, index) in productList" :key="index" @click="productClick(item)">
						<image :src="item.img" class="product-img" mode="heightFix"></image>
						<view class="product-text">{{item.name}}</view>
					</view>
				</view>
				<view class="common-content-blink">查看更多 ></view>
			</view>
			<!-- 碳汇产品展示 结束 -->
			<view class="title">购买排行榜</view>
			<view class="rank-wrap">
				<view class="rank-tab">
					<view class="rank-tab-item" :class="{active: rankType == 1 }" @click="rankTab(1)">
						企业排行榜
					</view>
					<view class="rank-tab-item" :class="{active: rankType == 2 }" @click="rankTab(2)">
						个人排行榜
					</view>
				</view>
				<view class="rank-top">
					<view class="rank-top-item" v-for="(item, index) in rankTop" :key="index">
						<view class="rank-top-imgwrap">
							<image src="../../static/img/rank-top01.png" class="rank-top-bg" mode="aspectFit"></image>
							<image :src="item.img" class="rank-top-photo" mode="scaleToFill"></image>
						</view>
						<view class="rank-top-name f-ellipsis">{{item.name}}</view>
						<view class="rank-top-carbon f-ellipsis">共购买{{item.carbon}}kg碳汇</view>
					</view>
					<view class="my-rank-wrap">
						<view class="my-rank-photo">
							<image :src="myRank.img" class="photo" mode="scaleToFill"></image>
						</view>
						<view class="my-rank-text">
							<view class="my-rank">第{{myRank.rank}}名</view>
							<view class="my-rank-num">共购买{{myRank.carbon}}kg碳汇</view>
						</view>
					</view>
				</view>
				<!-- rank-top end -->
				<view class="rank-list-header">
					<view class="rank-list-header-rank">排名</view>
					<view class="rank-list-header-user">用户</view>
					<view class="rank-list-header-carbon">购买碳汇</view>
				</view>
				<view class="rank-list">
					<view class="rank-list-item" v-for="(item, index) in rankList" :key="index">
						<view class="rank-list-rank">{{item.rank}}</view>
						<view class="rank-list-user">
							<image :src="item.img" class="photo" mode="scaleToFill"></image>
							<view class="name f-ellipsis">{{item.name}}</view>
						</view>
						<view class="rank-list-carbon">共购买{{item.carbon}}kg<br />碳汇</view>
					</view>
				</view>
			</view>
			<!-- 购买排行榜 结束 -->
		</view>
		<!-- wrap end -->
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$getimg:this.$getimg,
				swiper: {
					indicatorDots: false,
					autoplay: true,
					interval: 9000,
					duration: 500,
					indicatorColor:"rgba(255, 255, 255, 0.7)",
					indicatorActiveColor:"rgba(255, 255, 255, 1)",
				},
				swiperList:[
					{src:'banner01.png'},
					{src:'banner01.png'}
				],
				current: 0,
				swiperCurrent: 0,
				productList:[
					{name:'酉阳土家族苗',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
				],
				rankType:1,
				rankTop:[
					{name:'酉阳土家族苗',carbon:1000,img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',carbon:1000,img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'酉阳土家族苗',carbon:1000,img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},					
				],
				myRank:{name:'家族苗',carbon:1000,rank:11,img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
				rankList:[
					{name:'家族苗',carbon:1000,rank:'04',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'家族苗',carbon:1000,rank:'05',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'家族苗',carbon:1000,rank:'06',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
					{name:'家族苗',carbon:1000,rank:'07',img:'http://qny.gzsdtfp.com/gzth005/imgupload/39b6b37e61e240c98e4c8ca392c5f3a5.jpg'},
				],
				
			}
		},
		onLoad() {
			// this.getProductList();
		},
		methods: {
			swiperChange (e) {
			    this.swiperCurrent = e.detail.current
			},
			swiperClick(){
				console.log(this.swiperCurrent);
			},
			getProductList(){
				this.$api.http.post(this.config.apiBaseurl + '/goods/searchForIndex',{},{
					header: {
					Accept:'application/json',
					// Authorization: 'Bearer '+ this.token, //注意Bearer后面有一空格
				},
				}).then(res => {
					console.log('res',res)
				}).catch(err =>{
					console.log('err',err)
				});
			},
			refreshProductList(){
				this.getProductList();
			},
			productClick(){
				
			},
			rankTab(type){
				this.rankType = type;
				console.log(type);
			}

		}
	}
</script>

<style>
@import url("./index.css");
</style>
