<script setup lang="ts">
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import ContentTitle from '../../components/content-title.vue'
import { IPlatformPointUsage } from '../../type'
import { fetchGetPlatformPointUsage } from '@/apis/statistic'

interface Props {
  channel: string[]
}

const { t } = useI18n()

const props = defineProps<Props>()

const platformPointUsage = ref<IPlatformPointUsage>({
  today: 0,
  week: 0,
  month: 0,
  year: 0,
})

watch(
  () => props.channel,
  () => {
    handleGetPlatformPointUsage()
  },
)

async function handleGetPlatformPointUsage() {
  const res = await fetchGetPlatformPointUsage<IPlatformPointUsage>(props.channel)

  if (res.code === 0) {
    platformPointUsage.value = res.data
  }
}
</script>

<template>
  <div class="w-full rounded-[20px] bg-white py-5">
    <ContentTitle :title="t('statistic_module.platform_point_usage')" class="ml-[34px]" />

    <div class="text-font-color mt-6.5 mb-2.5 flex w-full justify-around gap-2 px-[34px]">
      <div
        class="relative flex h-[124px] max-w-[312px] flex-1 flex-col justify-center rounded-[10px] bg-[#F8F9FB] px-10"
      >
        <div class="bg-px-statistics-today_point_icon-png absolute bottom-0 right-0 h-[93px] w-[90px]" />
        <div class="font-600 text-[30px]">
          <n-number-animation :from="0" :to="platformPointUsage.today" :precision="1" />
        </div>
        <span class="mt-3">{{ t('statistic_module.today_usage') }}</span>
      </div>

      <div
        class="relative flex h-[124px] max-w-[312px] flex-1 flex-col justify-center rounded-[10px] bg-[#F8F9FB] px-10"
      >
        <div class="bg-px-statistics-week_point_icon-png absolute bottom-0 right-0 h-[93px] w-[90px]" />
        <div class="font-600 text-[30px]">
          <n-number-animation :from="0" :to="platformPointUsage.week" :precision="1" />
        </div>
        <span class="mt-3">{{ t('statistic_module.current_week_usage') }}</span>
      </div>

      <div
        class="relative flex h-[124px] max-w-[312px] flex-1 flex-col justify-center rounded-[10px] bg-[#F8F9FB] px-10"
      >
        <div class="bg-px-statistics-month_point_icon-png absolute bottom-0 right-0 h-[93px] w-[90px]" />
        <div class="font-600 text-[30px]">
          <n-number-animation :from="0" :to="platformPointUsage.month" :precision="1" />
        </div>
        <span class="mt-3">{{ t('statistic_module.current_month_usage') }}</span>
      </div>

      <div
        class="relative flex h-[124px] max-w-[312px] flex-1 flex-col justify-center rounded-[10px] bg-[#F8F9FB] px-10"
      >
        <div class="bg-px-statistics-year_point_icon-png absolute bottom-0 right-0 h-[93px] w-[90px]" />
        <div class="font-600 text-[30px]">
          <n-number-animation :from="0" :to="platformPointUsage.year" :precision="1" />
        </div>
        <span class="mt-3">{{ t('statistic_module.current_year_usage') }}</span>
      </div>
    </div>
  </div>
</template>
