<template>
	<view class="table">
		<view class="table-header">
			<view class="table-tr">
				<view v-for="(item, index) in header" :key="index" class="table-td">{{ item }}</view>
			</view>
		</view>
		<view class="table-body">
			<block v-if="list.length > 0">
				<view v-for="item in list" :key="item.id" class="table-tr">
					<view class="table-td">{{ item.rank }}</view>
					<view class="table-td">
						<view class="avatar">
							<image src="https://via.placeholder.com/64x64.png?text=A">
						</view>
						<view class="name">{{ item.name }}</view>
					</view>
					<view class="table-td">{{ item.score }}</view>
				</view>
			</block>
			<u-empty v-else mode="list" />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Rank',
		props: ['header', 'list'],
		data() {
			return {}
		}
	}
</script>

<style scoped>
	.table {
		background-color: white;
	}
	.table-header {
		width: 100%;
		border: 1px solid #e5e5e5;
		border-left: none;
		border-right: none;
	}
	.table-td {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 0 20rpx;
	}
	.table-tr {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
	}
	.table-body .table-tr {
		border-bottom: 1px solid #e5e5e5;
	}
	.avatar ::v-deep uni-image {
		border-radius: 30rpx;
		width: 64rpx;
		height: 64rpx;
	}
	.name {
		line-height: 64rpx;
		margin-left: 10rpx;
	}
</style>