<template>
	<view class="pages">
		<view class="search-wrap">
			<u-search
				placeholder="请输入关键词" 
				:clearabled="true"
				:showAction="true"
				height="60rpx"
				@search="search"
				@custom="search"
				@clear="reloadList"
				bgColor="#fff"
				borderColor="#fff"
				v-model="params.keyword">
			</u-search>
		</view>
		<view class="page-wrap">
			<view class="star-title u-flex u-row-between">
				<view class="left u-flex">
					<!-- <image class="icon" :src="staticUrl+'/img/title-star.png'" ></image> -->
					<text class="text">剧目</text>
				</view>
			</view>
			<swiper class="swiper" :autoplay="true" style="height: 400rpx;margin-bottom: 34rpx" >
				<swiper-item :item-id="item.id" v-for="(item,index) in theatreList" :key="index">
					<view class="programme-wrap">
						<view class="programme">
							<image class="img" :src="item.showImg" ></image>
							<!-- <image class="img" :src="item.showImg" ></image> -->
							<view class="text u-flex u-row-between">
								<view class="left">
									<view class="name">{{item.name}}</view>
									<!-- <view class="addr">演出地点：{{item.address}}</view> -->
								</view>
								<view class="btn" @click="bookticket(item)">立即报名</view>
							</view>
						<!-- 	<view class="share" @click="getPoster(item)">
								<image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
							</view> -->
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<u-toast ref="uToast"></u-toast>
		<tabbar :tabbarIndexProps='0' />
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../../components/tabbar.vue";
	export default {
		components:{
			tabbar,
			// cartfixed
		},
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				params:{
					keyword:''
				},
				theatreList:[],//剧院信息列表
			}
		},
		computed: {
		},
		onShow() {
			
		},
		beforeRouteLeave() {
			
		},
		onLoad(query) {
			
			this.getSystemInfo();
			// console.log('statusBarHeight',this.statusBarHeight);
			// console.log('navigationBarHeight',this.navigationBarHeight);
			// console.log('windowHeight',this.windowHeight);
			// console.log('navHeight',this.navHeight);
			// console.log('vuex_member_info=======',this.vuex_member_info);
			this.getClientIndex();

		},
		onReady() {
			
		},
		onUnload() {
			
		},
		methods: {
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
					this.memberInfo = res.data;
					this.avatar =  res.data.avatar;
					this.$u.vuex('vuex_member_info', res.data);
					// console.log('memberInfo',this.memberInfo);
					}).catch(err=>{
					// console.log('memberInfo',err.data);
				})
			},
			getClientIndex(){
				this.$u.api.teamIndex(this.params).then(res=>{
					// console.log('res',res);
					this.theatreList = res.data.performList;
				}).catch(err=>{
					console.log('getClientIndex',err.data);
				})
			},
			goLogin(){
				uni.$u.route('/pages/login/login')
			},
			bookticket(item){
				// console.log('bookticket',item);
				uni.$u.route('pages/ticketlist',{id:item.id})
			},
			search(e){
				uni.$u.route('pages/searchpage',{keyword:e})
			},
			reloadList(){
				console.log('reloadList');
			}
		}
	}
</script>
<style>
page{
background-color: #fff;
}
</style>
<style lang="scss" scoped>
$pagegap:32rpx;
.page-wrap{
	position: relative;
}
.search-wrap{
	background-color: #EF2121;
	/deep/ .u-search__action{
		color: #fff;
	}
}
.star-title{
	margin-bottom: 32rpx;
	.left{
		.icon{
			width: 28rpx;
			height: 28rpx;
			margin-right: 8rpx;
		}
		.text{
			font-size: 32rpx;
			font-weight: bold;
			color: #2D2D2D;
			line-height: 48rpx;
		}
	}
	.right{
		.text{
			font-size: 24rpx;
			font-weight: 400;
			color: #C79191;
		}
	}
	
}
.swiper{
	box-shadow:
	  0px 0.6px 0.8px rgba(0, 0, 0, 0.022),
	  0px 1.5px 2.1px rgba(0, 0, 0, 0.031),
	  0px 3px 4.3px rgba(0, 0, 0, 0.039),
	  0px 6.2px 8.8px rgba(0, 0, 0, 0.048),
	  0px 17px 24px rgba(0, 0, 0, 0.07)
	;
	border-radius: 30rpx;
}
</style>