<template><!--会议管理列表-->
	<div class="page-box">
    <tab :line-width="2" bar-active-color="#2d8cf0" active-color="#2d8cf0" class="tab-top">
      <tab-item selected @on-item-click="changeName">会议列表</tab-item>
      <tab-item @on-item-click="changeName">已结束</tab-item>
      <tab-item @on-item-click="changeName">我发起的</tab-item>
      <tab-item :badge-label="checkNum" @on-item-click="changeName">待我审批</tab-item>
    </tab>
    <tab v-show="tabName == 3" :line-width="2" bar-active-color="#2d8cf0" active-color="#2d8cf0">
      <tab-item selected @on-item-click="changeCheckState">未完成</tab-item>
      <tab-item @on-item-click="changeCheckState">已完成</tab-item>
    </tab>
    <!--搜索栏-->
    <div class="form-search">
    	<Input v-model='meetingName' placeholder="搜索会议名称" search @on-change="changeMeetingName">
	      <!--<Icon type="ios-search" slot="prefix" />-->
	    </Input>
	    <Icon v-if="tabName != 3" type="ios-funnel-outline" size="21" color="#32A4DF" @click.native='searchDrawer = true' />
    </div>
    
    <!--侧边栏，条件筛选-->
    <Drawer title="" width="168" placement="left" :closable="false" v-model="searchDrawer">
      <div class="form-item">
      	<p>状态</p>
      	<template v-if="tabName == 0 || tabName == 2">
      		<Button :type="meetingState=='' ? 'primary' : 'default'" size="small" @click="changeMeetingSate('')">全部</Button><br />
      		<Button :type="meetingState=='1' ? 'primary' : 'default'" size="small" @click="changeMeetingSate('1')">进行中</Button>
	      	<Button :type="meetingState=='0' ? 'primary' : 'default'" size="small" @click="changeMeetingSate('0')">未开始</Button>
	      	<Button :type="meetingState=='2' ? 'primary' : 'default'" size="small" @click="changeMeetingSate('2')">已取消</Button>
      	</template>
      	<template v-if="tabName == 1">
      		<Button :type="signSate=='' ? 'primary' : 'default'" size="small" @click="changeSignSate('')">全部</Button><br />
      		<Button :type="signSate=='1' ? 'primary' : 'default'" size="small" @click="changeSignSate('1')">已签到</Button>
	      	<Button :type="signSate=='0' ? 'primary' : 'default'" size="small" @click="changeSignSate('0')">未签到</Button>
	      	<Button :type="signSate=='2' ? 'primary' : 'default'" size="small" @click="changeSignSate('2')">请假</Button>
      	</template>
      </div>
      <div class="form-item">
      	<p>类型</p>
      	<Button :type="meetingType=='' ? 'primary' : 'default'" size="small" @click="changeMeetingType('')">全部</Button><br />
      	<Button :type="meetingType==item.detailCode ? 'primary' : 'default'" v-for="(item, index) in typeData" :key="index" @click="changeMeetingType(item.detailCode)" size="small">{{item.detailName}}</Button>
      </div>
      <div class="form-item">
      	<Button size="small" @click="clearSearchData">重置</Button>
      	<Button type="primary" size="small" @click="sureSearch">确定</Button>
      </div>
    </Drawer>
    
    <!--数据列表-->
    <div v-for="(item,index) in dataList" @click="showDetail(item.id)" :key="index" class="list-box">
    	<template v-if="tabName == 3">
    		<div v-if="item.instanceState == '1'" class="list-state state-orange">流转中</div>
    		<div v-if="item.instanceState == '2'" class="list-state state-green">已通过</div>
    		<div v-if="item.instanceState == '3'" class="list-state state-grey">被驳回</div>
    	</template>
    	<template v-else-if="tabName == 1">
    		<div class="list-state" :class="item.signState == 0 ? 'state-orange' : (item.signState == 1 ? 'state-green' : 'state-blue')">{{item.signStateName}}</div>
    	</template>
    	<template v-else>
    		<div class="list-state" :class="item.meetingState == 1 ? 'state-green' : (item.meetingState == 0 ? 'state-orange' : 'state-grey')">{{item.meetingStateName}}</div>
    	</template>
    	<dl>
    		<span class="list-time">{{item.tempDate}}</span>
    	</dl>
    	<dl>
    		<span class="list-title">{{item.meetingName}} | {{item.meetingTypeName}}</span>
    	</dl>
    	<dl>
    		<span class="list-name">{{item.hostName}}</span>
    	</dl>
    	<dl>
    		<span class="list-text">
    			<Icon type="md-time" color="#797979" size="15" /> {{item.showTime}}</span>
    	</dl>
    </div>
    <div v-if="tabName == 2" class="bottom-box">
    	<div class="bottom-btn">
    		<Button type="primary" long @click="bookMeeting">会议室预定</Button>
    	</div>
    </div>
	</div>
