<template>
	<view class="page-wrapper">
		<JeepayCustomNavbar title="成员管理" backCtrl="back" />
		<view class="sta-input" @tap="go.toSearchPage('sysUser')">
			<view class="input-main">
				<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
				搜索成员姓名
			</view>
			<!-- <image class="icon-more" src="/static/iconImg/icon-more.svg" mode="scaleToFill" /> -->
		</view>
		<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc">
			<template #tableBody="{ record }">
				<SysUserRender :record="record" />
			</template>
		</JeepayTableList>
		<view class="footer-wrapper">
			<view class="footer-button footer-button-style">
				<button hover-class="hover-button" hover-stay-time="150" class="flex-center"
					@tap="createStaff">创建</button>
			</view>
		</view>
	</view>
	<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
</template>

<script setup>
	import {
		nextTick,
		reactive,
		ref
	} from 'vue';
	import {
		onReachBottom,
		onShow,
		onUnload
	} from '@dcloudio/uni-app';
	import go from '@/commons/utils/go.js';
	import emit from '@/commons/utils/emit.js';
	import SysUserRender from '@/pages/list/render/SysUserRender.vue';
import {rolesGet } from '@/http/yskApi/requestAll.js';
	const jeepayTableListRef = ref();
	const jeepayPopupConfirmRef = ref();

	onReachBottom(() => {});

	// // 监听 更新事件
	onUnload(() => uni.$off(emit.ENAME_REF_SYS_USER_LIST));
	uni.$on(emit.ENAME_REF_SYS_USER_LIST, function(data) {
		jeepayTableListRef.value.refTable(true);
	});

	// 请求
	function reqTableDataFunc(params) {
		// 不查询普通用户
		params.isNotHasType2 = 1;
		rolesGet({
		}).then((res) => {
		})
		return res.content
	}

	// 创建员工
	const createStaff = () => {
		go.to('PAGES_USER_EDIT');
	};
</script>

<style lang="scss" scoped>
	.sta-input {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		height: 110rpx;
		background-color: $J-bg-ff;

		.input-main {
			flex: 1;
			display: flex;
			align-items: center;
			height: 70rpx;
			background-color: $J-bg-f5;
			border-radius: $J-b-r12;
			color: rgba(0, 0, 0, 0.35);
			font-size: 27rpx;
			font-weight: 400;

			image {
				padding: 22rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}

		.icon-more {
			margin-left: 30rpx;
			width: 70rpx;
			height: 70rpx;
		}
	}

	.footer-wrapper {
		height: 170rpx;
		background-color: transparent;

		.footer-button {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 30rpx;

			button {
				height: 110rpx;
				font-size: 33rpx;
				font-weight: 500;
				color: $J-color-tff;
				border-radius: 20rpx;
				background: $jeepay-bg-primary;
			}

			.hover-button {
				opacity: 0.5;
			}
		}
	}
</style>