s
<template>
  <a-card>
    <div class="content-wrap">
      <div class="content">
        <a-statistic :value="todayTotal" :value-from="0" animation show-group-separator title="用户提交认证" />
        <div class="desc">
          <a-typography-text class="label" type="secondary"> 较昨日</a-typography-text>
          <a-typography-text v-if="diffTotal < 0" type="success">
            {{ diffTotal }}
            <icon-arrow-fall />
          </a-typography-text>
          <a-typography-text v-else type="danger">
            {{ diffTotal }}
            <icon-arrow-rise />
          </a-typography-text>
        </div>
      </div>
      <div class="chart">
        <Chart :option="registerChart" />
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
  import useChartOption from '@/hooks/chart-option';
  import { IconArrowFall, IconArrowRise } from '@arco-design/web-vue/es/icon';
  import { computed, onMounted, ref } from 'vue';
  import { subtract } from 'lodash';
  import useDashboardApi from '@/http/dashboard';
  import { ToolTipFormatterParams } from '@/types/echarts';

  const record = ref<{ time: string[]; data: number[] }>({ time: [], data: [] });

  const todayTotal = computed(() => {
    return record.value.data[record.value.data.length - 1] || 0;
  });
  const diffTotal = computed(() => {
    return subtract(record.value.data[record.value.data.length - 1], record.value.data[record.value.data.length - 2]) || 0;
  });

  const formatTooltip = (params: ToolTipFormatterParams[]) => {
    const [firstElement] = params;
    return `
           <div class="content-panel">
            <p>
              <span style="background-color: ${firstElement.color}" class="tooltip-item-icon"></span>
              <span>${firstElement.name}</span>
            </p>
            <span class="tooltip-value">${firstElement.value?.toLocaleString()}</span>
          </div>`;
  };

  const { chartOption: registerChart } = useChartOption(() => {
    return {
      grid: { left: 0, right: 0, top: 10, bottom: 5 },
      xAxis: { type: 'category', show: false, boundaryGap: true, data: record.value.time },
      yAxis: { show: false, type: 'value', scale: true },
      tooltip: {
        show: true,
        trigger: 'axis',
        formatter: (params) => formatTooltip(params as ToolTipFormatterParams[]),
        className: 'echarts-tooltip-diy',
      },
      series: { data: record.value.data, type: 'bar', barWidth: 8, itemStyle: { borderRadius: 2, color: '#165DFF' } },
    };
  });

  onMounted(async () => {
    record.value = await useDashboardApi.userCertify();
  });
</script>

<style lang="less" scoped>
  :deep(.arco-card) {
    border-radius: 4px;
  }

  :deep(.arco-card-body) {
    width: 100%;
    height: 134px;
    //padding: 0;
  }

  .content-wrap {
    width: 100%;
    //padding: 16px;
    white-space: nowrap;
  }

  :deep(.content) {
    float: left;
    width: 108px;
    height: 102px;
  }

  :deep(.arco-statistic) {
    .arco-statistic-title {
      font-size: 14px;
      font-weight: bold;
      white-space: nowrap;
    }

    .arco-statistic-content {
      margin-top: 10px;
    }
  }

  .chart {
    float: right;
    width: calc(100% - 108px);
    //height: 90px;
    vertical-align: bottom;
  }

  .label {
    padding-right: 8px;
    font-size: 12px;
  }
</style>