<template>
	<view class="slot-content">
		<uv-popup mode="bottom" border-radius="38" ref="showRef">
			<view class="popup-title">
				<text>选择目标员工</text>
				<view class="close" @click="selectShowClose3">
					<uv-icon name="close" color="#909399" size="22"></uv-icon>
				</view>
			</view>
			<scroll-view scroll-y style="height: 760rpx;width: 100%;">
				<view class="list">
					<block v-if="userList.length > 0">
						<view class="mb-4">
							<view class="item flex" v-for="(item,index) in userList" :key="index" @click="oncompany(item)">
								<view class="title">{{item.nickname}}</view>
								<view class="check-icon">
									<uv-icon v-if="adminId == item.id" name="checkmark" color="#09b4f1" size="28"></uv-icon>
								</view>
							</view>
						</view>
						<uv-loadmore :status="adminStatus"></uv-loadmore>
					</block>
					<uv-empty text="暂无数据" v-else margin-top="50" mode="list"></uv-empty>
				</view>
			</scroll-view>
			<view class="bottom_btn">
				<view>
					<uv-button customStyle="padding:0 80rpx;" @click="selectShowClose3">取消</uv-button>
				</view>
				<view style="margin-left: 20rpx;">
					<uv-button color="#09b4f1" customStyle="padding:0 80rpx;" @click="onCliskDivert">转移</uv-button>
				</view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		computed,
		defineEmits
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getAllUserList
	} from '@/api/user'
	const lastAdmin = ref(false)
	const adminStatus = ref('nomore')
	const pageSize = ref(10)
	const page = ref(1)
	const userList = ref([])
	const adminId = ref(0)

	onShow(() => {
		getUserList()
	})

	const showRef = ref()
	const doopen = () => {
		showRef.value.open()
	}

	const selectShowClose3 = () => {
		unref(showRef).close()
	}

	defineExpose({
		doopen,
		selectShowClose3
	})

	const emit = defineEmits(['doTrans'])

	const onCliskDivert = () => {
		if (adminId.value == 0) {
			uni.showToast({
				title: '请先选择目标员工',
				icon: 'none',
				duration: 2000
			})
			return
		}
		emit('doTrans', adminId.value)
	}

	const oncompany = (val) => {
		adminId.value = val.id
	}

	const getUserList = () => {
		getAllUserList({
			roleCodes: 'sale'
		}).then(res => {
			userList.value = res
		})
	}
</script>

<style lang="scss" scoped>
	.slot-content {
		.search {
			padding: 30rpx 25rpx;
		}

		.popup-title {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			font-size: 35rpx;
			font-weight: 600;
			text-align: center;
			height: 50px;

			.close {
				position: absolute;
				right: 20rpx;
			}
		}

		.list {
			padding-bottom: 45rpx;

			.item {
				padding: 0 25rpx;
				justify-content: space-between;
				height: 80rpx;

				.title {
					flex: 1;
					font-size: 28rpx;
					font-weight: 600;
				}

				.check-icon {
					text-align: center;
					width: 100rpx;
				}
			}
		}

		.bottom_btn {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 140rpx;
			box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: 26rpx;
			box-sizing: border-box;
		}
	}
</style>