<template><!--新增会议室-->
	<div>
    <group label-width="4.5em" label-margin-right="2em" label-align="right" gutter="0">
      <cell title="会议室" :value="roomInfo.roomCode" ></cell>
      <cell title="预约日期" :value="bookingDate" ></cell>
      <datetime title="开始时间" v-model="startTime" @on-change="changeStartTime" format="HH:mm" :minute-list="['00', '30']" :min-hour="minHour" :max-hour="maxHour" placeholder="请选择"></datetime>
      <datetime title="结束时间" v-model="endTime" @on-change="changeEndTime" format="HH:mm" :minute-list="['00', '30']" :min-hour="minHour" :max-hour="maxHour" placeholder="请选择"></datetime>
      <popup-picker title="所在部门" :data="dataDept" v-model="valueDept" @on-change="changeDept" placeholder="请选择"></popup-picker>
      <x-input title="会议名称" v-model="saveInfo.meetingName" placeholder="请输入" text-align="right"></x-input>
      <cell title="会议类型" :value="roomInfo.roomFunctionName"></cell>
      <cell title="会议主持" :value="hostUserInfo.userName" @click.native="showUserModal('1')" ></cell>
      <popup-picker title="会议人数" :data="dataNumber" v-model="valueNumber" @on-change="changeNumber" placeholder="请选择"></popup-picker>
      <cell title="参会人员" @click.native="showUserModal('2')" >
      	<span v-for="(item,index) in innerUserInfos" :key="index">{{item.userName}} </span>
      </cell>
      <cell title="外部人员">
      	<Tag v-for="(item, index) in outerMembers" :key="index" :name="index" closable @on-close="removeOuters">{{item.userName}}({{item.companyName}})</Tag>
      	<Button icon="ios-add" type="dashed" size="small" @click="showOuterMember">添加</Button>
      </cell>
      <cell title="设备申请" :value="valueDevice.length>0 ? valueDevice.toString() : '请选择'" @click.native="showDeviceData" is-link></cell>
      <x-textarea :max="200" v-model="saveInfo.remarks" placeholder="如有需要拜访桌签和资料发放，下备注内注明"></x-textarea>
      
    </group>
    <div style="margin: 20px 15px;">
    	<Button type="primary" long size="large" @click="saveMeetingInfo">提交</Button>
    </div>
    
    <div v-transfer-dom>
    	<!--外部人员-->
      <popup v-model="outerMemberModal">
        <div class="popup0">
          <div class="bottom-btn">
          	<div class="left-btn" @click="outerMemberModal=false">取消</div>
          	<div class="right-btn" @click="saveOuterMember">新增</div>
          </div>
          <group label-width="6em" label-margin-right="2em" label-align="right" gutter="0">
          	<x-input title='所属公司' type="text" v-model="outerUserInfo.companyName"></x-input>
          	<x-input title='参会人姓名' type="text" v-model="outerUserInfo.userName"></x-input>
			      <x-input title='手机号' type="tel" v-model="outerUserInfo.phone"></x-input>
			    </group>
        </div>
      </popup>
      <!--设备申请-->
      <popup v-model="deviceModal">
        <div class="popup0">
          <div class="bottom-btn">
          	<div class="left-btn" @click="deviceModal=false">取消</div>
          	<div class="right-btn" @click="saveDeviceInfo">确认</div>
          </div>
          <checklist required :options="dataDevice" v-model="valueDevice"></checklist>
        </div>
      </popup>
      <!--人员列表-->
      <popup v-model="userModal" height="70%">
        <div class="popup0">
        	<Collapse class="user-tab">
		        <Panel v-for="(item, index) in userList" :name="item.detailId" :key="index">{{item.detailName}}
	            <p slot="content">
	            	<ul class="user-list">
	            		<li v-for="(item2, index2) in item.userList" @click="selectUser(item2)" :key="index2">
	            			<span>{{item2.userName}}</span>
	            			<icon v-if="userType == '1' && hostUserId == item2.userId" type="success-no-circle"></icon>
	            			<icon v-if="userType == '2' && innerUserIds.indexOf(item2.userId)>-1" type="success-no-circle"></icon>
	            		</li>
	            	</ul>
	            </p>
		        </Panel>
    			</Collapse>
    			<div style="width: 100%;height: 40px;"></div>
    			<div class="bottom-fixed">
    				<Button type="primary" long size="large" @click="saveUserInfoSelect">确定</Button>
    			</div>
        </div>
      </popup>
    </div>
    
	</div>
