<template>
	<tui-bottom-popup :zIndex="1002" :maskZIndex="1001" :show="popupShow" @close="hiddenPopup">
		<view class="order-box">
			<view class="avatar-box">
				<view class="title">切换店员</view>
				<view class="close-span" @click="hiddenPopup">
					<u-icon name="close-circle" color="var(--ui-BG-Main)" size="50"></u-icon>
				</view>
			</view>
			<scroll-view style="height: 700rpx;" scroll-y>
				<view class="page-box">
					<view @click="change(item)" class="item" :key="item.id" v-for="(item,index) in clerkList">
						<view class="avatar-span">
							<u-avatar :src="item.avatar"></u-avatar>
							<view class="nickname">{{item.nickname}}</view>
						</view>
						<view>
							<u-icon size="44" v-if="clerk.id == item.id" name="checkmark-circle-fill" color="var(--ui-BG-Main)"></u-icon>
							<u-icon size="44" v-else name="checkmark-circle" color="var(--ui-BG-Main)"></u-icon>
						</view>
					</view>
					
				</view>
			</scroll-view>
			
		</view>
	</tui-bottom-popup>
	
</template>

<script>
	import tuiBottomPopup from "@/components/thorui/tui-bottom-popup/tui-bottom-popup.vue"
	import RewardApi from '@/sheep/api/worker/reward'; 
	import ClerkApi from '@/sheep/api/worker/clerk'; 
	import sheep from '@/sheep';
	export default {
		components: {
			tuiBottomPopup,
		},
		props: {
			
		},
		data() {
			return { 
				popupShow: false,
			}
		},
		computed: {
			clerkList() {
				return sheep.$store('sys').clerkList;
			},
			clerk() {
				return sheep.$store('sys').currentClerk;
			},
		},
		methods: {
			//调用此方法显示弹层
			showPopup() {
				ClerkApi.getClerkList().then((res) => {
					if(res.data[0]){
						sheep.$store('sys').setCurrentClerk(res.data[0]);
						sheep.$store('sys').setClerkList(res.data);
					}else{
						sheep.$store('sys').setCurrentClerk({
							id: -1,
							avatar: 'https://rbtnet.oss-cn-hangzhou.aliyuncs.com/aa361225849eeb86428e1a3d647d6f7b94354e74de212403bb968e6ad85e79b3.jpeg',
						});
						sheep.$store('sys').setClerkList([]);
					}
					this.popupShow = true;
				});
			},
			hiddenPopup() {
				this.popupShow = false;
			},
			change(e) {
				sheep.$store('sys').setCurrentClerk(e);
				this.hiddenPopup();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-box {
		padding: 10px 0;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.title {
			height: 70rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
		}
		
		.close-span {
			position: absolute;
			right: 5px;
			top: 5px;
			width: 70rpx;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.page-box {
		padding: 15px;
		padding-bottom: 10px;
		
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			
			.avatar-span {
				display: flex;
				align-items: center;
				
				.nickname {
					font-size: 24rpx;
					margin-left: 14rpx;
				}
			}
		}
	}
	
</style>