<template>
	<view class="ios-bottom">
		<uni-collapse>
			<block v-for="(listItem, listIndex) in lists" :key="listIndex">
				<uni-collapse-item :show-animation="true" :open="listIndex === 0">
					<template v-slot:title>
						<view class="collapse-title">{{listItem.name}}</view>
					</template>
					<view class="employees-item" v-for="(item, index) in listItem.data" :key="index">
						<view class="cover">
							<block v-if="item.user.avatar === ''">{{item.name.slice(0,1)}}</block>
							<block v-else>
								<image class="cover-img" :src="item.user.avatar" mode="aspectFill"></image>
							</block>
						</view>
						<view class="content">
							<view class="nickname nowrap">{{item.name}}<text>{{item.job}}</text></view>
							<view class="job nowrap">
								<text v-for="(permissionItem, permissionIndex) in item.permission" :key="permissionIndex">{{permissionItem}}</text>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</block>
		</uni-collapse>
	</view>
</template>

<script>
	import { employees } from '@/apis/interfaces/employees'
	export default {
		data() {
			return {
				lists: []
			};
		},
		onShow(){
			employees().then(res => {
				this.lists = res
			})
		},
		onNavigationBarButtonTap() {
			this.$Router.push({name: 'addEmployees'})
		}
	};
</script>

<style lang="scss" scoped>
	.collapse-title{
		padding: 0 $padding;
		line-height: 90rpx;
		font-weight: bold;
		font-size: $title-size-lg;
	}
	.employees-item {
		background: white;
		padding: ($padding - 10) $padding;
		position: relative;
		&::before {
			position: absolute;
			bottom: 0;
			left: $padding + 98;
			right: 0;
			content: ' ';
			height: 1rpx;
			background: $border-color;
		}
		&:last-child::before {
			display: none;
		}
		.cover {
			position: absolute;
			top: $padding - 10;
			left: $padding;
			background: $text-price;
			color: white;
			height: 78rpx;
			width: 78rpx;
			line-height: 78rpx;
			text-align: center;
			border-radius: 50%;
			overflow: hidden;
			.cover-img {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
		.content {
			height: 78rpx;
			padding-left: 98rpx;
			.nickname{
				line-height: 40rpx;
				font-size: $title-size;
				text{
					font-size: $title-size-sm;
					color: $text-gray-m;
					padding-left: 10rpx;
				}
			}
			.job{
				line-height: 38rpx;
				text{
					background-color: $border-color-lg;
					color: $text-gray;
					padding: 0 10rpx;
					line-height: 38rpx;
					margin-left: $margin/2;
					display: inline-block;
					&:first-child{
						margin-left: 0;
					}
				}
			}
		}
	}
</style>