</template>

<script>
	import { TransferDom, GroupTitle, Group, Cell, XInput, PopupPicker, Datetime, XTextarea, Checklist, Flexbox, FlexboxItem, XButton, Icon } from 'vux'
	import {
		getMeetingUsingProject, //获取申请设备列表
		getDeptAndUserByCompanyId,
		startMeetingRoom, //保存会议室预定信息
	} from './service/getData.js';
	export default {
		name: '',
		directives: {
	    TransferDom
	  },
    components: {
      Group,
      GroupTitle,
      Cell,
      Checklist,
      XInput,
      PopupPicker,
      Datetime,
      XTextarea,
      Flexbox, 
      FlexboxItem,
      XButton,
      Icon
    },
		data () {
	    return {
	    	dataDept: [['餐饮部', '综合部2', '人力资源部']], //data -- 部门
      	valueDept: [], //value -- 部门
      	meetName: '', //会议名称
      	startTime: '', //开始时间
      	endTime: '', //结束时间
      	minHour: 8, //限定小时最小值
      	maxHour: 18, //限定小时最大值
      	peopleNum: 1, //会议人数
      	dataNumber: [['1','2','3','4','5','6','7','8','9','10']], //data -- 会议人数
      	valueNumber: [1], //value -- 会议人数
      	deviceModal: false, //弹层 -- 设备申请
      	dataDevice: ['桌签','茶座','投影仪','资料摆放'], //data -- 申请设备
      	valueDevice: [], //value -- 申请设备
      	outerMemberModal: false, //弹层 -- 外部人员
      	outerUserInfo: { //外部参会人员数据，单条
      		companyName: '',
      		userName: '',
      		phone: ''
      	},
      	outerMembers: [], //外部参会人员，集
      	userModal: false, //弹层 -- 人员列表
      	userType: '1', //1.主持人； 2.参会人员
      	hostUserId: '', //主持人信息id
      	hostUserInfo: {}, //已选的主持人信息
      	innerUserIds: [], //已选的参会人员ids
      	innerUserInfos: [], //已选的参会人员list
      	
	    	bookingDate: '', //预定的日期
	    	roomInfo: {}, //会议室详情
	    	deptList: [], //部门列表
	    	deviceList: [], //申请设备列表
	    	userList: [], //人员列表
	    	selInnerMember: [], //已选的内部参会人员
	    	selectHostUserId: '', //已选的主持人
	    	
	    	saveInfo: {
	    		companyId: localStorage.companyId || '', //公司id*
					meetingRoomId: '', //会议室id*
					meetingName: '', //会议名称*
					meetingType: '', //会议类型*
					peopleAmount: 1, //参会人数*
					deptId: '', //部门id*
					deptName: '', //部门名称*
					reserverMessage: '', //预定人信息(userName,userId,userAccount,phone)
					hostMessage: '', //主持人信息(userName,userId,userAccount,phone)
					needEqupments: '', //申请设备（array）会议服务项目
					innerAttendMeetingMember: '', //内部参会人员*
					outerAttendMeetingMember: '', //外部参会人员
					startDate: '', //开始时间*
					endDate: '', //结束时间*
					mattersNeedAttention: '', //注意事项
					remarks: '', //备注
					userId: localStorage.memberId || '', //当前用户Id
					adminId: '', //管理员Id
	    	}
	    }
	 	},
	 	created: function() {
	 		if(this.$route.params.roomInfo) {
	 			this.roomInfo = this.$route.params.roomInfo;
	 			console.log("roomInfo===", this.roomInfo);
	 		} else {
	 			this.roomInfo = JSON.parse(localStorage.roomInfo);
	 			console.log("roomInfo===", this.roomInfo);
	 		}
	 		if(this.$route.params.bookingDate) {
	 			this.bookingDate = this.$route.params.bookingDate;
	 			console.log("bookingDate===", this.bookingDate);
	 		}
	 		this.initData();
	 		this.getUserList();
	 		this.getDeviceList();
	 	},
	 	methods: {
	 		initData() {
	 			var self = this;
	 			//预订人信息
	 			var reserverInfo = {
	 				userName: localStorage.fullName || '',
	 				userId: localStorage.memberId || '',
	 				userAccount: localStorage.userAccount || '',
	 				phone: localStorage.phoneNumber || ''
	 			};
	 			self.saveInfo.reserverMessage = JSON.stringify(reserverInfo);
	 			//存储房间信息
	 			self.saveInfo.meetingRoomId = self.roomInfo.meetingRoomInfoId;
	 			self.saveInfo.meetingType = self.roomInfo.roomFunction;
	 			self.saveInfo.adminId = self.roomInfo.adminUserId;
	 			//部门列表
				self.deptList = self.roomInfo.deptList;
				if(self.deptList.length > 0) {
					var tempDepts = [];
					self.deptList.forEach(item => {
						tempDepts.push(item.deptName);
					})
					self.dataDept = [tempDepts];
				}
	 			//预约时间限制
	 			if(self.roomInfo.openStartTime) {
	 				self.minHour = parseInt(self.roomInfo.openStartTime.split(":")[0]);
					self.maxHour = parseInt(self.roomInfo.openEndTime.split(":")[0]);
	 			}
				//会议人数限制
				var tempNumber = [];
				for(var i=1; i<=self.roomInfo.maxPerson; i++) {
					tempNumber.push(i);
				}
				self.dataNumber = [tempNumber];
	 		},
	 		getDeviceList() { //获取申请设备列表
	 			var self = this;
	 			self.deviceList = [];
	 			self.$Spin.show();
	 			getMeetingUsingProject({}).then(res => {
	 				self.$Spin.hide();
	 				if(res.status == 200) {
	 					self.deviceList = res.data;
	 					if(self.deviceList.length > 0) {
	 						var tempDevice = [];
	 						self.deviceList.forEach(item => {
	 							tempDevice.push(item.name);
	 						})
	 						self.dataDevice = tempDevice;
	 						
	 					}
	 				}
	 			})
	 		},
	 		getUserList() { //获取部门和部门下的用户列表
	 			var self = this;
	 			self.userList = [];
	 			self.dataUser = [];
	 			self.$Spin.show();
	 			getDeptAndUserByCompanyId({companyId: localStorage.companyId || ''}).then(res => {
	 				self.$Spin.hide();
	 				if(res.status == 200) {
	 					self.userList = res.data;
	 					self.userList.forEach(item => {
	 						if(item.userList.length > 0) {
	 							item.userList.forEach(user => {
	 								user.deptId = item.detailId;
	 								user.deptName = item.detailName;
	 							})
	 						}
	 					})
	 				}
	 			})
	 		},
	 		changeStartTime(value) { //change开始时间
	 			this.saveInfo.startDate = this.bookingDate + ' ' + value + ":00";
	 			console.log("开始时间："+this.saveInfo.startDate)
	 		},
	 		changeEndTime(value) { //change结束时间
	 			this.saveInfo.endDate = this.bookingDate + ' ' + value + ":00";
	 			console.log("结束时间："+this.saveInfo.endDate)
	 		},
	 		changeDept(value) { //change所在部门
	 			var self = this;
	 			if(this.deptList.length > 0) {
	 				this.deptList.forEach(item => {
	 					if(value == item.deptName) {
	 						self.saveInfo.deptId = item.deptId;
	 						self.saveInfo.deptName = item.deptName;
	 					}
	 				})
	 			}
	 			console.log("deptId："+self.saveInfo.deptId+"；deptName="+self.saveInfo.deptName)
	 		},
	 		changeNumber(value) { //change参会人数
	 			this.saveInfo.peopleAmount = value[0];
	 			console.log("参会人数："+this.saveInfo.peopleAmount);
	 		},
	 		showUserModal(type) { //显示用户选择modal层
	 			this.userType = type; //1.主持人  2.参会人员
	 			this.userModal = true;
	 		},
	 		selectUser(obj) { //change勾选状态
	 			if(this.userType == '1') {
	 				this.hostUserId = obj.userId;
	 				this.hostUserInfo = obj;
	 			}
	 			else if(this.userType == '2') {
	 				if(this.innerUserIds.indexOf(obj.userId) > -1) {
	 					var index = this.innerUserIds.indexOf(obj.userId);
	 					this.innerUserIds.splice(index,  1);
	 					this.innerUserInfos.splice(index,  1);
	 				}
	 				else {
	 					this.innerUserIds.push(obj.userId);
	 					this.innerUserInfos.push(obj);
	 				}
	 				console.log("innerUserIds: " + this.innerUserIds);
	 				console.log("innerUserInfos: " + JSON.stringify(this.innerUserInfos));
	 			}
	 		},
	 		saveUserInfoSelect() { //保存已选的用户信息
	 			if(this.userType == '1') { //主持人
	 				this.saveInfo.hostMessage = JSON.stringify(this.hostUserInfo)
	 			}
	 			else if(this.userType == '2') {
	 				this.saveInfo.innerAttendMeetingMember = JSON.stringify(this.innerUserInfos);
	 			}
	 			this.userModal = false;
	 		},
    	showOuterMember() { //显示外部人员弹层
    		this.outerUserInfo = { //外部参会人员数据，单条
      		companyName: '',
      		userName: '',
      		phone: ''
      	};
    		this.outerMemberModal = true;
    	},
    	removeOuters(event, name) { //移除外部参会人员
				this.$Spin.show();
				this.outerMembers.splice(name, 1);
				this.$Spin.hide();
			},
    	saveOuterMember() { //保存外部参会人员信息
    		var self = this;
				if(this.outerUserInfo.companyName == '') {
					this.$Message.error('请输入外部参会人员的公司信息');
					return false;
				}
				else if(this.outerUserInfo.userName == '') {
					this.$Message.error('请输入外部参会人员的姓名');
					return false;
				}
				else if(this.outerUserInfo.phone == '') {
					this.$Message.error('请输入外部参会人员的手机号');
					return false;
				}
				this.outerMembers.push(JSON.parse(JSON.stringify(this.outerUserInfo)));
				this.outerMemberModal = false;
    	},
    	showDeviceData() { //显示设备列表弹层
    		this.deviceModal = true;
    	},
    	saveDeviceInfo() {
    		var self = this;
    		var deviceId = [];
    		self.deviceList.forEach(item => {
    			self.valueDevice.forEach(name => {
    				if(name == item.name) {
    					deviceId.push(item.value);
    				}
    			})
    		})
    		self.saveInfo.needEqupments = deviceId.toString();
    		self.deviceModal = false;
    		console.log('已选的设备ids：'+self.saveInfo.needEqupments);
    	},
    	checkVerify() { //保存会议 -- 表单校验
				if(this.saveInfo.meetingName == '') {
					this.$Message.error('请输入会议名称');
					return false;
				}
				if(this.saveInfo.peopleAmount == '') {
					this.$Message.error('请选择参会人数');
					return false;
				}
				if(this.saveInfo.deptId == '') {
					this.$Message.error('请选择部门');
					return false;
				}
				if(this.saveInfo.innerAttendMeetingMember == '') {
					this.$Message.error('请选择内部参会人员');
					return false;
				}
				if(this.saveInfo.startDate == '') {
					this.$Message.error('请选择会议开始时间');
					return false;
				}
				if(this.saveInfo.endDate == '') {
					this.$Message.error('请选择会议开始时间');
					return false;
				}
				return true;
			},
    	saveMeetingInfo() {
    		var self = this;
    		self.saveInfo.outerAttendMeetingMember = JSON.stringify(self.outerMembers); //外部参会人员
    		console.log(JSON.stringify(this.saveInfo));
    		if(self.checkVerify()) {
    			self.$Spin.show();
    			startMeetingRoom(self.saveInfo).then(res => {
    				self.$Spin.hide();
    				if(res.status == 200) {
    					self.$Message.success("保存成功");
    					self.$router.push("/meetingList");
    				}
    				else {
    					self.$Message.error(res.message);
    				}
    			})
    		}
    	}
	 	}
	}
</script>

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