<template>
  <div v-if="['xxl', 'xl', 'md'].includes(widthType)">
    <div>
      <GIcon name="gt-plane-upload-black" />
      <span class="text-[#000] text-[16px] ml-2 font-semibold">下载使用量</span>
    </div>
    <div class="flex mt-4 items-end">
      <div class="text-[#2951E0] text-xl mr-8 font-semibold">
        {{ total }}
      </div>
      <div class="num-empty" v-if="isEmpty"></div>
      <div v-else id="download" style="width: 100%; height: 56px"></div>
    </div>
  </div>

  <div v-else class="p-2 download-chart-mobile">
    <div class="mb-4">
      <span class="text-[#000] text-[16px] ml-2 font-semibold">下载使用量：</span>
      <span class="text-[#2951E0] text-[16px] font-semibold">
        {{ total }}
      </span>
    </div>
    <div v-if="isEmpty" class="num-empty"></div>
    <div v-else id="download" style="width: 100%; height: 56px"></div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue';
import { getRepoClone } from '@/api/repo';
import { usePageResize } from '@/utils/hooks/usePageResize';
import * as echarts from 'echarts';

const props = defineProps<{
  repoId: string;
}>();

const { widthType } = usePageResize();
const isEmpty = ref(false);

const initGitCode = () => {
  const myChart = echarts.init(document.getElementById('download'));

  myChart.setOption({
    xAxis: {
      type: 'category',
      show: false,
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    tooltip: {
      trigger: 'axis',
      renderMode: 'richText',
      formatter: function(params) {
        return `${params[0].value}`;
      }
    },
    grid: {
      left: 0,
      bottom: 2,
      top: 0,
      right: 0,
      height: 50
    },
    series: [
      {
        data: downloadList.value,
        type: 'line',
        symbol: 'none',
        lineStyle: { color: '#2951E0' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(41, 81, 224, 0.24)' },
            { offset: 1, color: 'rgba(41, 81, 224, 0.04)' }
          ])
        }
      }
    ]
  });
};

const downloadList = ref([]);
const total = ref(0);
const getDownloadData = () => {
  getRepoClone(props.repoId).then((data) => {
    if (data?.data?.data) {
      total.value = data.data.data[0]?.total_dl_cnt || 0;
      data.data.data.forEach((item) => {
        downloadList.value.unshift(item.today_dl_cnt || 0);
      });
    }
    if (total.value === 0) {
      isEmpty.value = true;
    } else {
      // 只有一天数据，前面加个0，展示折线
      downloadList.value.length === 1 && (downloadList.value.unshift(0));
      nextTick(() => {
        initGitCode();
      });
    }
  });
};

onMounted(() => {
  getDownloadData();
});
</script>
<style lang="scss" scoped>
.download-chart-mobile {
  border-radius: 4px;
  border: 1px solid #E3E3EE;
  background: #F1F1F8;
}
.num-empty {
  height: 10px;
  border-top: 2px solid #2951E0;
  width: 100%;
  background: linear-gradient(180deg, rgba(41, 81, 224, 0.12) 0%, rgba(41, 81, 224, 0.04) 100%);
}
</style>
