<!-- 用户管理 -->
<template>
	<div class='consumerManage'>
		<div class="searchAdd">
			<span style="margin-right: 10px;">部门</span>
			<Treeselect
							style="display: inline-block;width: 30%;vertical-align: middle;"
							name="demo"
							:clearable="false"
							:searchable="false"
							:open-on-click="true"
							:open-on-focus="true"
							:alwaysOpen="false"
							:options="departmentOptions"
							:default-expand-level="1"
							:max-height="400"
							placeholder="请选择部门"
							v-model="department"
							@select="selectChangeTree"
			/>
			<!--<span style="margin-left: 50px;margin-right: 10px;">姓名</span>-->
			<!--<el-input v-model="userName" style="width: 20%;" placeholder="请输入要查找的姓名"></el-input>-->
			<!--<el-button type="primary" style="float: right;" @click="findUser">查询</el-button>-->
		</div>
		<div style="padding: 20px 0 24px;clear: both;">
			<el-table
				v-show="showLi === false"
				:data="addressList"
				style="width: 100%">
				<el-table-column
					type="index"
					:index="indexMethod"
					align="center"
					width="100"
					label="序号">
				</el-table-column>
				<el-table-column
					prop="name"
					align="center"
					label="姓名">
				</el-table-column>
				<el-table-column
					prop="duty"
					align="center"
					label="职务">
				</el-table-column>
				<el-table-column
					prop="telphone"
					align="center"
					label="电话">
				</el-table-column>
				<el-table-column
					prop="email"
					align="center"
					label="邮箱">
				</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>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import Treeselect from '@riophae/vue-treeselect';
	import '../../assets/css/vue-tree.css';
	export default {
		name: "Consumer",
		//import引入的组件需要注入到对象中才能使用
		components: {Treeselect},
		data () {
			//这里存放数据
			return {
				addressList: [],
				showLi: false,
				currentPage: 1,
				pageSize: 10,
				total: 0,
				department: null,
				departmentOptions: [],
				userName: '',
				loginData: '',
			};
		},
		//监听属性 类似于data概念
		computed: {},
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {
			getDepartment() {
				this.$axios.postDepartmentList().then((res) => {
					// console.log(res)
					if (res.request.status === 200) {
						let jsonData = JSON.stringify(res.data);
						jsonData = jsonData.replace(/departments/g, 'children');
						jsonData = jsonData.replace(/name/g, 'label');
						// console.log(JSON.parse(jsonData))
						let parseData = JSON.parse(jsonData);
						// this.departmentOptions = JSON.parse(jsonData);
						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.departmentOptions = 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(result[0].id)
			},
			getPersonList(val){
				let obj = {
					"deId": val,
					"currentPage": this.currentPage,
					"pageSize": this.pageSize
				}
				this.$axios.postAllAddress(obj).then((res) => {
					this.addressList = res.data.rows;
					this.total = res.data.totalCount;
				})
			},
			selectChangeTree(val) {
				console.log(val)
				console.log(this.department)
				this.department = val.id;
				this.treeSearch(val.id);
			},
			treeSearch(val) { // 部门选择
				console.log(val)
				this.department = val;
				this.currentPage = 1;
				this.postAllAddress();
			},
			postAllAddress() { // 获取列表数据
				let obj = {
					"deId": this.department,
					"currentPage": this.currentPage,
					"pageSize": this.pageSize
				}
				this.$axios.postAllAddress(obj).then((res) => {
					console.log('postAllAddress-----', res)
					this.addressList = res.data.rows;
					this.total = res.data.totalCount;
				})
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.postAllAddress();
				// console.log(`当前页: ${val}`);
			},
			consumerDetail(item) {
				console.log(item)
				console.log(this.$Base64.encode(JSON.stringify(item)));
				localStorage.setItem('adminUser', this.$Base64.encode(JSON.stringify(item)));
				this.$router.push({name: 'consumerDetails'});
			},
			addUser() {
				// this.$router.push({name: 'createConsumer'})
			},
			indexMethod(index) {
				return (this.currentPage - 1) * this.pageSize + index + 1;
			},
			findUser() {

			}
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.loginData = JSON.parse(this.$Base64.decode(localStorage.getItem('login')));
			this.getDepartment();
			// this.postAllAddress();
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.consumerManage{
		position: relative;
		padding: 24px;
	}

	.searchAdd{
		clear: both;
		height: 50px;
		border-bottom: 2px solid #7c87e8;
	}

	.div-search{
		position: relative;
	}
	.in-search{
		width: 250px; /*no*/
		height: 36px; /*no*/
		background: #ffffff;
		border-radius: 20px; /*no*/
		font-size: 16px; /*no*/
		padding-left: 14px; /*no*/
		border: 1px solid #409EFF;
	}

	.search-icon{
		position: absolute;
		background-image: url("../../assets/images/search.png");
		background-repeat: no-repeat;
		width: 26px; /*no*/
		height: 26px; /*no*/
		cursor: pointer; /*no*/
		right: 3px; /*no*/
		top: 5px; /*no*/
	}

	.personLi{
		width: 320px;
		height: 130px;
		float: left;
		margin-right: 70px;
		margin-left: 55px;
		margin-bottom: 30px;
		border: 1px solid rgba(102, 102, 102, 0.5);
		cursor: pointer;
		border-radius: 6px;
	}

	.personLi:hover{
		box-shadow: 3px 5px 10px #666666;
	}

	.personLi img{
		float: left;
		width: 60px;
		height: 60px;
	}

	.personDetail{
		float: left;
		margin-left: 20px;
	}

	.personDetail div{
		height: 24px;
	}

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