<!-- 用户管理 -->
<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>
		</div>
		<div 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">
						<!--<img v-show="item.sex === 1" src="../assets/images/women.png">-->
						<div class="personDetail">
							<div>姓名：{{item.username}}</div>
							<div>岗位：{{item.jobs}}</div>
							<div>电话：{{item.phone1}}</div>
							<div>入职时间：{{item.entryTime}}</div>
						</div>
					</div>
				</li>
			</ul>
			<el-table
							v-show="showLi === false"
							:data="personList"
							@row-click="openDetails"
							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>
		</div>
	</div>
</template>

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

	export default {
		name: "Consumer",
//import引入的组件需要注入到对象中才能使用
		components: {},
		data () {
//这里存放数据
			return {
				searchHuman: '',
				personList: [],
				showLi: false,
				departList: [],
			};
		},
//监听属性 类似于data概念
		computed: {},
//监控data中的数据变化
		watch: {},
//方法集合
		methods: {
			getUser() {
				this.$axios.getUser().then((res) => {
					console.log(res)
					this.personList = res.data;
				})
			},
			openSearch() {
				console.log(this.searchHuman)
			},
			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.$router.push({name: 'createConsumer'})
			},
			openDetails(val) {
				// console.log(val)
				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
				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
						}
					}
				}
				// let ret1 = this.departList.find((value, index, arr) => {
				// 	return value.id === val;
				// })
				// console.log(ret1)
				return name
			},
			getAllDepartmentList() {
				this.$axios.getAllDepartment().then((res) => {
					console.log(res)
					if (res.request.status === 200) {
						this.departList = res.data;
					}
				})

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

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

	.searchAdd{
		clear: both;
	}

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