<template>
<view class="groupContent">
	<view class="titlecontent">
		<view class="titleItem">排名</view>
		<view class="titleItem">商家名称</view>
		<view class="titleItem">技师人数</view>
		<view class="titleItem">上月总积分</view>
	</view>
	<view class="orderContent" v-for="(item,index) in orderList" :key="index">
		<view class="orderItem">
			<image src="../../../static/1.png" v-if="index==0" mode=""></image>
			<image src="../../../static/2.png" v-if="index==1" mode=""></image>
			<image src="../../../static/3.png" v-if="index==2" mode=""></image>
			<view class="orderText" v-if="index!=0&&index!=1&&index!=2">
				{{index+1}}
			</view>
		</view>
		<view class="orderItem">{{item.name}}</view>
		<view class="orderItem">{{item.coach_num}}</view>
		<view class="orderItem">{{item.integral}}</view>
	</view>
</view>
</template>

<script>
export default{
	data(){
		return{
			orderList:[]
		}
	},
	methods:{
		async getCompanyMonth() {
			let res = await this.$api.mine.companyMonth()
			console.log(res,"mm")
			this.orderList = res
		},
		
	},
	onLoad() {
		this.getCompanyMonth()
	}
}
</script>

<style lang="scss" scoped>
.groupContent{
	padding: 0 24upx;
	.titlecontent{
		background: #FFFFFF;
		border-radius: 30rpx;
		display:flex;
		margin:20rpx 0;
		.titleItem{
			width:25%;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
			padding:27rpx 0;
			text-align: center;
			white-space: nowrap;
			
		}
	}
	.orderContent{
		background: #FFFFFF;
		border-radius: 30rpx;
		display:flex;
		margin:20rpx 0;
		.orderItem{
			width:25%;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
			padding:27rpx 0;
			text-align: center;
			white-space: nowrap;
			image{
				width:46upx;
				height:37upx;
				margin:0 auto;
			}
			.orderText{
				font-size: 36rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: bold;
				color: #333333;
			}
		}
	}
}
</style>