<template>
  <TechCard class="chart-wrapper">
    <template #extra>
      <div class="header">
        <div class="card-title">{{ title }}</div>
        <div classs="card-extra"><slot name="extra"></slot></div>
      </div>
    </template>
    <BaseChart :option="chartOption" :height="155" />
    <div v-if="loading" class="loading-mask"> <a-spin /> </div>
  </TechCard>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import * as echarts from 'echarts'
import TechCard from '../TechCard/index.vue'

defineOptions({ name: 'HistoryChartCard' })

interface StatInfo {
  lable: string
  count: number
}

const props = defineProps<{
  title: string
  dayStatInfo: StatInfo[]
  monthStatInfo: StatInfo[]
  color: string
  seriesName: string
  mode: 'day' | 'month'
  loading?: boolean
}>()

const chartData = computed(() => {
  if (props.mode === 'day') {
    const dates = props.dayStatInfo.map((item) => item.lable)
    const values = props.dayStatInfo.map((item) => item.count ?? 0)
    return { dates, values }
  } else {
    const dates = props.monthStatInfo.map((item) => item.lable)
    const values = props.monthStatInfo.map((item) => item.count ?? 0)
    return { dates, values }
  }
})

const chartOption = computed(() => ({
  grid: { top: 10, right: 20, bottom: 30, left: 30 },
  tooltip: { trigger: 'item', axisPointer: { type: 'shadow' } },
  xAxis: {
    type: 'category',
    data: chartData.value.dates,
    axisLine: { lineStyle: { color: '#2a3b5a' } },
    axisLabel: { color: '#9cc5e0', fontSize: 12 },
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: '#2a3b5a' } },
    axisLabel: { color: '#9cc5e0', fontSize: 12 },
    splitLine: { lineStyle: { color: 'rgba(42, 59, 90, 0.3)' } },
  },
  series: [
    {
      name: props.seriesName,
      type: props.mode === 'day' ? 'line' : 'bar',
      smooth: props.mode === 'day',
      symbol: 'circle',
      symbolSize: 8,
      data: chartData.value.values,
      itemStyle: { color: props.color },
      lineStyle: {
        width: 3,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          { offset: 0, color: props.color },
          { offset: 1, color: props.color },
        ]),
      },
      areaStyle:
        props.mode === 'day'
          ? {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: `${props.color}4D` },
                { offset: 1, color: `${props.color}1A` },
              ]),
            }
          : undefined,
    },
  ],
}))
</script>

<style scoped lang="less">
.chart-wrapper {
  position: relative;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 12px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: v-bind(color);
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
</style>
