<!-- 用户管理 -->
<template>
	<div class='consumerManage'>
		<div class="searchAdd">
			<!--<div style="float:left;">-->
				<!--<div class="div-search">-->
					<!--<i class="search-icon" @click="openSearch()"></i>-->
					<!--<input type="text" v-model="searchHuman" id="searchVal" placeholder="请输入" class="in-search" @keyup.enter="openSearch()"/>-->
				<!--</div>-->
			<!--</div>-->
			<!--<img title="列表模式" v-show="showLi === true" @click="showLi = false" src="../assets/images/listChange.png" width="40" style="cursor: pointer;float: right;"/>-->
			<!--<img title="网格模式" v-show="showLi === false" @click="showLi = true" src="../assets/images/liChange.png" width="40" style="cursor: pointer;float: right;"/>-->
			<el-button @click="addUser" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">新增</el-button>
			<el-button @click="clickBtn" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">导入通讯录<input style="display: none;" ref="fileTrain" multiple type="file" class="upload-file" accept=".xls,.xlsx" @change="getFileType"></el-button>
			<el-button @click="postExportAddress" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">导出通讯录</el-button>
			<el-button @click="postDownloadAddress" style="float: right;margin-right: 30px;" type="primary" icon="el-icon-plus">下载模板</el-button>
		</div>
		<div class="consumerTable" style="padding-top: 20px;clear: both;">
			<!--<ul v-show="showLi === true">-->
				<!--<li @click="consumerDetail(item)" class="personLi" v-for="(item, index) in personList" :key="index">-->
					<!--<div style="margin-top: 20px;margin-left: 10px;">-->
						<!--<img  src="../assets/images/nyg.png">-->
						<!--&lt;!&ndash;<img v-show="item.sex === 1" src="../assets/images/women.png">&ndash;&gt;-->
						<!--<div class="personDetail">-->
							<!--<div>姓名：{{item.username}}</div>-->
							<!--<div>岗位：{{item.jobs}}</div>-->
							<!--<div>电话：{{item.phone1}}</div>-->
							<!--<div>入职时间：{{item.entryTime}}</div>-->
						<!--</div>-->
					<!--</div>-->
				<!--</li>-->
			<!--</ul>-->
			<!--v-show="showLi === false"-->
			<!--@row-click="openDetails"-->
			<el-table
							v-loading="loading"
							:data="personList"
							style="width: 100%">
				<el-table-column
								prop="username"
								align="center"
								label="姓名">
				</el-table-column>
				<el-table-column
								prop="departmentId"
								align="center"
								label="部门">
					<template slot-scope="scope">
						<span>{{findDeparts(scope.row.departmentIds)}}</span>
					</template>
				</el-table-column>
				<el-table-column
								prop="jobs"
								align="center"
								label="岗位">
				</el-table-column>
				<el-table-column
								prop="phone1"
								align="center"
								label="电话">
				</el-table-column>
				<el-table-column
								prop="entryTime"
								align="center"
								label="入职时间">
				</el-table-column>
				<el-table-column
								label="操作"
								align="center">
					<template slot-scope="scope">
						<el-button @click="openDetails(scope.row)" type="text" size="small">编辑<i class="el-icon-edit-outline"></i></el-button>
						<el-popconfirm title="确定删除吗？" @onConfirm="deleteUSer(scope.row)">
							<el-button slot="reference" style="background: #EE4B4C" type="text" size="small">删除<i class="el-icon-delete"></i></el-button>
						</el-popconfirm>

					</template>
				</el-table-column>
			</el-table>
		</div>
		<consumer-dialog :doName="doName" :editConsumer="editConsumer" :roleList="roleList" :departmentList="departList" :showConsumerDialog="showConsumerDialog" @close="closeConsumerDialog"></consumer-dialog>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import consumerDialog from '../../components/consumerDialog';
	export default {
		name: "Consumer",
//import引入的组件需要注入到对象中才能使用
		components: {consumerDialog},
		data () {
//这里存放数据
			return {
				searchHuman: '',
				personList: [], // 列表数据
				departList: [], // 部门列表
				showConsumerDialog: false, // 弹框显示
				editConsumer: '', // 当前要编辑的人的数据
				doName: '', // 弹框名称
				roleList: [], // 角色列表
				loading: true,
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			getUser() { // 获取列表数据
				this.$axios.getUser().then((res) => {
					// console.log(res)
					this.loading = false;
					this.personList = res.data;
				})
			},
			postExportAddress() { // 下载
				this.$axios.postExportAddress().then((res) => {
					let url = window.URL.createObjectURL(new Blob([res.data])); // 表示一个指定Blob对象
					let link = document.createElement('a');
					link.style.display = 'none';
					link.href = url;
					link.setAttribute('download', 'addressBook.xls');
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
					window.URL.revokeObjectURL(url); // 下载完成进行释放
				})

			},
			postDownloadAddress() { // 下载
				this.$axios.postDownloadAddress().then((res) => {
					let url = window.URL.createObjectURL(new Blob([res.data])); // 表示一个指定Blob对象
					let link = document.createElement('a');
					link.style.display = 'none';
					link.href = url;
					link.setAttribute('download', 'model.xls');
					document.body.appendChild(link);
					link.click();
					document.body.removeChild(link);
					window.URL.revokeObjectURL(url); // 下载完成进行释放
				})
			},
			postImportAddress(formData) {
				this.$axios.postImportAddress(formData).then((res) => {
					console.log('上传文件', res)
				})
			},
			clickBtn(){
				this.$refs.fileTrain.dispatchEvent(new MouseEvent('click'))
			},
			getFileType() { // 上传文件
				// const inputFile = this.$refs.fileTrain.files;
				// console.log('file11231231231----------', this.$refs.fileTrain.files[0])
				let formData = new FormData();
				formData.append('file', this.$refs.fileTrain.files[0]);
				// console.log('asd12312312312312----', formData.get("file"))
				this.postImportAddress(formData)
			},
			openSearch() {
				// console.log(this.searchHuman)
			},
			deleteUSer(val) { // 删除用户
				// console.log(val)
				this.$axios.deleteUsers(val.id).then((res) => {
					// console.log(res);
					if (res.request.status === 200) {
						this.$message({
							message: '删除用户成功!',
							type: 'success'
						});
						this.getUser();
					}
				})
			},
			jobName(val) {
				// console.log(val)
				// return '开发工程师';
				// this.$axios.getJob().then(res => { // 所有岗位
				// 	let jname = res.data;
				// 	for (let i = 0; i < jname.length; i++) {
				// 		if (jname[i].id === val) {
				// 			return jname[i].name
				// 		}
				// 	}
				// }).catch(err => {
				// 	console.error(err.message);
				// })
			},
			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.doName = '新增用户';
				this.showConsumerDialog = true;
				// this.$router.push({name: 'createConsumer'})
			},
			closeConsumerDialog(val) { // 关闭弹框
				if (val === '修改用户') {
					this.getUser();
				} else if (val === '新增用户') {
					this.getUser();
				}
				this.showConsumerDialog = false;
			},
			openDetails(val) { // 修改用户弹框
				// console.log(val)
				this.doName = '修改用户';
				let data = JSON.parse(JSON.stringify(val));
				this.editConsumer = data;
				this.showConsumerDialog = true;
				// localStorage.setItem('adminUser', this.$Base64.encode(JSON.stringify(val)));
				// this.$router.push({name: 'consumerDetails'});
			},
			findDeparts(val) { // 部门名称
				// console.log(val)
				// console.log(this.departList)
				let name = '';
				if (val !== null && val !== undefined) {
					for (let i = 0; i <this.departList.length; i++) {
						for (let j = 0; j < val.length; j++) {
							if (val[j] === this.departList[i].id) {
								name = this.departList[i].name
							}
						}
					}
				}
				return name;
				// let ret1 = this.departList.find((value, index, arr) => {
				// 	return value.id === val;
				// })
				// console.log(ret1)
			},
			getAllDepartmentList() { // 部门列表
				this.$axios.getAllDepartment().then((res) => {
					// console.log(res)
					if (res.request.status === 200) {
						this.departList = res.data;
						this.getUser();
					}
				})
			},
			getRoles() { // 获取角色
				this.$axios.getRole().then((res) => {
					// console.log(res.data)
					if (res.request.status === 200) {
						res.data.forEach((v, i) => {
							v.disabled = false;
						})
						let obj = {authorities:[],
							departmentId: '',
							description: "",
							id: "",
							isLeader: "",
							name: "无",
							disabled: false}
						res.data.push(obj)
						this.roleList = res.data;
					}
				})
			},
		},
//生命周期 - 创建完成（可以访问当前this实例）
		created () {

		},
//生命周期 - 挂载完成（可以访问DOM元素）
		mounted () {
			this.getAllDepartmentList();
			this.getRoles();
		},
		beforeCreate () {
		}, //生命周期 - 创建之前
		beforeMount () {
		}, //生命周期 - 挂载之前
		beforeUpdate () {
		}, //生命周期 - 更新之前
		updated () {
		}, //生命周期 - 更新之后
		beforeDestroy () {
		}, //生命周期 - 销毁之前
		destroyed () {
		}, //生命周期 - 销毁完成
		activated () {
		}, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style scoped>
	.consumerManage{
		position: relative;
		padding: 24px 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;
	}

	.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;
	}

	.consumerTable /deep/ .el-button {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #5059D5;
		border: none;
		color: #FFF;
		-webkit-appearance: none;
		text-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		-webkit-transition: .1s;
		transition: .1s;
		font-weight: 500;
		padding: 10px 15px;
		font-size: 16px;
		border-radius: 20px;
		margin-right: 10px;
		box-shadow: 3px 1px 3px #D3D3D3;
	}
</style>
