<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" v-if="!showLoading">
		<view>
			<uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
		</view>
		<view>
			<lh-table :rows="state.rows" :columns="state.columns" :showOrder="false" :showOper="false"> </lh-table>
		</view>
	</view>
	<view v-else style="margin-top: 200rpx;">
		<uv-loading-icon mode="circle" text="加载中" size="40rpx"></uv-loading-icon>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		getAchievementCompletion
	} 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 state = reactive({
		columns: [{
				name: 'time',
				title: '时间',
				fixed: true
			},
			{
				name: 'targetPrice',
				title: '目标金额'
			},
			{
				name: 'successPrice',
				title: '成交金额'
			},
			{
				name: 'successCount',
				title: '成交订单'
			},
			{
				name: 'perPrice',
				title: '平均客单价'
			},
		],
		rows: []
	})

	const gopage = (url) => {
		uni.navigateTo({
			url
		})
	}

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

	const showLoading = ref(false)
	const getData = async () => {
		// showLoading.value = true
		state.rows = await getAchievementCompletion({
			relation: relation.value
		})
		// showLoading.value = false
	}

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

<style lang="scss" scoped>


</style>