<template>
	<view class="">
		<view class="tab_list">
			<view class="tabli" :class="typeIndex == 0 ? 'tabliactive' : ''" @click="changeFirTab(0)">回款排名</view>
			<view class="tabli" :class="typeIndex == 1 ? 'tabliactive' : ''" @click="changeFirTab(1)">成交排名</view>
			<view class="tabli" :class="typeIndex == 2 ? 'tabliactive' : ''" @click="changeFirTab(2)">客户新增量</view>
			<view class="tabli" :class="typeIndex == 3 ? 'tabliactive' : ''" @click="changeFirTab(3)">客户跟进量</view>
		</view>
		
		
		<!-- 回款排名 -->
		<payment-rank v-if="typeIndex == 0"></payment-rank>
		<!-- 成交排名 -->
		<deal-rank v-if="typeIndex == 1"></deal-rank>
		<!-- 客户新增量 -->
		<customer-add-rank v-if="typeIndex == 2"></customer-add-rank>
		<!-- 客户跟进量 -->
		<customer-follow-rank v-if="typeIndex == 3"></customer-follow-rank>
	</view>
</template>

<script>
	import paymentRank from '@/pagesA/crm/statisticalFrom/paymentRank/paymentRank.vue'
	import dealRank from '@/pagesA/crm/statisticalFrom/personRank/personRank'
	import customerAddRank from '@/pagesA/crm/statisticalFrom/customerAddRank/customerAddRank.vue'
	import customerFollowRank from '@/pagesA/crm/statisticalFrom/customerFollowRank/customerFollowRank.vue'
	
	
	export default{
		components:{
			paymentRank,
			dealRank,
			customerAddRank,
			customerFollowRank
		},
		data() {
			return{
				typeIndex:0,
			}
		},
		methods:{
			changeFirTab(index){
				this.typeIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_list{
		width:750rpx;
		height:80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background:#fff;
		.tabli{
			font-size:24rpx;
			color:#333;
			line-height: 75rpx;
			text-align: center;
			border-bottom:4rpx solid #fff;
		}
		.tabliactive{
			border-bottom:4rpx solid $uni-text-color;
		}
	}
</style>