<template>
	<view class="container">
		<view class="topView">
			<!-- 日期和会议室 -->
			<view class="titleView">
				<view class="viewLabel">会议名称：</view>
				<view v-if="type=='show'">{{form.title}}</view>
				<input v-else v-model="form.title" class="inputStyle"/>
			</view>
			<view class="roomView">
				<view class="viewLabel">会议室：</view>
				<view v-if="type=='show'">{{form.mroom_name}}</view>
				<picker v-else @change="bindPickerChange"  :range-key="'name'" :value="index" :range="mroomList" class="pickerDom">
					<view class="uni-input">{{mroomList[index].name}}</view>
				</picker>
			</view>
			<view class="titleView">
				<view class="viewLabel">参加人数：</view>
				<view v-if="type=='show'">{{form.participant_count}}</view>
				<input v-else v-model="form.participant_count" class="inputStyle"/>
			</view>
			<view class="titleView">
				<view class="viewLabel">参会领导：</view>
				<view v-if="type=='show'">{{form.key_participants}}</view>
				<input v-else v-model="form.key_participants" class="inputStyle"/>
			</view>
			<view class="dateView">
				<view class="viewLabel">预约时间：</view>
				<view v-if="type=='show'">{{form.mdate}}</view>
				<uni-datetime-picker v-else style="width: 540upx;" type="date" :clear-icon="false" v-model="form.mdate" @change="mdateChange"/>
			</view>
			<view class="titleView">
				<view class="viewLabel">备注：</view>
				<view v-if="type=='show'">{{form.note}}</view>
				<input v-else v-model="form.note" class="inputStyle"/>
			</view>
		</view>	
		<view class="timeView">
			<view style="height: 70upx;line-height: 70upx;">
				<text>凌晨：</text>
				<view class="iconsWrap" @click="showAmChange"> 
					<uni-icons v-if="showAm" type="up" size="20" color="#ffffff"></uni-icons>
					<uni-icons v-else type="down" size="20" color="#ffffff"></uni-icons>
				</view>
			</view>
			<view :class="{'amBlockHide':!showAm,'amBlock': showAm}">
				<view v-for="(item,index) in timesListAm" :key="item.value" class="timeBlock ">
					<view :class="{'isSelected':item.isSelect,'isSloted':item.sloted,'timeItem': true}" @click="timeItemClickAm(index)">{{item.label}}</view>
				</view>
			</view>
			<view v-for="(item,index) in timesListPm" :key="item.value" class="timeBlock">
				<view :class="{'isSelected':item.isSelect,'isSloted':item.sloted,'timeItem': true}" @click="timeItemClickPm(index)">{{item.label}}</view>
			</view>
		</view>
		<view class="footerView">
			<text>已选时间段：</text>
			<view class="">
				<text v-for="item in selectList" :key="item.value">{{item.label}}、</text>
			</view>
			<view>共{{totalCount}}小时</view>
			<view style="position: relative;text-align: right;">
				<button  
                    class="mini-btn buttonSure" type="primary" size="mini"
					v-for="item in transitions" 
					:key="item.id"
					:type="item.attribute_type === 2 ? 'danger' : 'primary'"
					@click="submit(item.id)"
				>{{ item.name }}</button>
				<button @click="uni.navigateBack(-1)" size="mini" class="mini-btn">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				index:0,
				totalCount:0,
				pickDate:'',
				mroomId:'',
				type:'',
				ticketId:null,
				showAm:false,
				bookingTitle:'',
				form:{
					id:'',	
					note:'',
					title:'',
					mroom:'',
					mdate:'',
					slots:[],
					create_by_phone:'',
					key_participants:'',
					participant_count:'',
					belong_dept:uni.getStorageSync('userInfo').belong_dept
				},
				selectList:[],
				mroomList: [],
				transitions:[],
				//凌晨0-6点
				timesListAm:[
					{value:0,label:'00:00-00:30',isSelect:false,sloted:false},
					{value:1,label:'00:30-01:00',isSelect:false,sloted:false},
					{value:2,label:'01:00-01:30',isSelect:false,sloted:false},
					{value:3,label:'01:30-02:00',isSelect:false,sloted:false},
					{value:4,label:'02:00-02:30',isSelect:false,sloted:false},
					{value:5,label:'02:30-03:00',isSelect:false,sloted:false},
					{value:6,label:'03:00-03:30',isSelect:false,sloted:false},
					{value:7,label:'03:30-04:00',isSelect:false,sloted:false},
					{value:8,label:'04:00-04:30',isSelect:false,sloted:false},
					{value:9,label:'04:30-05:00',isSelect:false,sloted:false},
					{value:10,label:'05:00-05:30',isSelect:false,sloted:false},
					{value:11,label:'05:30-06:00',isSelect:false,sloted:false}
				],
				timesListPm:[
					{value:12,label:'06:00-06:30',isSelect:false,sloted:false},
					{value:13,label:'06:30-07:00',isSelect:false,sloted:false},
					{value:14,label:'07:00-07:30',isSelect:false,sloted:false},
					{value:15,label:'07:30-08:00',isSelect:false,sloted:false},
					{value:16,label:'08:00-08:30',isSelect:false,sloted:false},
					{value:17,label:'08:30-09:00',isSelect:false,sloted:false},
					{value:18,label:'09:00-09:30',isSelect:false,sloted:false},
					{value:19,label:'09:30-10:00',isSelect:false,sloted:false},
					{value:20,label:'10:00-10:30',isSelect:false,sloted:false},
					{value:21,label:'10:30-11:00',isSelect:false,sloted:false},
					{value:22,label:'11:00-11:30',isSelect:false,sloted:false},
					{value:23,label:'11:30-12:00',isSelect:false,sloted:false},
					{value:24,label:'12:00-12:30',isSelect:false,sloted:false},
					{value:25,label:'12:30-13:00',isSelect:false,sloted:false},
					{value:26,label:'13:00-13:30',isSelect:false,sloted:false},
					{value:27,label:'13:30-14:00',isSelect:false,sloted:false},
					{value:28,label:'14:00-14:30',isSelect:false,sloted:false},
					{value:29,label:'14:30-15:00',isSelect:false,sloted:false},
					{value:30,label:'15:00-15:30',isSelect:false,sloted:false},
					{value:31,label:'15:30-16:00',isSelect:false,sloted:false},
					{value:32,label:'16:00-16:30',isSelect:false,sloted:false},
					{value:33,label:'16:30-17:00',isSelect:false,sloted:false},
					{value:34,label:'17:00-17:30',isSelect:false,sloted:false},
					{value:35,label:'17:30-18:00',isSelect:false,sloted:false},
					{value:36,label:'18:00-18:30',isSelect:false,sloted:false},
					{value:37,label:'18:30-19:00',isSelect:false,sloted:false},
					{value:38,label:'19:00-19:30',isSelect:false,sloted:false},
					{value:39,label:'19:30-20:00',isSelect:false,sloted:false},
					{value:40,label:'20:00-20:30',isSelect:false,sloted:false},
					{value:41,label:'20:30-21:00',isSelect:false,sloted:false},
					{value:42,label:'21:00-21:30',isSelect:false,sloted:false},
					{value:43,label:'21:30-22:00',isSelect:false,sloted:false},
					{value:44,label:'22:00-22:30',isSelect:false,sloted:false},
					{value:45,label:'22:30-23:00',isSelect:false,sloted:false},
					{value:46,label:'23:00-23:30',isSelect:false,sloted:false},
					{value:47,label:'23:30-24:00',isSelect:false,sloted:false}
				]
			}
		},
		onLoad(options) {
			let that = this;
			that.form.id='';
			that.selectList = [];
			that.mroomId = options.mroomId;
			that.getmRooms();
			if(options.item){
				let bookingItem = JSON.parse(options.item);
				that.form = Object.assign({},bookingItem);
				that.ticketId = that.form.ticket;
				that.getTransitions();
			}else{
				that.getTransitions();
			}
			if(options.slots){
				 that.form.slots = [];
				let slots = options.slots.split(',');
				if(slots.length>0){
					slots.forEach(item=>{
						let slot = Number(item);
						that.form.slots.push(slot);
						if(slot<12){
							that.timesListAm[slot].isSelect = true;
							that.selectList.push(that.timesListAm[slot])
						}else{
							that.timesListPm[slot].isSelect = true;
							that.selectList.push(that.timesListPm[slot])
						}
					})
					that.totalCount = slots.length*0.5;
				}
			}
		},
		methods:{
			getTransitions(){
				let that = this;
				if(that.ticketId!==null){
					that.$api.getTransition(that.ticketId).then(res=>{
						that.transitions = res;
					})
				}else{
					that.$api.workflowInitkey('booking').then(res=>{
						that.transitions = res.transitions;
						that.workflow = res.workflow;
					})
				}
			},
			getmRooms(){
				let that = this;
				that.$api.getMroom({ page: 0}).then(res=>{
					that.mroomList = res;
					if(that.mroomId!==''&&res.length>0){
						that.form.mroom = res[0].id;
						res.forEach((item,index)=>{
							if(item.id==that.mroomId){
								that.index = index ;
							}
						})
					}else{
						that.index = null;
					}
				}).catch(e=>{})
			},
			showAmChange(){
				this.showAm = !this.showAm;
			},
			timeItemClickAm(index){
				if(this.timesListPm[index].sloted){
					
				}else{
					this.timesListAm[index].isSelect = !this.timesListAm[index].isSelect;
					this.clickItems();
				}
			},
			timeItemClickPm(index){
				if(this.timesListPm[index].sloted){
					
				}else{
					this.timesListPm[index].isSelect = !this.timesListPm[index].isSelect;
					this.clickItems();
				}
			},
			clickItems(){
				let that = this;
				that.selectList = [];
				let lists = [],slots=[];
				that.timesListAm.forEach(item=>{
					if(item.isSelect){
						lists.push(item)
						slots.push(item.value);
					}
				})
				that.timesListPm.forEach(item2=>{
					if(item2.isSelect){
						lists.push(item2)
						slots.push(item2.value);
					}
				})
				setTimeout(()=>{
					that.totalCount = slots.length*0.5;
					that.selectList = lists;
					that.form.slots = slots;
				},500)
			},
			//选择会议室和日期后查询有无预定
			bindPickerChange(e) {
				this.form.mroom = e.detail.value;
				this.index = e.detail.value;
				if(this.form.mdate!==''&&this.form.mdate!==null){
					this.getmRoomSlot();
				}
			},
			mdateChange(){
				if(this.form.mroom!==''&&this.form.mroom!==null){
					this.getmRoomSlot();
				}
			},
			getmRoomSlot(){
				let that = this;
				let form = {};
				form.page = 0;
				form.mroom = that.form.mroom;
				form.mdate = that.form.mdate;
				that.timesListAm.forEach(slot=>{
					slot.sloted = false;
				})
				that.timesListPm.forEach(slot=>{
					slot.sloted = false;
				})
				that.$api.bookingSlot(form).then(res=>{
					res.forEach(item=>{
						if(item.slot<12){
							that.timesListAm[item.slot].sloted = true;
						}else{
							that.timesListPm[item.slot].sloted = true;
						}
						
					})
				})
			},
			//选择会议室和日期后查询有无预定
			submit(id){
				let that = this;
				if(that.form.id == "") {
					that.$api.bookingCreate(that.form).then(res=>{
						that.form.id = res.id;
						that.ticketSubmit(id,that.form.id)
					})
				}else{
					that.$api.bookingUpdate(that.form.id, that.form).then(res=>{
						that.ticketSubmit(id,that.form.id)
					})
				}
			},
			ticketSubmit(id,t_id){
				let that = this;
				let params = {};
				params.title = that.mroomList[that.index].name+'预约';
				params.workflow = that.workflow ;
				params.transition = id;
				params.ticket_data = {t_id:t_id};
				that.$api.ticketCreate(params).then(res=>{
					uni.navigateBack({
					    delta: 1
					});
				})
			},
		},
	}
