<template>
	<uv-navbar :fixed="false" @leftClick="$onClickLeft" bgColor="#09b4f1">
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="bg-white">
		<view>
			<uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
		</view>
		<view>
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="50">排名</uni-th>
					<uni-th align="center" width="120">姓名</uni-th>
					<uni-th align="center" width="100">数量</uni-th>
					<uni-th align="center">金额</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in data" :key="index">
					<uni-td align="center">{{ index + 1 }}</uni-td>
					<uni-td align="center">{{ item.nickname }}</uni-td>
					<uni-td align="center">{{ item.count }}</uni-td>
					<uni-td align="center">{{ item.money }}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		getContractRank,
		getReceivablesRank
	} from '@/api/index'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const main = useMainStore()
	const {
		indexCount
	} = storeToRefs(main)
	const title = ref('排行榜')
	const relation = ref('my')
	const data = ref([])
	const list = ref(
		[{
			name: '合同排行',
			value: 'my'
		}, {
			name: '回款排行',
			value: 'sub'
		}]
	)

	const handleSelect = (key) => {
		relation.value = key.value
		getData()
	}

	const getData = async () => {
		if (relation.value == 'my') {
			data.value = await getContractRank()
		} else {
			data.value = await getReceivablesRank()
		}
	}

	onLoad(() => {
		getData()
	})
</script>

<style lang="scss" scoped>


</style>