<template>
  <div class="card">
    <div class="header sa-flex sa-row-between">
      <div class="left sa-flex">
        <span class="label sa-m-r-8">{{ data.title }}</span>
        <span class="num">{{ data.data.total }}</span>
      </div>
      <div class="right sa-flex">
        <span class="label sa-m-r-8">{{ data.tip }}</span>
        <span class="num">{{ data.data.today }}</span>
      </div>
    </div>
    <v-chart :option="chartOption" autoresize />
    <div class="footer sa-flex sa-m-t-12">
      <span class="label sa-flex sa-m-r-8">
        <span class="dot sa-m-r-8" :style="{ background: data.color }"></span>
        <span>{{ data.footer }}</span>
      </span>
      <span class="value">{{ data.data.week }}</span>
    </div>
  </div>
</template>

<script setup>
  import { reactive, watch } from 'vue';
  import * as echarts from 'echarts';
  import VChart from 'vue-echarts';
  import dayjs from 'dayjs';

  const props = defineProps(['data']);

  const chartOption = reactive({
    grid: {
      left: 6,
      top: 6,
      right: 6,
      bottom: 6,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none',
      },
      textStyle: {
        fontWeight: 'normal',
      },
    },
    xAxis: {
      type: 'category',
      data: [],
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: props.data.title,
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        data: [],
        zlevel: 1,
        z: 1,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: props.data.color1,
              },
              {
                offset: 1,
                color: props.data.color2,
              },
            ],
            false,
          ),
        },
        itemStyle: {
          color: props.data.color,
        },
        lineStyle: {
          width: 2,
        },
      },
    ],
  });

  function initChart(interval, kld) {
    let dateTime = `${dayjs().format('YYYY-MM-DD')} 00:00:00`;
    let x = [];
    let y = [];
    let timeStamp = [];
    for (let i = 0; i <= interval; i++) {
      x.push(dayjs(dateTime).add(i, kld).format('HH:mm'));
      y.push(0);

      timeStamp.push(dayjs(dateTime).add(i, kld).valueOf());
    }

    x.forEach((item, index) => {
      props.data?.data?.array.forEach((item) => {
        if (
          timeStamp[index + 1] &&
          item.create_time_unix > timeStamp[index] &&
          item.create_time_unix <= timeStamp[index + 1]
        ) {
          y[index]++;
        }
      });
    });
    chartOption.xAxis.data = x;
    chartOption.series[0].data = y;
  }

  watch(
    () => props.data,
    () => {
      initChart(24, 'hours');
    },
    {
      deep: true,
    },
  );
</script>

<style lang="scss" scoped>
  .card {
    padding: 0 var(--sa-padding) 12px;
    font-weight: 400;
    &:hover {
      transition: all 0.2s;
      @media screen and (min-width: 1200px) {
        transform: scale(1.05);
      }
      @media screen and (max-width: 1200px) {
        transform: scale(1.02);
      }
    }
    .header {
      line-height: 48px;
      .left {
        color: var(--sa-subtitle);
        .label {
          font-size: 14px;
        }
        .num {
          font-size: 16px;
        }
      }
      .right {
        font-size: 12px;
        color: var(--sa-font);
      }
    }
    .echarts {
      width: 100%;
      height: 66px;
      margin-bottom: 12px;
    }
    .footer {
      color: var(--sa-font);
      font-size: 12px;
      .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
      }
    }
  }
</style>
