<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import ContentTitle from '../components/content-title.vue'
import { IPlatformAgentUsage, IPlatformAgentUsageDetailItem } from '../type'
import { createPlatformAgentUsageDetail } from './columns'
import CustomPagination from '@/components/custom-pagination/custom-pagination.vue'
import { fetchGetPlatformAgentUsage, fetchGetPlatformAgentUsageDetail } from '@/apis/statistic'
import { ChannelType } from '@/enums/channel'
import { usePagination } from '@/composables/usePagination'
import useTableScrollY from '@/composables/useTableScrollY'
import DataSelectSearch from '@/components/date-select-search/data-select-search.vue'
import { RangType } from '@/components/date-select-search/type.d'

const { t } = useI18n()

const { pageContentWrapRef, tableContentY } = useTableScrollY(46 + 124 + 28 + 36 + 20 + 48 + 28 + 40)
const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()

const platformAgentUsage = ref<IPlatformAgentUsage>({
  createCount: 0,
  usageCount: 0,
  unPublishCount: 0,
  publishCount: 0,
})

const currentTime = ref<RangType>(RangType.week)
const selectDateRange = ref<[string, string]>(['', ''])

const platformAgentUsageDetailLoading = ref(false)
const platformAgentUsageDetailColumns = createPlatformAgentUsageDetail()
const platformAgentUsageDetailData = ref<IPlatformAgentUsageDetailItem[]>([])

watch([() => paginationData.pageNo, () => paginationData.pageSize], () => {
  handleGetPlatformAgentUsageDetail(currentTime.value, selectDateRange.value[0], selectDateRange.value[1])
})

onMounted(() => {
  handleGetPlatformAgentUsage()
})

async function handleGetPlatformAgentUsage() {
  const channels = [
    ChannelType.api,
    ChannelType.index,
    ChannelType.link_share,
    ChannelType.mall,
    ChannelType.preview,
    ChannelType.multi_preview,
  ]
  const res = await fetchGetPlatformAgentUsage<IPlatformAgentUsage>(channels)

  if (res.code === 0) {
    platformAgentUsage.value = res.data
  }
}

async function handleGetPlatformAgentUsageDetail(rangType: RangType, startTime: string, endTime: string) {
  currentTime.value = rangType
  selectDateRange.value = [startTime, endTime]
  platformAgentUsageDetailLoading.value = true

  const res = await fetchGetPlatformAgentUsageDetail<IPlatformAgentUsageDetailItem[]>({
    timeRange: {
      rangType,
      startTime,
      endTime,
    },
    pagingInfo: paginationData,
  })

  if (res.code === 0) {
    platformAgentUsageDetailData.value = res.data
    paginationData.totalRows = res.pagingInfo?.totalRows || 0
    paginationData.totalPages = res.pagingInfo?.totalPages || 0
    platformAgentUsageDetailLoading.value = false
  }
}
</script>

<template>
  <div ref="pageContentWrapRef" class="mx-6 h-full rounded-[10px] bg-white pt-[46px]">
    <div class="text-font-color mb-7 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-create_icon-png absolute bottom-0 right-0 h-[93px] w-[90px]" />
        <div class="font-600 text-[30px]">
          <n-number-animation :from="0" :to="platformAgentUsage.createCount" />
        </div>
        <span class="mt-3">{{ t('statistic_module.create_agent_count') }}</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-usage_icon-png absolute bottom-0 right-0 h-[93px] w-[90px]" />
        <div class="font-600 text-[30px]">
          <n-number-animation :from="0" :to="platformAgentUsage.usageCount" />
        </div>
        <span class="mt-3">{{ t('statistic_module.usage_agent_count') }}</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-unpublish_icon-png absolute bottom-0 right-0 h-[93px] w-[90px]" />
        <div class="font-600 text-[30px]">
          <n-number-animation :from="0" :to="platformAgentUsage.unPublishCount" />
        </div>
        <span class="mt-3">{{ t('statistic_module.unpublish_agent_count') }}</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-publish_icon-png absolute bottom-0 right-0 h-[93px] w-[90px]" />
        <div class="font-600 text-[30px]">
          <n-number-animation :from="0" :to="platformAgentUsage.publishCount" />
        </div>
        <span class="mt-3">{{ t('statistic_module.published_agent_count') }}</span>
      </div>
    </div>

    <div class="mx-[34px] flex items-start justify-between">
      <ContentTitle :title="t('statistic_module.personal_use_agent_detail')" />

      <DataSelectSearch @update-search-list="handleGetPlatformAgentUsageDetail" />
    </div>

    <div class="mx-[34px] mt-5 flex flex-1 flex-col">
      <div :style="{ height: tableContentY + 48 + 'px' }">
        <n-data-table
          :columns="platformAgentUsageDetailColumns"
          :bordered="false"
          :bottom-bordered="false"
          :max-height="tableContentY"
          :loading="platformAgentUsageDetailLoading"
          :data="platformAgentUsageDetailData"
          :scroll-x="1505"
        >
          <template #empty>
            <div class="flex items-center justify-center" :style="{ height: tableContentY + 'px' }">
              <div class="flex flex-col items-center justify-center">
                <div class="bg-px-empty_list-png mb-5 h-[68px] w-[68px]" />
                <p class="select-none text-[#84868c]">{{ t('common_module.empty_data') }}</p>
              </div>
            </div>
          </template>
        </n-data-table>
      </div>

      <div v-show="tableContentY > 0" class="mt-5 flex justify-end">
        <CustomPagination
          :paging-info="paginationData"
          @update-page-no="handlePageNoChange"
          @update-page-size="handlePageSizeChange"
        />
      </div>
    </div>
  </div>
</template>
