<template><!--会议室预定-->
	<div class="page-box">
		<sticky scroll-box="vux_view_box_body" :check-sticky-support="false" :offset="46">
		<tab :line-width="2" bar-active-color="#2d8cf0" active-color="#2d8cf0" class="tab-top">
      <tab-item selected @on-item-click="changeTab">今天</tab-item>
      <tab-item @on-item-click="changeTab">明天</tab-item>
      <tab-item @on-item-click="changeTab">{{dateTime ? dateTime : '选择日期'}}</tab-item>
    </tab>
    </sticky>
    <group gutter="0">
    <div v-for="(item,index) in roomList" :key="index" class="list-box">
    	<div class="needApproval" v-if="item.needApproval">需要审批</div>
      <div class="needApproval" v-if="!item.needApproval" style="color:#0db14b">无需审批</div>
      <dl class="room-img">
    		<img :src="item.imgUrl"/>
    	</dl>
    	<dl>
    		<span class="floatL">{{item.roomCode}}</span>
    		<span class="floatR phone">{{item.phoneNo}}</span>
    	</dl>
    	<dl>
    		<span class="floatL">{{item.maxPerson}}人会议室</span>
    		<span class="floatR">{{item.roomFunctionName}}</span>
    	</dl>
    	<dl style="margin-top: 10px;">
    		<Button type="primary" long @click="bookingMeet(item)">预约</Button>
    	</dl>
    </div>
    </group>
    
    <div v-transfer-dom>
    	<popup v-model="showSelectDate">
    		<div class="popup-option">
        	<div class="left-btn" @click="showSelectDate=false">取消</div>
        	<div class="right-btn" @click="sureDateSelect">确认</div>
        </div>
        <div>
        	<datetime-view v-model="dateTime" ref="datetime" format="YYYY-MM-DD" :start-date="todayDate"></datetime-view>
        </div>
    	</popup>
    </div>
	</div>
</template>

<script>
	import { TransferDom, Popup, Tab, TabItem, Datetime, DatetimeView, Group, Sticky  } from 'vux';
	import {formatDate} from './assets/js/date.js';
	import {
		getMeetingRoomList, //获取会议室列表
	} from './service/getData.js';
	export default {
		name: '',
		directives: {
	    TransferDom
	  },
		components: {
			Popup,
	    Tab,
	    TabItem,
	    Datetime,
	    DatetimeView,
	    Group,
	    Sticky
	  },
		data () {
	    return {
	    	roomList: [], //会议室列表数据
	    	bookingDate: '', //预约日期
	    	showSelectDate: false,
	    	dateTime: '',
	    	todayDate: '',
	    }
	 	},
	 	created: function() {
	 		
	 		this.bookingDate = formatDate(new Date(), 'yyyy-MM-dd');
	 		this.todayDate = formatDate(new Date(), 'yyyy-MM-dd');
	 	},
	 	mounted: function() {
	 		this.initData();
	 	},
	 	methods: {
	 		changeTab(index) {
	 			var newDate = new Date();
	 			if(index == 0) {
	 				this.bookingDate = formatDate(newDate, 'yyyy-MM-dd');
	 			}
	 			else if (index == 1) {
	 				newDate.setDate(newDate.getDate()+1);//获取明天的日期
	 				this.bookingDate = formatDate(newDate, 'yyyy-MM-dd');
	 			}
	 			else if (index == 2) {
	 				this.showSelectDate = true;
	 			}
	 			console.log(this.bookingDate);
	 		},
	 		sureDateSelect() {
	 			this.bookingDate = this.dateTime;
	 			this.showSelectDate = false;
	 			console.log(this.bookingDate);
	 		},
	 		initData() {
	 			this.getMeetingRoomList();
	 		},
	 		getMeetingRoomList() { //获取会议室列表
	 			var self = this;
	 			self.roomList = [];
	 			var jsonData = {
	 				companyId: localStorage.companyId || '',
	 			};
	 			self.$Spin.show();
	 			getMeetingRoomList(jsonData).then(res => {
	 				self.$Spin.hide();
	 				if(res.status == 200) {
	 					self.roomList = res.data;
	 				}
	 			});
	 		},
	 		bookingMeet(item) { //预约会议室
	 			localStorage.roomInfo = JSON.stringify(item);
	 			this.$router.push({ name: 'newMeeting', params: { roomInfo: item, bookingDate: this.bookingDate }});
	 		},
	 	}
	}
</script>

<style scoped="scoped">
	@import url("./assets/css/list.css");
</style>