<template>
	<view class="page-chair-man" v-if="info">
		<uni-nav-bar :fixed="true" height="180rpx" :title="title" color="#FFF"  left-icon="left" backgroundColor="rgb(0,0,0,0)" :border="false" @clickLeft="onBack"/>
		
		<view class="chair-man-bg">
			<view class="chair-man-content">
				
				<view class="section1">
					<view class="title">{{subTitle}}</view>
					<view class="container">
						<view class="image">
							<image :src="info.headerImg" class="img"></image>
						</view>
						<view class="intro">
							<view class="name">{{info.name}}</view>
							<view class="tags">
								<block v-for="(it,index) in info.tags">
									<view class="tag">{{it}}</view>
								</block> 
							</view>
							<view class="pointer">
								<uni-rate color="#CCCCCC" activeColor="#b11b1c" :value="info.point"  readonly/>
								
							</view>
						</view>
					</view>
				</view>
				<view class="section2">
					<rich-text :nodes="info.intro"></rich-text> 
				</view>
				<view class="section3">
					<view class="top">
						<view class="left">剧目排期</view>
						<view class="right">剧场早鸟特权卡售卖中，查看详情</view>
					</view>
					
					  <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 class="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>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	const app = getApp();
	let hideLoading = true; 
	import PlanDate from '@/components/PlanDate/PlanDate.vue' 
	import EventItem from '@/components/EventItem/EventItem.vue'
 	export default {
		components:{ 
			EventItem,
			PlanDate
		},
		computed: {
			...mapState(['store_id','systemInfo'])
		},
		data() {
			return {
				performId:0,
				info:null,
				list:[],
				keyword:'',
				title:'',
				subTitle:'',
				queryForm:{
					page:0,
					pageSize:10,
					performerId:'',
					planStartTime:'',
					planEndTime:'',
					keyword:'',
					type:'',
					area:'',
				},
				dataList:[],
				recordCount:0, 
				dataArea:[
					{
						value:'',
						text:'所在区域',
					}
				],
				typeList:[
					{
						value:'',
						text:'所有分类',
					},
					{
						value:'1',
						text:'剧场',
					},
					{
						value:'2',
						text:'活动',
					} 
				],
				area:'',
				sort:'', 
			}
		},
		onLoad(option){
			this.performId=option.id||0;
			this.initSearchArea();
			if(this.performId>0){
				this.queryForm.page=0;
				this.queryForm.performerId=this.performId;
				this.initPerformer();
				this.onSearch();
			}
		},
		methods: {
			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 => {})
			},
			
			onBack(e){
				uni.navigateBack(-1);
			},
			
			onChangeArea(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();
			},
			
			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);  
				})
			},
			
			initPerformer(){
				let _this=this;
				_this.$http.request('zc/performer', { 
					id:this.performId
				}, "", "", hideLoading).then(res => { 
					_this.info=res.data.info;    
					if(_this.info.type==1){
						_this.title="主持人介绍";
						_this.subTitle="当家主持人";
					}else{
						_this.title="主理人介绍";
						_this.subTitle="当家主理人";
					}
				}).catch(err => { 
				})
			},
			 
			
			 
		}
	}
</script>

<style lang="scss">
@import './chair-man.scss'
</style>
