<template>
	<view class="container">
		<view class="searhtoppage flextwo">
			<view class="searchtopk flextwo" @click="search">
				<image src="../../static/search.png" mode="" class="search"></image>
				<view class='searchleft'>
					输入您搜索的内容
					<!-- <input type="text" placeholder="输入您搜索的内容" /> -->
				</view>
				
			</view>
			<view class="cancelname">取消</view>
		</view>
		<view class="swiper_image">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" class="swiper_item_img"  @change="swiperChange" :circular="true"
			>
				<swiper-item v-for="(item,index) in imgUrls" :key="index">
					<image :src="item" class="slide-image" mode="aspectFill"/>
				</swiper-item>
				
			</swiper>
			<view class="dots">
				<block v-for="(item,index) in imgUrls" :key="index">
					<view class="dot" :class="index == currentSwiper ? ' active' : ''"  data-index="index"></view>
				</block>
			</view>

		</view>
		
		<!-- 主播种类 -->
		<view class="zhubokind flextwo">
			<view class="zhubokinditem">
				<view class="zhuboimg">
					<image src="../../static/yulan.png" mode=""></image>
					<view class='yuanquan'></view>
				</view>
				
				<view class="zhubokindname">浏览预告</view>
				<view class="setname">设置商品提醒</view>
				
			</view>
			<view class="zhubokinditem">
				<view class="zhuboimg">
					<image src="../../static/intro.png" mode=""></image>
					<view class='yuanquan'></view>
				</view>
				<view class="zhubokindname">主播介绍</view>
				<view class="setname">立刻推送提醒</view>
			</view>
			<view class="zhubokinditem">
				<view class="zhuboimg">
					<image src="../../static/tixing.png" mode=""></image>
					<view class='yuanquan'></view>
				</view>
				
				<view class="zhubokindname">收到提醒</view>
				<view class="setname">打开软件购买</view>
				
			</view>
		</view>
		<!-- 主播列表 -->
		<view class="zhubolist">
			
			<view class="zhubolistitem flexone" v-for="(item,index) in zhubolist" :key="index" @click="zhubodetail(item.id)">
				<view class="zhubohead">
					<image :src="item.avatar" mode=""></image>
					<view class="zhuboname" >{{item.name}}</view>
				</view>
				<view class="zhubonamebox">
					<view class="zhubonametop flextwo">
						<view class="zhubomingzi">最近一场</view>
						<view class="zhubodate" v-if="item.anchor_time==null">时间待定</view>
						<view class="zhubodate" v-else>{{item.anchor_time.time}}开播</view>
					</view>
					<view class="zhubotext" v-if="item.anchor_time==null">戳详情订阅TA预告提醒</view>
					<view class="zhubotext" v-else>{{item.anchor_time.title}}</view>
					<view class="seemore">查看与{{item.name}}有关的一切></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	import {Toast} from "../../utils/toast.js";
	var that;
	export default {
		data() {
			return {
				index: 0,
				indicatorDots: false,
				autoplay: true,
				interval: 3000,
				duration: 500,
				currentSwiper: 0,
				imgUrls:["1","2"],
				page:1,
				zhubolist:[],
				showpull:true,
			}
		},
		onLoad() {
			// 获取主播列表
			this.getzhubolist();
			// 获取主播banner
			 this.getbanner()
		},
		onReachBottom() {
			that=this
			let newpage=that.page;
			newpage++
			that.page=newpage;
			if(that.showpull==true){
				console.log(38493409)
			  Toast('没有更多了~')
			}else{
			  that.getzhubolist()
			}
		},
		methods: {
			swiperChange: function(e) {
				this.currentSwiper = e.detail.current
			},
			// 进入搜索页面
			search() {
				uni.navigateTo({
					url: '/pages/xinyuan/search'
				})
			},
			// 获取banner图
			getbanner(){
				let that = this;
				var url = "anchor/getBanner"
				let param={
					
				}
				app.post(url, param, "post").then(res => {
					console.log('主播banner', res)
					that.imgUrls=res;
				
				}).catch(err => {
					console.log(err)
				})
			},
			// 获取主播列表
			getzhubolist(){
				let that = this;
				var url = "anchor/getAnchor"
				let param={
					page:that.page,
					per_apge:10
				}
				app.post(url, param, "post").then(res => {
					console.log('主播列表', res)
					that.zhubolist=that.zhubolist.concat(res.data);
					if(that.page>1){
						if(res.data.length==0){
							that.showpull=false
						}
					}
					
				
				}).catch(err => {
					console.log(err)
				})
			},
			// 主播详情
			zhubodetail(id){
				uni.navigateTo({
					url:'/pages/xinyuan/zhibodetail?id='+id
				})
			}

		}

	}
</script>

<style>
	@import url("../../style/xinyuan");
	.searhtoppage{
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	/* 轮播图 */
	.swiper_image {
		width: 688rpx;
		height: 256rpx;
		font-size: 0;
		margin: 80rpx auto 0;
		position: relative;
		border-radius: 5rpx;
	}
	
	swiper {
		width: 688rpx;
		height: 256rpx;
		border-radius: 10rpx;
	}
	
	.swiper_image image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}
	
	.swiper_item_img swiper-item {
		width: 688rpx;
		height: 256rpx;
		border-radius: 10rpx;
	}
	
	.swiper_item_img swiper-item image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	
	swiper-item {
		position: relative;
	}
	
	swiper-item image {
		border-radius: 10rpx;
	}
	
	.picimg {
		width: 156rpx;
		height: 76rpx;
		position: absolute;
		right: 36rpx;
		bottom: 30rpx;
	}
	
	.dots {
		height: 36rpx;
		display: flex;
		flex-direction: row;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 10rpx;
	}
	
	/*未选中时的小圆点样式 */
	
	.dot {
		width: 14rpx;
		height: 14rpx;
		border-radius: 50%;
		margin-right: 16rpx;
		background-color: #b9c0f7;
	}
	
	/*选中以后的小圆点样式  */
	
	.active {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fff;
	}

</style>