<template>
	<view class="page-calendar">
		<view class="calendar-out">
			<view class="top-header"> </view>
			<view class="top-content">
				<uni-calendar ref="calendar" :selected="selectedData"  /> 
			</view>			
			<view class="mid-bg"> </view>
			<view class="mid-data">
				 
				<view class="data-list">
					<block v-for="(it,index) in tripList">
						
					<view class="item" @click="onViewArticle(index)">
						<view class="image">
							<image :src="it.image" class="img" mode="scaleToFill"></image>
						</view>
						<view class="news">
							<view class="title">
								<view class="text">{{it.intro}}</view>
								<view class="date"></view>
							</view>
							<view class="intro">
									{{it.content}}
							</view>
						</view>
					</view>
					</block>
					<block v-for="(it,index) in orderList">
						
					<view class="item" @click="onView(it,index)">
						<view class="image">
							<image :src="setInfo+it.events.mainImg" class="img" mode="scaleToFill"></image>
						</view>
						<view class="news">
							<view class="title" style="height: auto;">
								<view class="text">{{it.events.title}}</view>
								<view class="date"></view>
							</view>
							<view class="intro">
									{{it.orderDate+" "+it.orderTime}}
							</view>
						</view>
					</view>
					</block>
				</view>
				 
			</view>
			
		</view>
		
		<uni-popup ref="calendarForm">
			<CalendarForm :info="currentArticle"></CalendarForm> 
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import CalendarForm from "@/components/CalendarForm/CalendarForm.vue" 
	import setInfo from "../../siteinfo.js"
	export default {
		components:{
			CalendarForm
		},
		computed: {
			...mapState(['systemInfo', 'store_id', 'userInfo']),
		},
		data() {
			return {
				tripList:[],
				selectedData:[],
				currentArticle:null,
				orderList:[],
				setInfo:setInfo.siteroot
			};
		},
		onShow(){
			this.initTrip();
		},
		methods:{
			
			
			initTrip(){
				let _this=this;
				_this.$http.request('account/getUserTrip', { 
					user_id:_this.userInfo.id,
				}, "", "", true).then(res => {
					_this.tripList=res.data; 
					
					_this.selectedData=_this.tripList.map(mapRes=>{
						return {
							date:mapRes.tripDate,
							info:mapRes.intro, 
						}
					})
					 
				}).catch(err => {})
				_this.$http.request('Events/searchOrder', {
					user_id:_this.userInfo.id,
				}, "", "", true).then(res => {
					console.log(res);
					_this.orderList=res.data; 
					
					_this.selectedData=_this.orderList.map(mapRes=>{
						return {
							date:mapRes.orderDate,
							info:"预订场地", 
						}
					})
					 
				}).catch(err => {})
			},
			onView(item,index){
				uni.navigateTo({
					url:'/pages/home/detail/detail?id='+item.eventId,
				})
			},
			//打开查看详情
			onViewArticle(index){
				this.currentArticle=this.tripList[index]; 
				this.$refs.calendarForm.open("bottom");
			}
		}
	}
</script>

<style lang="scss">
@import './my-calendar.scss'
</style>
