<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 { reqLoad, API_URL_SYS_USER_LIST } from '@/http/apiManager.js';
import SysUserRender from '@/pages/list/render/SysUserRender.vue';

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;

	return reqLoad.list(API_URL_SYS_USER_LIST, params);
}

// 创建员工
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>