</template>

<script>
	import { Tab, TabItem } from 'vux';
	import {
		getMeetingTypes, //查询会议类型数据字典
		getMeetingListForApp, //查询会议列表
		getMeetingListEndForApp, //查询已结束会议列表
		getMeetingListMyForApp, //查询我发起的会议列表
		getMeetingListCheckForApp, //查询我审批的会议列表
		getCornerMarkNumByUserId, //获得APP会议审核角标信息
	} from './service/getData.js';
	export default {
		name: '',
		components: {
	    Tab,
	    TabItem,
	  },
		data () {
	    return {
	    	tabName: 0, //0.会议列表  1.已结束  2.我发起的  3.待我审批
	    	tabState: 0, //0.未完成  1.已完成
	    	checkNum: '', //待审核数量
	    	searchDrawer: false,
	    	typeData: [], //会议类型数据
	    	meetingName: '', //会议名称
	    	meetingState: '', //会议状态
	    	meetingType: '', //会议类型
	    	signSate: '', //签到类型
	    	searchForm: {
	    		companyId: localStorage.companyId || '',
	    		userId: localStorage.memberId || '',
	    		meetingName: '', //会议名称
	    		meetingSate: '', //会议状态(0:待开始;1:进行中;2:已结束;3:已取消)
	    		meetingType: '', //会议类型
	    		pageSize: 10000, //每页数量
	    		pageIndex: 1, //当前页
	    	},
	    	finishForm: {
	    		companyId: localStorage.companyId || '',
	    		userId: localStorage.memberId || '',
	    		meetingName: '', //会议名称
	    		signSate: '', //签到状态(0:未签到;1:已签到;2:请假)
	    		meetingType: '', //会议类型
	    		pageSize: 10000, //每页数量
	    		pageIndex: 1, //当前页
	    	},
	    	checkForm: { //待我审批，查询条件
	    		companyId: localStorage.companyId || '',
	    		userId: localStorage.memberId || '',
	    		meetingName: '', //会议名称
	    		checkState: 2, //审核状态(1:已完成;2:未完成;)
	    		meetingType: '', //会议类型
	    		pageSize: 100000,
	    		pageIndex: 1,
	    	},
	    	dataList: [],
	    }
	  },
	  created: function() {
	  	this.initData();
	  },
	  methods: {
	  	initData() {
	  		this.clearSearchData(); //重置查询条件
	  		this.getTypeList(); //查询会议室类型
	  		this.getMeetingList();
	  		this.getCheckNum(); //获取待审核的数量
	  	},
	  	getTypeList() {
	  		var self = this;
	  		self.typeData = [];
	  		self.$Spin.show();
	  		getMeetingTypes().then(res => {
	  			self.$Spin.hide();
	  			if(res.status == 200) {
	  				self.typeData = res.data;
	  			}
	  		})
	  	},
	  	changeName(index) { //0.会议列表  1.已结束的  2.我发起的  3.待我审批
	  		this.tabName = index;
	  		this.meetingName = ''; //切换列表的时候，清空搜索框
	  		if(this.tabName == 0) {
	  			this.getMeetingList(); //会议列表
	  		}
	  		else if(this.tabName == 1) {
	  			this.getFinishList(); //已结束的
	  		}
	  		else if(this.tabName == 2) {
	  			this.getMyList(); //我发起的
	  		}
	  		else if(this.tabName == 3) { //待我审批
	  			this.checkForm.checkState = 2;
	  			this.getMyApprovalList();
	  		}
	  	},
	  	changeMeetingName() { //change -- 会议名称
	  		if(this.tabName == 0) {
	  			this.searchForm.meetingName = this.meetingName;
	  			this.getMeetingList(); //会议列表
	  		}
	  		else if(this.tabName == 1) {
	  			this.finishForm.meetingName = this.meetingName;
	  			this.getFinishList(); //已结束的
	  		}
	  		else if(this.tabName == 2) {
	  			this.searchForm.meetingName = this.meetingName;
	  			this.getMyList(); //我发起的
	  		}
	  		else if(this.tabName == 3) { //待我审批
	  			this.checkForm.meetingName = this.meetingName;
	  			this.getMyApprovalList();
	  		}
	  	},
	  	changeMeetingSate(state) { //会议状态：0:待开始;1:进行中;2:已结束;3:已取消
	  		this.meetingState = state;
	  	},
	  	changeMeetingType(code) { //会议类型
	  		this.meetingType = code;
	  	},
	  	changeSignSate(state) { //签到类型：0:未签到;1:已签到;2:请假
	  		this.signSate = state;
	  	},
	  	sureSearch() { //确定查询
	  		if(this.tabName == 0) {
	  			this.searchForm.meetingState = this.meetingState;
	  			this.searchForm.meetingType = this.meetingType;
	  			this.getMeetingList(); //会议列表
	  		}
	  		else if(this.tabName == 1) {
	  			this.finishForm.signSate = this.signSate;
	  			this.finishForm.meetingType = this.meetingType;
	  			this.getFinishList(); //已结束的
	  		}
	  		else if(this.tabName == 2) {
	  			this.searchForm.meetingState = this.meetingState;
	  			this.searchForm.meetingType = this.meetingType;
	  			this.getMyList(); //我发起的
	  		}
	  		this.searchDrawer = false;
	  	},
	  	clearSearchData() { //重置查询条件
	  		this.meetingState = '';
	  		this.meetingType = '';
	  		this.signSate = '';
	  	},
	  	changeCheckState(index) { //待审核列表，2.未完成、1.已完成
	  		this.tabState = index;
	  		this.meetingName = ''; //切换列表的时候，清空搜索框
	  		if(index == 0) {
	  			this.checkForm.checkState = 2;
	  		}
	  		else if(index == 1) {
	  			this.checkForm.checkState = 1;
	  		}
	  		this.getMyApprovalList();
	  	},
	  	getCheckNum() { //获取待我审批的数量
	  		var self = this;
	  		self.checkNum = "";
	  		getCornerMarkNumByUserId({userId: localStorage.memberId || ''}).then(res => {
	  			if(res.status == 200) {
	  				if(res.data.needCheckNum > 0) {
	  					self.checkNum = res.data.needCheckNum.toString();
	  				}
	  			}
	  		})
	  	},
	  	getMeetingList() { //会议列表
	  		var self = this;
	  		self.dataList = [];
	  		self.$Spin.show();
	  		getMeetingListForApp(self.searchForm).then(res => {
	  			self.$Spin.hide();
	  			if(res.status == 200) {
	  				self.dataList = res.data.records;
	  			}
	  		})
	  	},
	  	getFinishList() { //已结束的
	  		var self = this;
	  		self.dataList = [];
	  		self.$Spin.show();
	  		getMeetingListEndForApp(self.finishForm).then(res => {
	  			self.$Spin.hide();
	  			if(res.status == 200) {
	  				self.dataList = res.data.records;
	  			}
	  		})
	  	},
	  	getMyList() { //我发起的
	  		var self = this;
	  		self.dataList = [];
	  		self.$Spin.show();
	  		getMeetingListMyForApp(self.searchForm).then(res => {
	  			self.$Spin.hide();
	  			if(res.status == 200) {
	  				self.dataList = res.data.records;
	  			}
	  		})
	  	},
	  	getMyApprovalList() { //待我审批
	  		var self = this;
	  		self.dataList = [];
	  		getMeetingListCheckForApp(self.checkForm).then(res => {
	  			if(res.status == 200) {
	  				self.dataList = res.data.records;
	  			}
	  		})
	  	},
	  	bookMeeting() {
	  		this.$router.push('/meetingBooking');
	  	},
	  	showDetail(id) {
  			this.$router.push("/meetingDetail?id="+id+"&type="+this.tabName);
	  	},
	  }
	}
</script>

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

