<template>
  <Dialog
    v-model="visible"
    diaTitle="应用统计"
    :width="'50%'"
    :height="'50%'"
    @close="handleCloseFun"
    show-footer
  >
    <div class="chart-content">
      <EchartCard
        ref="appChartRef"
        :bar-type="'lineChart'"
        :title="''"
        :charts-id="'chart-app'"
      ></EchartCard>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Dialog from '@/components/common/dialog/index.vue';
import EchartCard from '@/components/common/echartCard/index.vue';
import { queryAllApplicationCallRecordApi } from '@/api/system/application';

const emits = defineEmits(['close']);

const handleCloseFun = () => {
  emits('close');
};

const visible = ref(true);
const appChartRef = ref();

const initChartFun = async () => {
  try {
    const res: any = await queryAllApplicationCallRecordApi();
    if (res && res.code === 200) {
      const seriesData = res.data.map((item: any) => {
        return item.callTimes;
      });

      const xData = res.data.map((item: any) => {
        return item.appName;
      });

      appChartRef.value.commonChartRef.disposeEchartsByKey('chart-app');
      appChartRef.value.commonChartRef.option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '10%',
          bottom: '10%',
          left: '5%',
          right: '5%',
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
        },
        dataZoom:
          xData.length > 4
            ? [
                {
                  type: 'slider',
                  show: true,
                  xAxisIndex: [0],
                  start: 0,
                  end: 100,
                  textStyle: {
                    color: 'transparent',
                  },
                  maxValueSpan: 4,
                  minValueSpan: 4,
                  moveHandleSize: 10,
                  height: 0,
                  filterMode: 'empty',
                  bottom: 15,
                },
              ]
            : null,
        series: [
          {
            data: seriesData,
            type: 'bar',
            name: '启动次数',
            barWidth: '30',
          },
        ],
      };
      appChartRef.value.commonChartRef.initChart();
    }
  } catch {}
};

onMounted(() => {
  initChartFun();
});
</script>

<style lang="scss" scoped>
.chart-content {
  width: 100%;
  height: 100%;
}
</style>
