<template>
	<view class="todaystar ">
		
		<scroll-view scroll-x class="bg-white nav text-center ">
			<view class="cu-item" :class="TabCur==1?'text-white light bg-red':''" @tap="tabSelect" :data-id="1">充值
			</view>
			<view class="cu-item" :class="TabCur==2?'text-white light bg-red':''" @tap="tabSelect" :data-id="2">疗程
			</view>
			<view class="cu-item" :class="TabCur==3?'text-white light bg-red':''" @tap="tabSelect" :data-id="3">服务
			</view>
		</scroll-view>
		<view class=" margin-top " style="padding: 10upx;">
			<view style="margin: 10upx auto;"
				class="bg-red flex solid-bottom padding justify-start text-white text-center">
				<view class="text-header" style="width: 2%;">
				</view>
				<view class="text-header" style="width:20%;">
					<text>员工</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>目标</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>实际</text>
				</view>
				<view class="text-header" style="width:20%;">
					<text>差额</text>
				</view>
				<view class="text-header" style="width:18%;">
					<text>达成率</text>
				</view>
			</view>
			<view v-if="starList.length==0">
				<view class='empty cuIcon-info'></view>
				<view class='empty-text text-gray'>暂无数据</view>
			</view>
			<view class=" light flex justify-start text-black text-center text-main" v-for="(item,index) in  starList"
				:key='index'
				:class="index+1==1?'bg-pink':'bg-grey' && index+1==2?'bg-red':'bg-grey' &&index+1==3?'bg-orange':'bg-grey' ">
				<view class="cur" style="width: 2%;">
					<text>{{index+1}}</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>{{item.name}}</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>{{item.m}}</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>{{item.s}}</text>
				</view>
				<view class="text-header" style="width: 20%;">
					<text>{{item.c}}</text>
				</view>
				<view class="text-header" style="width: 18%;">
					<text>{{item.ratio}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import host from '../../../../utils/host.js'
	export default {
		data() {

			return {
				TabCur: 1,
				userInfo: {},
				daylist: [],
				starList: [{
						name: '陈佳',
						m: 50000,
						s: 68750,
						c: '超额18750',
						ratio:'137.50%'
					}, {
						name: '赵晓琳',
						m: 45000,
						s: 60800,
						c: '超额15800',
						ratio:'135.11%'
					}, {
						name: '陈倩倩',
						m: 45000,
						s: 58685,
						c: '超额13685',
						ratio:'130.41%'
					}, 
					{
						name: '于颐莲',
						m: 40000,
						s: 41150,
						c: '超额1150',
						ratio:'102.87%'
					},
					{
						name: '沈嘉',
						m: 10000,
						s: 10500,
						c: '超额500',
						ratio:'105.00%'
					},
					{
						name: '王胜胜',
						m: 20000,
						s: 18600,
						c: 1400,
						ratio:'107.00%'
					},{
						name: '李婕',
						m: 40000,
						s: 36005,
						c: 3995,
						ratio:'109.98%'
					}, {
						name: '张毅',
						m: 10000,
						s: 5000,
						c: 5000,
						ratio:'50.00%'
					},{
						name: '余姚勇',
						m: 30000,
						s: 21050,
						c: 8050,
						ratio:'126.67%'
					}

				],
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id * 1
				this.projectList()
			},

			projectList() {


			}
		},
		onShow: function() {
			this.userInfo = uni.getStorageSync("userInfo")
		},
		onPullDownRefresh: function() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style>
	.text-main {
		font-size: 28upx;
		height: 80upx;
		width: 100%;
		line-height: 80upx;
		margin-top: 10upx;
		color: #000000;
	}
</style>