</script>

<style scoped>
	.container{
		height: 100%;
		padding: 0!important;
		background-color: #ffffff;
	}
	.topView{
		width: 100%;
	}
	.roomView,.dateView,.titleView{
		height: 35px;
		display: flex;
		padding: 10upx;
		line-height: 35px;
		margin-bottom: 10upx;
		box-sizing: border-box;
		background-color: #ffffff;
	}
	.inputStyle{
		height: 35px;
		width: 560upx;
		padding: 0 10px;
		line-height: 35px;
		border-radius: 10upx;
		display: inline-block;
		box-sizing: border-box;
		border: 1px solid #e5e5e5;
	}

	.viewLabel{
		width: 160upx;
		font-size: 30upx;
		text-align: right;
		display: inline-block;
	}
	.iconsWrap{
		width: 40upx;
		height: 40upx;
		display: inline-block;
		line-height: 40upx;
		border-radius: 25upx;
		text-align: center;
		background-color: #74ddfc;
		border: 1px solid #74ddfc;
	}
	.pickerDom{
		height: 35px;
		width: 560upx;
		line-height: 35px;
		padding-left: 20upx;
		border-radius: 8upx;
		box-sizing: border-box;
		border: 1px solid #e5e5e5;
	}
	.timeView{
		width: 100%;
		padding: 10upx;
		box-sizing: border-box;
	}
	.amBlock{
		display: block;
	}
	.amBlockHide{
		display: none;
	}
	.timeBlock{
		width: 25%;
		padding: 6upx;
		height: 70upx;
		margin: 10upx 0;
		font-size: 28upx;
		line-height: 70upx;
		display: inline-block;
		box-sizing: border-box;
	}
	.timeItem{
		color: #666666;
		text-align: center;
		border-radius: 10upx;
		background-color: #b9f0cb;
		border: 1upx solid #eeeeee;
	}
	.timeItem.isSelected{
		background-color: #00a870;
		color: #fff;
	}
	.timeItem.isSloted{
		background-color: #fac275!important;
		  color: #fff;
	}
	.footerView{
		box-sizing: border-box;
		width: 100%;
		padding:10px;
		background-color: #ffffff;
		font-size: 12px;
		color: #666666;
	}
	.buttonSure{
		margin-top: 10upx;
		margin-right: 10upx;
	}
</style>