<template>
  <a-spin :loading="loading" style="width: 100%">
    <a-card class="general-card" :header-style="{ paddingBottom: '14px' }">
      <template #title> 近一年每月项目数量统计 </template>
      <Chart style="width: 100%; height: 347px" :option="chartOption" />
    </a-card>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ToolTipFormatterParams } from '@/types/echarts'
import useLoading from '@/hooks/loading'
import useChartOption from '@/hooks/chart-option'
import { getProjectMonthCountStat } from '@/api/dashboard/project'
import { eachMonthOfInterval, endOfYear, format, startOfYear } from 'date-fns'

const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
  return items
    .map(
      el => `<div class="content-panel">
    <p>
      <span style="background-color: ${
        el.color
      }" class="tooltip-item-icon"></span>
      <span>
      ${el.seriesName}
      </span>
    </p>
    <span class="tooltip-value">
      ${Number(el.value).toLocaleString()}
    </span>
  </div>`
    )
    .join('')
}

const { loading, setLoading } = useLoading(true)
const xAxisStat = ref<string[]>([])
const totalCount = ref<number[]>([])
const undoneCount = ref<number[]>([])

const { chartOption } = useChartOption(isDark => {
  return {
    grid: {
      left: '4%',
      right: 0,
      top: '20',
      bottom: '60'
    },
    legend: {
      bottom: 0,
      icon: 'circle',
      textStyle: {
        color: '#4E5969'
      }
    },
    xAxis: {
      type: 'category',
      data: xAxisStat.value,
      axisLine: {
        lineStyle: {
          color: isDark ? '#3f3f3f' : '#A9AEB8'
        }
      },
      axisTick: {
        show: true,
        alignWithLabel: true,
        lineStyle: {
          color: '#86909C'
        }
      },
      axisLabel: {
        color: '#86909C'
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#86909C',
        formatter(value: number, idx: number) {
          if (idx === 0) return `${value}`
          return `${value}个`
        }
      },
      splitLine: {
        lineStyle: {
          color: isDark ? '#3F3F3F' : '#E5E6EB'
        }
      }
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter(params) {
        const [firstElement] = params as ToolTipFormatterParams[]
        return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
          </div>`
      },
      className: 'echarts-tooltip-diy'
    },
    series: [
      {
        name: '总数',
        data: totalCount.value,
        // stack: 'one',
        type: 'bar',
        barWidth: 16,
        color: isDark ? '#4A7FF7' : '#246EFF'
      },
      {
        name: '未完成',
        data: undoneCount.value,
        // stack: 'one',
        type: 'bar',
        color: isDark ? '#ff9626' : '#ff7d00'
      }
    ]
  }
})
const fetchData = async () => {
  setLoading(true)
  try {
    const beginAt = startOfYear(new Date())
    const endAt = endOfYear(new Date())
    const xValue = eachMonthOfInterval({
      start: beginAt,
      end: endAt
    }).map(item => {
      return format(item, 'yyyy-MM')
    })
    const { list } = await getProjectMonthCountStat({
      begin_at: format(beginAt, 'yyyy-MM'),
      end_at: format(endAt, 'yyyy-MM')
    })
    xAxisStat.value = xValue
    xValue.map(item => {
      const data = list.find(l => l.ts === item)
      if (data) {
        totalCount.value.push(data.amount)
        undoneCount.value.push(data.undone)
      } else {
        totalCount.value.push(0)
        undoneCount.value.push(0)
      }
      return item
    })
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false)
  }
}
fetchData()
</script>

<style scoped lang="less"></style>
