<!-- 人员列表 -->
<template>
	<div class='personList'>
		<div>
			<el-select v-model="department" @change="doSearch" placeholder="请选择部门">
				<el-option
								v-for="item in options"
								:key="item.id"
								:label="item.name"
								:value="item.id">
				</el-option>
			</el-select>
		</div>
		<div>
			<el-table
							:data="personListData"
							style="width: 100%">
				<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="role"
								align="center"
								label="角色">
					<template slot-scope="scope">
						<span v-for="(item,index) in scope.row.role" :key="index">{{item.name}}<span v-show="index !== (scope.row.role.length - 1)">、</span></span>
					</template>
				</el-table-column>
				<el-table-column
								prop="workCount"
								align="center"
								sortable
								label="任务数(个)">
				</el-table-column>
				<el-table-column
								prop="phone1"
								align="center"
								label="手机号">
				</el-table-column>
				<el-table-column
								prop="status"
								align="center"
								label="工作状态">
				</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 style="text-align: center;margin-top: 20px;">
			<el-pagination
							hide-on-single-page
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page.sync="currentPage"
							:page-size="pageSize"
							layout="prev, pager, next, jumper"
							:total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';

	export default {
		name: "PersonList",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				department: '',
				options: [
				],
				personListData: [],
				currentUser: '',
				currentPage: 1,
				pageSize: 10,
				total: 0,
				deOptions: [],
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			postDepartmentList() {
				this.$axios.getAllDepartment().then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						this.deOptions = res.data;
					}
				})
			},
			handleClick(val) {
				console.log(val)
				localStorage.setItem('infoPerson', this.$Base64.encode(JSON.stringify(val)));
				this.$router.push({name: 'personInfo'});
			},
			getSelectDepartment() {
				console.log(this.currentUser);
				this.$axios.getDepartmentFind(this.currentUser.id).then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						this.options = res.data;
					}
				})
			},
			doSearch(val) {
				console.log(val)
				this.department = val;
				this.getPersonList()
			},
			getPersonList(val) {
				let obj = {
					currentPage: this.currentPage,
					pageSize: this.pageSize,
					deId: this.department,
					id: this.currentUser.id
				}
				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>
</style>
