<script setup lang="ts">
import {
getBroker,
getDesignerStatistics,
getFollowStatistics,
getYearTarget,
} from '../../../core/libs/requests'
import { NetImages } from '../../../core/libs/net-images'
import store, { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import qrCode from '@designer-hub/assets/src/libs/assets/qrCode'
import Card from '@designer-hub/app/src/components/card.vue'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data: agent, run: setAgent } = useRequest(() =>
getBroker({ brokerId: userInfo.value.userId.toString() }),
)
const { data: yearTarget, run: setYearTarget } = useRequest(() => getYearTarget())
const { data: designerData, run: setdesignerData } = useRequest(() => getDesignerStatistics())
const { data: followData, run: setFollowData } = useRequest(() => getFollowStatistics())
const toSettings = () => {
uni.navigateTo({ url: '/pages/mine/agent/settings/index' })
}
const toInvite = () => {
uni.navigateTo({ url: '/pages/mine/agent/invite/index' })
}
onMounted(async () => {
await setAgent()
await Promise.all([setYearTarget(), setdesignerData(), setFollowData()])
})
</script>
<template>
<div>
<div class="aspect-[0.96/1] absolute left-0 right-0 top--1">
<wd-img
width="100%"
height="100%"
:src="NetImages.AgentMineHeaderBg"
custom-class="vertical-bottom"
></wd-img>
</div>
<!-- <wd-navbar
fixed
safeAreaInsetTop
custom-class="bg-transparent!"
:bordered="false"
placeholder
v-bind="navBarProps"
></wd-navbar> -->
<div class="p-4 flex flex-col gap-4 relative">
<div class="flex items-center px-4 mb-4" @click="toSettings">
<wd-img
round
width="56"
height="56"
custom-class="border border-solid border-white"
:src="agent.headImgUrl"
/>
<div class="mx-4 flex-1">
<div class="text-white text-lg font-normal font-['PingFang_SC'] leading-normal">
{{ agent.brokerName }}
</div>
<div class="text-white text-xs font-normal font-['PingFang_SC'] leading-relaxed">
ID：{{ agent.inviteCode }}
</div>
</div>
<div class="flex flex-col items-center" @click.stop="toInvite">
<div class="w-[29px] h-[29px] relative">
<wd-img width="28" height="28" :src="qrCode"></wd-img>
</div>
<div class="text-white text-[10px] font-normal font-['PingFang_SC'] leading-relaxed">
邀请码
</div>
</div>
</div>
<Card>
<SectionHeading title="本年目标" size="base"></SectionHeading>
<div class="flex flex-col gap-2.5 mt-3">
<template v-for="(it, i) in yearTarget" :key="i">
<div
class="bg-gradient-to-r from-[#fef3ee] to-[#f0f4f9] rounded-lg flex items-center p-4 gap-6"
>
<div>
<div class="w-[45px] h-[45px] rounded-full border-4 border-[#ffe2d0]">
<div style="width: 50px; height: 50px">
<wd-circle
:model-value="
it.thisYearComplete && it.target
? (Number(it.thisYearComplete) / Number(it.target)) * 100
: 0
"
:size="50"
:color="['#FF7742', '#FFAA42', '#4271FF', '#C131FF'][i]"
:clockwise="false"
>
<div class="flex flex-col items-center">
<div
class="w-[29.20px] h-[18.39px] text-black text-sm font-medium font-['DIN']"
>
{{
it.thisYearComplete && it.target
? (Number(it.thisYearComplete) / Number(it.target)) * 100
: 0
}}%
</div>
<div
class="w-[22.71px] h-[10.82px] text-black/60 text-[7px] font-normal font-['PingFang_SC']"
>
达成率
</div>
</div>
</wd-circle>
</div>
</div>
</div>
<div class="flex-1">
<div class="text-black/60 text-xs font-normal font-['PingFang_SC']">
{{ it.typeName }}
</div>
<div class="flex items-center gap-1">
<div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
<!-- 6000 -->
{{ it.target / 10000 }}
</div>
<div class="text-black text-xs font-normal font-['PingFang_SC']">万</div>
</div>
<div class="flex items-center gap-1">
<div class="text-black/60 text-xs font-normal font-['PingFang_SC']">差值</div>
<div class="text-[#ff2d2d] text-xs font-medium font-['DIN'] leading-normal">
<!-- 3000 -->
{{ (it.target - it.thisYearComplete) / 10000 }}
</div>
<div class="text-[#ff2d2d] text-[10px] font-medium font-['DIN'] leading-normal">
万
</div>
</div>
</div>
<div class="">
<div class="text-black/60 text-xs font-normal font-['PingFang_SC']">当年完成</div>
<div class="flex items-center gap-1">
<div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
<!-- 6000 -->
{{ it.thisYearComplete / 10000 }}
</div>
<div class="text-black text-xs font-normal font-['PingFang_SC']">万</div>
</div>
<div class="flex items-center gap-1">
<div class="text-black/60 text-xs font-normal font-['PingFang_SC']">本月</div>
<div class="text-[#0FC187] text-xs font-medium font-['DIN'] leading-normal">
<!-- 3000 -->
{{ it.thisMonthComplete / 10000 }}
</div>
<div class="text-[#0FC187] text-[10px] font-medium font-['DIN'] leading-normal">
万
</div>
</div>
</div>
</div>
</template>
</div>
</Card>
<Card>
<SectionHeading title="设计师数据" size="base"></SectionHeading>
<div class="mt-3 grid grid-cols-3 gap-2.5">
<template v-for="(it, i) in designerData" :key="i">
<div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
<div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-none">
{{ it.typeName }}
</div>
<div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
{{ it.quantity }}
</div>
<div class="flex items-center gap-1">
<div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none">
年新增
</div>
<div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN Exp'] leading-normal">
20
</div>
</div>
</div>
</template>
</div>
</Card>
<Card>
<SectionHeading title="跟进数据" size="base"></SectionHeading>
<div class="mt-3 grid grid-cols-3 gap-2.5">
<template v-for="(it, i) in followData" :key="i">
<div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
<div class="text-black/60 text-xs font-normal font-['PingFang_SC'] leading-none">
{{ it.typeName }}
</div>
<div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
{{ it.quantity }}
</div>
<div class="flex items-center gap-1">
<div class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-none">
年新增
</div>
<div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN Exp'] leading-normal">
20
</div>
</div>
</div>
</template>
</div>
</Card>
</div>
</div>
</template>