<!-- 人员列表 -->
<template>
	<div class='personList'>
		<div class="listDiv">
			<div class="departSelect">
				<span>部门：</span>
				<!--v-if="options.length > 0"-->
				<Treeselect
								style="display: inline-block;width: 90%;vertical-align: middle;"
								name="demo"
								:clearable="false"
								:searchable="false"
								:open-on-click="true"
								:open-on-focus="true"
								:alwaysOpen="false"
								:options="options"
								:default-expand-level="1"
								:max-height="400"
								placeholder="请选择部门"
								v-model="department"
								@select="selectChangeTree"
				/>
			</div>
			<div class="statusSelects">
				<span class="">工作状态：</span>
				<el-select v-model="statusValue" @change="statusSelectDo" placeholder="请选择工作状态">
					<el-option style="color: #fc9200;" label="空闲" value="0"></el-option>
					<el-option style="color: #3cc65c;" label="正常" value="1"></el-option>
					<el-option style="color: #ee4b4c;" label="忙碌" value="2"></el-option>
				</el-select>
			</div>
			<div class="statusSelects">
				<span class="">时间：</span>
				<el-date-picker
								class="timeWidth"
								v-model="timeSelect"
								type="daterange"
								start-placeholder="开始日期"
								end-placeholder="结束日期"

								:default-time="['00:00:00', '00:00:00']"
								:editable="false"
								value-format="yyyy-MM-dd HH:mm:ss"
								@change="timeSelectDo"
								placeholder="选择时间">
				</el-date-picker>
			</div>
		</div>
		<div class="listTable">
			<el-table
							:data="personListData"
							@row-click="handleClick"
							style="width: 100%">
				<el-table-column
								prop="status"
								class="firstTable"
								label=""
								width="15">
					<template slot-scope="scope">
						<span class="statusBg" :style="{background: $common.colorNum(scope.row.status)}"></span>
					</template>
				</el-table-column>
				<el-table-column
								prop="username"
								align="center"
								label="人员姓名">
				</el-table-column>
				<el-table-column
								prop="departmentIds"
								align="center"
								label="部门">
					<template slot-scope="scope">
						<span>{{departName(scope.row.departmentIds)}}</span>
					</template>
				</el-table-column>
				<el-table-column
								prop="jobs"
								align="center"
								label="岗位">
				</el-table-column>
				<!--sortable-->
				<el-table-column
								prop="workCount"
								align="center"
								label="任务数(个)">
					<template slot-scope="scope">
						<span title="进行中任务" style="margin-right: 3px;">{{scope.row.workingCount}}</span><i style="margin-right: 3px;">/</i><span title="已完成任务">{{scope.row.completedCount}}</span>
					</template>
				</el-table-column>
				<el-table-column
								prop="averageScore"
								align="center"
								label="平均评分">
				</el-table-column>
				<el-table-column
								prop="averageWorkNum"
								align="center"
								label="平均工作量">
				</el-table-column>
				<el-table-column
								prop="status"
								align="center"
								label="工作状态">
					<template slot-scope="scope">
						<span :style="{color: scope.row.status === '0' ? '#fc9200' : scope.row.status === '1' ? '#3cc65c' : '#ee4b4c'}">{{scope.row.status === '0' ? '空闲' : scope.row.status === '1' ? '正常' : '忙碌'}}</span>
					</template>
				</el-table-column>
				<!--<el-table-column-->
								<!--label="操作"-->
								<!--align="center"-->
								<!--width="150">-->
					<!--<template slot-scope="scope">-->
						<!--<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
					<!--</template>-->
				<!--</el-table-column>-->
			</el-table>
		</div>
		<div class="pageClass">
			<el-pagination
							hide-on-single-page
							background
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page.sync="currentPage"
							:page-size="pageSize"
							layout="prev, pager, next, jumper"
							:total="total">
			</el-pagination>
		</div>
		<info-dialog :showListDetailDialog="showListDetailDialog" :deOptions="deOptions" :listDetails="listDetails" @close="closeListDetailDialog"></info-dialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import infoDialog from '../../components/personInfoDialog';
	import Treeselect from '@riophae/vue-treeselect';
	// import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	import '../../assets/css/vue-tree.css';
	export default {
		name: "PersonList",
//import引入的组件需要注入到对象中才能使用
		components: { infoDialog, Treeselect},
		data () {
//这里存放数据
			return {
				department: null,
				options: [
				],
				personListData: [], // 人员详情
				currentUser: '',
				currentPage: 1,
				pageSize: 10,
				total: 0,
				deOptions: [],
				listDetails: '',
				showListDetailDialog: false,
				statusValue: null, // 状态选择
				timeSelect: '',
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			postDepartmentList() {
				this.$axios.getAllDepartment().then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						this.deOptions = res.data;
					}
				})
			},
			selectChangeTree(val) {
				console.log(val)
				console.log(this.department)
				this.department = val.id;
				this.treeSearch(val.id);
			},
			handleClick(val) {
				console.log(val)
				this.showListDetailDialog = true;
				this.listDetails = val;
				// localStorage.setItem('infoPerson', this.$Base64.encode(JSON.stringify(val)));
				// this.$router.push({name: 'personInfo'});
			},
			closeListDetailDialog() {
				this.showListDetailDialog = false;
			},
			getSelectDepartment() {
				console.log(this.currentUser);
				this.$axios.getDepartmentFind(this.currentUser.id).then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						if (res.data !== null && res.data.length > 0) {
							// this.options = res.data;
							let jsonData = JSON.stringify(res.data);
							jsonData = jsonData.replace(/departments/g, 'children');
							jsonData = jsonData.replace(/name/g, 'label');
							// console.log(jsonData)
							let parseData = JSON.parse(jsonData);
							// console.log(parseData)
							// parseData.forEach((v, i) => {
							// 	console.log(v)
							// })
							// this.setName(parseData);
							// console.log(parseData)
							// this.options = parseData;
							// this.department = parseData[0].id;
							// this.doSearch(parseData[0].id);
							this.doSearch(parseData);
						}
					}
				})
			},
			setName(datas){ //遍历树  获取id数组
				for(let i in datas){
					if (datas[i].children.length === 0) {
						delete datas[i].children;
					}
					if(datas[i].children){
						this.setName(datas[i].children);
					}
				}
				this.options = datas;
				return datas;
				// this.department = datas[0].id;
				// this.doSearch(datas[0].id);
			},
			async doSearch(val) {
				let result = await this.setName(val);
				console.log(result)
				this.department = result[0].id;
				this.getPersonList()
			},
			treeSearch(val) {
				console.log(val)
				this.department = val;
				this.getPersonList();
			},
			statusSelectDo(val) {
				this.statusValue = val;
				console.log(val)
				this.getPersonList();
			},
			timeSelectDo(val) {
				console.log(val)
				this.timeSelect = val;
				this.getPersonList();
			},
			getPersonList() {
				let st;
				let et;
				if (this.timeSelect !== '' && this.timeSelect !== null) {
					console.log(this.timeSelect[1])
					st = this.timeSelect[0];
					et = this.timeSelect[1];
				} else {
					console.log(this.timeSelect)
					st = null;
					et = null;
				}

				let obj = {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					deId: this.department,
					id: this.currentUser.id,
					status: this.statusValue,
					startTime: st,
					endTime: et
				}
				console.log(obj)
				this.$axios.getManageUserList(obj).then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						this.total = res.data.totalCount;
						this.personListData = res.data.rows;
					}
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getPersonList();
				// console.log(`当前页: ${val}`);
			},
			departName(val) {
				let name = '';
				for (let i = 0; i < this.deOptions.length; i++) {
					for (let j = 0; j < val.length; j++) {
						if (this.deOptions[i].id === val[j]) {
							name = name + this.deOptions[i].name + '、';
						}
					}
				}
				name = name.substring(0, name.length - 1);
				return name;
			}
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.postDepartmentList();
			this.currentUser = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
				let that = this;
			setTimeout(function () {
				that.getSelectDepartment();
			}, 200)
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.personList{
		height: 100%;
	}
	.listDiv{
		width: 100%;
		margin-top: 30px;
	}

	.listTable{
		margin-top: 30px;
		margin-bottom: 60px;
	}

	.listTable /deep/ .el-table td{
		padding: 0 0 !important;
		height: 73px !important;
		min-width: 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		text-overflow: ellipsis;
		vertical-align: middle;
		position: relative;
		text-align: center;
		border-right: 0 !important;
		border-left: 0 !important;
		border-bottom: 3px solid #F5F5F5;
	}

	/deep/ .el-table--border, .el-table--group {
		border: 0px solid #EBEEF5;
	}

	/deep/ .vue-treeselect__single-value {
		color: #333;
		font-size: 20px;
		margin-top: 4px;
	}

	/deep/ .vue-treeselect__placeholder,
	.vue-treeselect__single-value {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding-left: 5px;
		padding-right: 5px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		line-height: 40px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		pointer-events: none;
	}

	/deep/ .vue-treeselect__control {
		padding-left: 5px;
		padding-right: 5px;
		display: table;
		table-layout: fixed;
		width: 100%;
		height: 40px;
		border: 1px solid #a8acea;
		border-radius: 20px;
		background: #fff;
		transition-duration: 200ms;
		transition-property: border-color, box-shadow, width, height, background-color, opacity;
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	/deep/ .vue-treeselect:not(.vue-treeselect--disabled):not(.vue-treeselect--focused) .vue-treeselect__control:hover {
		border-color: #5059d5;
	}

	/deep/ .vue-treeselect__option-arrow {
		display: inline-block;
		width: 14px;
		height: 14px;
		color: #ccc;
		vertical-align: middle;
		-webkit-transition: 200ms -webkit-transform cubic-bezier(0.19, 1, 0.22, 1);
		transition: 200ms -webkit-transform cubic-bezier(0.19, 1, 0.22, 1);
		transition: 200ms transform cubic-bezier(0.19, 1, 0.22, 1);
		transition: 200ms transform cubic-bezier(0.19, 1, 0.22, 1), 200ms -webkit-transform cubic-bezier(0.19, 1, 0.22, 1);
		-webkit-transform: rotateZ(-90deg);
		transform: rotateZ(-90deg);
		margin-top: 6px;
	}

	/deep/ .vue-treeselect__label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: table-cell;
		padding-left: 0.026042rem;
		max-width: 100%;
		vertical-align: middle;
		cursor: inherit;
		font-size: 20px;
	}

	/deep/ .vue-treeselect__label-container {
		display: table-cell;
		vertical-align: middle;
		cursor: pointer;
		display: table;
		width: 100%;
		table-layout: fixed;
		color: inherit;
		margin-top: 10px;
	}

	.pageClass {
		text-align: center;
		position: fixed;
		bottom:25px;
		left:0;
		right:0;
		width: 500px;
		margin-left: 44%;
	}

	.departSelect{
		width: 36%;
		display: inline-block;
		vertical-align: middle;
		font-size: 18px;
	}

	.statusSelects{
		display: inline-block;
		vertical-align: top;
		margin-left: 20px;
		font-size: 18px;
	}

	/deep/ .el-select .el-input.is-focus .el-input__inner {
		border-color: #5059d5;
	}

	.statusBg{
		display: block;
		width: 10px;
		height: 80px;
		margin-left: -11px;
	}

	.timeWidth{
		width: 350px !important;
	}

	/deep/ .el-date-editor .el-range__icon {
		font-size: 14px;
		margin-left: -5px;
		color: #C0C4CC;
		float: left;
		line-height: 32px;
		margin-bottom: 0px;
	}

	/deep/ .el-date-editor .el-range-separator {
		padding: 0 5px;
		line-height: 32px;
		width: 5%;
		color: #303133;
		margin-bottom: 0px;
	}

	/deep/ .el-date-editor .el-range__close-icon {
		font-size: 14px;
		color: #C0C4CC;
		width: 25px;
		display: inline-block;
		float: right;
		line-height: 30px;
	}
</style>
