<template>
	<view class="page-community-home">
		
		<uni-nav-bar :fixed="true" height="180rpx" title="社区中心" color="#FFF"  left-icon="home" backgroundColor="rgb(0,0,0,0)"  :border="false" @clickLeft="onHome"/>
		
		<view class="community-top">
			 <view class="swiper-item">
			        <swiper
			          indicator-dots="true"
			          autoplay="true"
			          interval="2000"
			          duration="500"
			        >
			          <swiper-item
			            v-for="(item, index) in bannerList"
			            :key="index"
			            style="width: 100%"
			          >
			            <view class="swiper-img" style="width: 100%">
			              <image
			                :src="item.imageUrl"
			                style="width: 100%; height: 150px"
			                @click="goInfo(item)"
			              ></image>
			            </view>
			          </swiper-item>
			        </swiper>
			      </view>
			 <view class="section1">
				 <view class="caption">
					 <view class="left">正在上演</view>
					 <view class="right" @click="onViewHome()">特权卡售卖中</view>
				 </view>
				 <view class="content"> 
					<block v-for="(it,index) in topList">
						<VideoItem :item="it"></VideoItem> 
					</block> 
				 </view>
				 <!-- <view class="more">查看全部活动 >> </view> -->
			 </view>
			 
			 <view class="section2">
				 <view class="title">主理人</view>
				 <view class="contents">
					<view class="list">
						 
							<block v-for="(it,index) in PerformerList">
								<view class="content" @click="onViewPerform(it.id)">
									  <image :src="it.headerImg" class="icon"></image>
								</view> 
							</block> 
						 
					</view>
					
				 </view> 
			 </view>
			 
			 
			 <view class="section3">
				  <view class="title">
					  <view class="l">活动排期</view>
					  <view class="r"></view>
				  </view>
				  <view class="plan-bg">
					  <PlanDate @onSetDate="onSetDate"></PlanDate>
				  </view>
				  
				  <view class="selection">
					  
					  <uni-data-select class="data-select" 
						v-model="queryForm.area"
						:localdata="dataArea"
						@change="onChangeArea"
						:clear="false"
						
					  ></uni-data-select>
					  <uni-data-select
						v-model="queryForm.type"
						:localdata="typeList"
						@change="onChangeType" 
						:clear="false"
						
					  ></uni-data-select>
					  <uni-easyinput v-model="queryForm.keyword" placeholder="请输入内容"  @change="onChangeKeyword"></uni-easyinput>
 
				  </view>
				  
				  <view class="events-list">
					  <block v-for="(it,index) in dataList">
						  <EventItem :info="it"></EventItem>
					 </block> 
				  </view>
			 </view>
			 
		</view> 
	<page-btm-bar :active="2" />
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	const app = getApp();
	let hideLoading = true;
	import PlanDate from '@/components/PlanDate/PlanDate.vue'
	import VideoItem from '@/components/VideoItem/VideoItem.vue'
	import EventItem from '@/components/EventItem/EventItem.vue'
	export default {
		components:{
			VideoItem,
			PlanDate,
			EventItem
		},
		computed: {
			...mapState(['store_id','systemInfo'])
		},
		data() {
			return {
				bannerList: [],
				topList:[],//顶部剧场活动列表  
				PerformerList:[],//获取主持人信息列表 
				queryForm:{
					page:1,
					pageSize:10,
					planStartTime:'',
					planEndTime:'',
					keyword:'',
					type:'',
					area:'',
				},
				dataList:[],
				recordCount:0, 
				dataArea:[
					{
						value:'',
						text:'所在区域',
					}
				],
				typeList:[
					{
						value:'',
						text:'所有分类',
					},
					{
						value:'1',
						text:'剧场',
					},
					{
						value:'2',
						text:'活动',
					} 
				],
				area:'',
				sort:'', 
			};
		},
		onLoad() {
			
			    
			     
			// #ifdef MP-ALIPAY
			this.$scope.onBeforeGetCoupon = this.onBeforeGetCoupon.bind(this)
			this.$scope.onGetCouponSuccess = this.onGetCouponSuccess.bind(this)
			this.$scope.onGetCouponFail = this.onGetCouponFail.bind(this)
			this.$scope.onUseImmediately = this.onUseImmediately.bind(this)
			this.$scope.onClose = this.onClose.bind(this)	
			// #endif
			uni.hideTabBar();
			if (this.$store.state.store_id) {
				 this.http();
				// #ifdef MP-ALIPAY
				this.getCouponList();
				// #endif
			}
			if (this.$store.state.systemInfo.set) {
				if (this.$store.state.systemInfo.set.is_pop != 0) {
					let is_pop = this.$store.state.systemInfo.set.is_pop;
					this.can_popup(is_pop);
					    // is_pop == 2 ? this.Coupons() :
						// is_pop == 1 ? this.homePop(1) :
						// is_pop == 3 ? this.homePop(3) : '';
				}
			}
			uni.getSystemInfo({
				success: (e) => {
					this.windowHeight = e.windowHeight;
				}
			})
			
			
		},
		onReady() {
			this.$store.commit('SET_MERCHANT_ID', null) //清空分账号授权
			// #ifdef MP-ALIPAY
			my.getLocation({
				type: 1,
				success: (res) => {
					// console.log('getLocation', res.cityAdcode);
					this.cityCode = res.cityAdcode;
					 // '410100';
				},
				fail: (err) => {
					console.log(err, "err")
				}
			});
			// #endif
			
			let protocal=uni.getStorageSync("protocal"); 
			if(protocal!=true){
				uni.navigateTo({
					url:'/pages/protocal/protocal'
				})
			} 
		},
		onShow(){ 
			this.initBanner();
			this.onSearchTop(); 
			this.onSearchPerformer();
			
			this.initSearchArea();
			
			let _this=this;
			_this.queryForm.page=0;
			_this.onSearch();
		},
		methods:{
			//活动详情页
			    goInfo(item) {
			      console.log(item.other_link);
			      uni.navigateTo({
			        url: item.other_link,
			      });
			    },
			initSearchArea(){
				let _this=this;
				_this.$http.request('zc/searcharea',{}, "", "", hideLoading).then(res => { 
					 
					_this.dataArea=[];
					_this.dataArea.push({
						value:'',
						text:'所在区域',
					});
					for(var i=0;i<res.data.dataList.length;i++){
						_this.dataArea.push({
							value:res.data.dataList[i].district,
							text:res.data.dataList[i].district,
						}) 
					} 
				}).catch(err => {})
			},
			
			onViewHome(e){
			  // 设置全局数据
			  getApp().globalData.runMethod = true;
			
			  // 切换 tab
			  uni.switchTab({
			    url:'/pages/home/home',
			  });
			},
			
			onChangeArea(e){
				console.log("e",e);
				this.queryForm.area=e;
				this.queryForm.page=0;
				this.onSearch();
			},
			onChangeType(e){ 
				this.queryForm.type=e;
				this.queryForm.page=0;
				this.onSearch();
			},
			
			onChangeKeyword(e){
				this.queryForm.keyword=e;
				this.queryForm.page=0;
				this.onSearch();
			},
			
			onHome(e){
				uni.switchTab({
					url:'/pages/theater/index/index'
				})
			},
			
			onViewPerform(e){
				uni.navigateTo({
					url:'/pages/theater/chair-man/chair-man?id='+e,
				})
			},
			
			onSetDate(e){
				let _this=this;
				_this.queryForm.planStartTime=e+" 00:00:00";
				_this.queryForm.planEndTime=e+" 23:00:00";
				_this.queryForm.page=0;
				_this.onSearch();			
			},
			
			onSearch(){
				let _this=this;
				if(_this.queryForm.page<1){
					_this.dataList=[];
				}
				_this.queryForm.page++; 
				_this.$http.request('zc/search',_this.queryForm,'','',hideLoading).then(res=>{
					_this.recordCount=res.data.recordCount;
					_this.dataList=_this.dataList.concat(res.data.dataList);  
				})
			},
			//搜索顶部列表
			onSearchTop(){
				let _this=this;
				_this.$http.request('zc/search', {
					page:1,
					pageSize:3,
					isComments:1,
				}, "", "", hideLoading).then(res => { 
					
					_this.topList=res.data.dataList;   
				}).catch(err => {})
			},
			//搜索演员
			onSearchPerformer(){
				let _this=this; 
				this.$http.request('zc/getPerformersList', {
					page:1,
					pageSize:10,
					type:2, 		
				}, "", "", hideLoading).then(res => {
					_this.PerformerList=res.data.dataList;  
				}).catch(err => {})
			},
			//轮播图
			    initBanner() {
			      let _this = this;
			      this.$http
			        .request(
			          "banner/search",
			          {
			            page: 1,
			            pageSize: 10,
			            type: 3,
			          },
			          "",
			          "",
			          hideLoading
			        )
			        .then((res) => {
			          console.log("112", res);
			          _this.bannerList = res.data.dataList;
			        })
			        .catch((err) => {});
			    },
			 
			
			
		}
	}
</script>

<style lang="scss">
@import "./index.scss"
</style>
