{include file="public/header" /}
<div class="config-container">
	<!-- 页面头部样式 -->
	<div class="config-header" style="display: flex;flex-direction: column;flex-wrap: wrap;align-items: flex-start;">
		<div class="maintitle">
			<i class="layui-icon layui-icon-user"></i>
			<span>用户列表</span>
		</div>
		<div style="display: flex;align-items: flex-start;flex-direction: column;gap: 15px;margin-bottom: 10px;">
			<div>
				<button class="layui-btn layui-bg-blue" onclick="add()">
					<i class="layui-icon layui-icon-add-1"></i>添加
				</button>
				<button type="button" class="layui-btn layui-btn-primary layui-border-blue" onclick="refresh()">
					<i class="layui-icon layui-icon-refresh"></i>刷新
				</button>
			</div>
		</div>
	</div>

	<table id="userTable" lay-filter="userTable"></table>
</div>

<script type="text/javascript">
	layui.use(['table', 'layer'], function () {
		var table = layui.table;
		var layer = layui.layer;

		table.render({
			elem: '#userTable',
			url: '{$config['admin_route']}yunzeradmin/frontuser', // 数据接口
			page: true,
			cols: [[
				{ field: 'uid', title: '用户ID', width: 80, align: 'center', fixed: 'left' },
				{
					field: 'avatar',
					title: '头像',
					width: 80,
					align: 'center',
					templet: function (d) {
						if (d.avatar && d.avatar !== '') {
							return '<img src="' + d.avatar + '" style="width:36px;height:36px;border-radius:50%;object-fit:cover;" />';
						} else {
							return '<span style="color:#aaa;">无</span>';
						}
					}
				},
				{ field: 'name', title: '真实姓名', width: 120 },
				{ field: 'name', title: '真实姓名', width: 120 },
				{ field: 'account', title: '账户', width: 200 },
				{ field: 'phone', title: '手机', width: 120 },
				{ field: 'qq', title: 'QQ', width: 130 },
				{
					field: 'wechat',
					title: '微信',
					width: 100,
					templet: function (d) {
						if (d.openid && d.openid !== '') {
							return '<span style="color: #52c41a;">已绑定</span>';
						} else {
							return '<span style="color: #aaa;">未绑定</span>';
						}
					}
				},
				{ field: 'group_id', title: '角色', width: 200 },
				{
					field: 'sex', title: '性别', width: 80, templet: function (d) {
						if (d.sex == 1) return '男';
						if (d.sex == 2) return '女';
						return '未选择';
					}
				},
				{
					field: 'status',
					title: '状态',
					width: 100,
					templet: function (d) {
						if (d.status == 1) {
							return '<span style="color: #52c41a;">开启</span>';
						} else {
							return '<span style="color: #f5222d;">禁用</span>';
						}
					}
				},
				{ field: 'login_count', title: '登陆次数', width: 100 },
				{
					field: 'update_time',
					title: '登陆时间',
					width: 180,
					templet: function (d) {
						if (!d.update_time) return '';
						var t = d.update_time;
						// 如果是时间戳（数字），转为int
						if (/^\d+$/.test(t)) t = parseInt(t) * (t.toString().length == 10 ? 1000 : 1);
						var date = new Date(t);
						var Y = date.getFullYear();
						var M = ('0' + (date.getMonth() + 1)).slice(-2);
						var D = ('0' + date.getDate()).slice(-2);
						var h = ('0' + date.getHours()).slice(-2);
						var m = ('0' + date.getMinutes()).slice(-2);
						var s = ('0' + date.getSeconds()).slice(-2);
						return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s;
					}
				},
				{ title: '操作', toolbar: '#operationBar', width: 160, fixed: 'right' }
			]]
		});

		// 工具条事件
		table.on('tool(userTable)', function (obj) {
			var data = obj.data;
			if (obj.event === 'edit') {
				edit(data.uid);
			} else if (obj.event === 'del') {
				del(data.uid);
			}
		});
	});

	// 添加
	function add() {
		layer.open({
			type: 2,
			title: '添加用户',
			shade: 0.3,
			area: ['450px', '550px'],
			content: "{$config['admin_route']}yunzeradmin/frontuseradd"
		});
	}
	// 编辑
	function edit(uid) {
		layer.open({
			type: 2,
			title: '编辑用户',
			shade: 0.3,
			area: ['450px', '550px'],
			content: "{$config['admin_route']}yunzeradmin/frontuseredit?uid=" + uid
		});
	}
	// 删除
	function del(uid) {
		layer.confirm('确定要删除吗？', {
			icon: 3,
			btn: ['确定', '取消']
		}, function () {
			$.post("{$config['admin_route']}yunzeradmin/frontuserdel", { 'uid': uid }, function (res) {
				if (res.code > 0) {
					layer.alert(res.msg, { icon: 2 });
				} else {
					layer.msg(res.msg);
					setTimeout(function () { window.location.reload(); }, 1000);
				}
			}, 'json');
		});
	}
	//刷新列表
	function refresh() {
		window.location.reload();
	}
</script>
<script type="text/html" id="operationBar">
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">
		<i class="layui-icon layui-icon-edit"></i>编辑
	</button>
	<button type="button" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">
		<i class="layui-icon layui-icon-delete"></i>删除
	</button>
</script>
<style>
	.layui-table-view .layui-table td,
	.layui-table-view .layui-table th {
		height: 60px !important;
		line-height: 60px !important;
		padding-top: 0;
		padding-bottom: 0;
	}
	.layui-table-cell{
		height: auto !important;
	}
	
</style>
{include file="public/tail" /}