<script setup lang="ts">
import { onMounted, reactive, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { fetchGetMonthUserCount } from '@/apis/agent-analyze'
import CustomEchart from '@/components/custom-echart/custom-echart.vue'
import { ChannelType } from '@/enums/channel'
import { type EChartsOption } from '@/utils/echarts'
import AnalysisContentTitle from './analysis-content-title.vue'
import { ChannelCountItem } from '../types'

interface ChannelUsersItem {
  date: string
  channelDataCount: ChannelCountItem[]
}

const { t } = useI18n()

const { params } = useRoute()

const channelUserChartRef = useTemplateRef<InstanceType<typeof CustomEchart> | null>('channelUserChartRef')

const defaultEchartOption: EChartsOption = {
  legend: {
    show: false,
    right: '54px',
    top: '20px',
  },
  xAxis: [
    {
      type: 'category',
    },
  ],
  yAxis: [{}],
  tooltip: {
    trigger: 'axis',
    textStyle: {
      fontWeight: 'normal',
    },
  },
  series: [
    {
      name: t('analysis_module.link_share'),
      type: 'bar',
      barMaxWidth: '34px',
      barMinHeight: 4,
      encode: { x: 'date', y: 'linkShareCount' },
      itemStyle: {
        color: '#454FFF',
        borderRadius: [5, 5, 0, 0],
      },
    },
    {
      name: t('analysis_module.agent_square'),
      type: 'bar',
      barMaxWidth: '34px',
      barMinHeight: 4,
      encode: { x: 'date', y: 'mallCount' },
      itemStyle: {
        color: '#00C2FF',
        borderRadius: [5, 5, 0, 0],
      },
    },
  ],
  grid: {
    left: '58px',
    right: '54px',
    bottom: '48px',
    top: '100px',
  },
}

const channelUserChartOption = reactive({ ...defaultEchartOption })

onMounted(() => {
  handleGetMonthUserCount()
})

async function handleGetMonthUserCount() {
  channelUserChartRef.value?.echartShowLoading()

  const res = await fetchGetMonthUserCount<ChannelUsersItem[]>(params.agentId as string, [
    ChannelType.link_share,
    ChannelType.mall,
  ])

  if (res.code === 0) {
    const dataSource = res.data.map((item) => {
      const linkShareCount =
        item.channelDataCount.find((channelItem) => channelItem.channel === ChannelType.link_share)?.count || 0
      const mallCount =
        item.channelDataCount.find((channelItem) => channelItem.channel === ChannelType.mall)?.count || 0

      return {
        date: item.date,
        linkShareCount,
        mallCount,
      }
    })

    channelUserChartOption.dataset = {
      source: dataSource,
    }

    channelUserChartOption.legend = {
      ...channelUserChartOption.legend,
      show: true,
    }

    channelUserChartRef.value?.echartHideLoading()
  }
}
</script>

<template>
  <div class="relative h-full w-full rounded-[20px] bg-white">
    <div class="z-99 absolute left-[34px] top-5 mr-[270px]">
      <AnalysisContentTitle :title="t('analysis_module.monthly_user_count_comparison_by_channel')" />
    </div>

    <div class="h-full w-full">
      <CustomEchart ref="channelUserChartRef" :option="channelUserChartOption" />
    </div>
  </div>
</template>
