<template>
	<view class="ios-bottom">
		<uni-collapse>
			<uni-collapse-item :show-animation="true" :open="true">
				<template v-slot:title>
					<view class="collapse-title">技术部</view>
				</template>
				<view class="employees-item" v-for="(item, index) in 10" :key="index">
					<view class="cover">
						<block v-if="index === 4">唐</block>
						<block v-else>
							<image class="cover-img" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
						</block>
					</view>
					<view class="content">
						<view class="nickname nowrap">唐明明</view>
						<view class="job nowrap">web前端开发</view>
					</view>
				</view>
			</uni-collapse-item>
			<uni-collapse-item :show-animation="true">
				<template v-slot:title>
					<view class="collapse-title">市场部</view>
				</template>
				<view class="employees-item" v-for="(item, index) in 5" :key="index">
					<view class="cover">
						<block v-if="index === 4">唐</block>
						<block v-else>
							<image class="cover-img" src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image>
						</block>
					</view>
					<view class="content">
						<view class="nickname">唐明明</view>
						<view class="job">web前端开发</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

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

<style lang="scss" scoped>
	.collapse-title{
		padding: 0 $padding;
		line-height: 90rpx;
	}
	.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: 48rpx;
				font-size: $title-size;
			}
			.job{
				line-height: 30rpx;
				font-size: $title-size-sm;
				color: $text-gray-m;
			}
		}
	}
</style>
