<template>
	<div style="cursor: default">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
			<el-breadcrumb-item>分配设备</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="search-box">
			<el-input
				size="small"
				placeholder="请输入用户名"
				@change="changeUser"
				clearable
				v-model="username"
			>
				<i slot="prefix" class="el-input__icon el-icon-search"></i>
			</el-input>
			<el-date-picker
				style="cursor: pointer"
				size="small"
				@change="DateChange()"
				v-model="timeRange"
				type="daterange"
				range-separator="至"
				start-placeholder="开始日期"
				end-placeholder="结束日期"
			>
			</el-date-picker>
		</div>
		<el-row :gutter="10">
			<el-col
				:xs="24"
				:sm="24"
				:md="12"
				:lg="6"
				:xl="4"
				v-for="item in userList"
				:key="item.id"
			>
				<el-card class="box-card">
					<div class="img-box">
						<img
							v-if="item.state == 1"
							src="@/assets/images/equipdistribute/user.png"
						/>
						<img
							v-if="item.state == 4"
							src="@/assets/images/equipdistribute/user_dis.png"
						/>
						<p>{{ item.username }}</p>
					</div>
					<div class="detail">
						<p>
							用户角色 <span>{{ item.role_name }}</span>
						</p>
						<p>
							用户类型 <span>{{ item.user_type | user_type }}</span>
						</p>
						<p>
							用户所属
							<span>{{ item.regiest_source_name || '--' }}</span>
						</p>
						<p>
							用户手机号 <span>{{ item.mobile }}</span>
						</p>
						<p>
							是否可用 <span>{{ item.state == 1 ? '可用' : '禁用' }}</span>
						</p>
						<p>
							创建时间 <span>{{ (item.addtime * 1000) | formatTime }}</span>
						</p>
					</div>
					<div class="btn">
						<a
							v-if="item.user_type != 3"
							@click="distribute(item.uid, item.username)"
							>分配设备</a
						>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<!-- 暂无数据 -->
		<div class="expertDiagnosis_referral_units_not" v-if="userList.length <= 0">
			<img
				:src="$imghost + zanwu"
				alt
				class="expertDiagnosis_referral_units_notImg"
			/>
		</div>
		<el-pagination
			v-if="userList.length > 0"
			background
			:page-size="12"
			layout="prev, pager, next"
			:current-page="page"
			:total="totalNum"
			@current-change="changePage"
		>
		</el-pagination>
	</div>
</template>

<script>
export default {
	data() {
		return {
			zanwu: '/images/expertDiagnosis/zanwu.png',
			timeRange: '',
			page: 1,
			username: '',
			userList: [],
			totalNum: 0,
			start_time: '',
			end_time: '',
			timeRange: ''
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		getList() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=user.login.users_info',
				data: this.qs.stringify({
					page: this.page,
					page_size: 12,
					username: this.username,
					start_time: this.start_time,
					end_time: this.end_time
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.userList = res.data.data.data
					this.totalNum = res.data.data.count
				}
			})
		},
		distribute(id, username) {
			this.$router.push({
				path: '/index/equipdis/' + id,
				query: { username: username }
			})
		},
		changePage(val) {
			this.page = val
			this.getList()
		},
		changeUser() {
			this.page = 1
			this.getList()
		},
		DateChange(val) {
			this.page = 1
			if (this.timeRange) {
				this.start_time = parseInt(new Date(this.timeRange[0]).getTime() / 1000)
				this.end_time = parseInt(new Date(this.timeRange[1]).getTime() / 1000)
				this.getList()
			} else {
				this.start_time = ''
				this.end_time = ''
				this.getList()
			}
		}
	},
	filters: {
		role: function (value) {
			if (value == 'user') {
				return '用户'
			} else if (value == 'superuser') {
				return '管理员'
			} else if (value == 'agency') {
				return '代理商'
			}
		},
		user_type: function (value) {
			switch (value) {
				case 1:
					return '超级管理员'
					break
				case 2:
					return '经销商'
					break
				case 3:
					return '农林政府单位'
					break
				case 4:
					return '普通用户'
					break
			}
		}
	}
}
</script>


<style lang='less' scoped>
.search-box {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	.el-input {
		width: 200px;
	}
	.el-date-editor--daterange {
		width: 222px;
	}
}
.el-card {
	.img-box {
		text-align: center;
		border-bottom: 1px solid #ddd;
		padding: 15px 0;
		p {
			font-size: 14px;
			font-weight: 800;
			margin-top: 10px;
		}
	}
	.detail {
		border-bottom: 1px solid #ddd;
		padding: 10px 0;
		p {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
			line-height: 34px;
			color: #666;
			padding: 0 0px;
		}
	}
	.btn {
		text-align: center;
		padding: 20px 0 5px 0;
		height: 30px;
		a {
			background: #14a478;
			color: #fff;
			border-radius: 30px;
			font-size: 14px;
			padding: 5px 15px;
			cursor: pointer;
		}
	}
}

</style>