<template>
  <div class="work-statistics h-full">
    <qm-low-form :params="params" :fields="fields" :label-width="80">
      <template #timeArr>
        <qm-date-range-picker
          v-model="params.timeArr"
          value-format="timestamp"
        ></qm-date-range-picker>
      </template>
    </qm-low-form>
    <div class="chart-wrap">
      <vue-echarts :option="chartOptions" autoresize></vue-echarts>
    </div>
  </div>
</template>
<script name="WorkStatistics" lang="ts" setup>
import { ref, computed, reactive, onMounted } from "vue";
import { getWorkStatistics, exportWorkStatistics } from "@/ap/scanManage";
import { useUserStore } from "@/store";
import VueEcharts from "vue-echarts";
import { graphic } from "echarts";

const userStore = useUserStore();
const params = reactive({
  timeArr: [],
});
const transParams = computed(() => {
  return {
    startTime: params.timeArr[0],
    endTime: params.timeArr[1],
    examId: userStore.curExam?.id,
  };
});
const data = ref([]);
const search = () => {
  getWorkStatistics(transParams.value).then((res: any) => {
    data.value = res || [];
  });
};
onMounted(() => {
  search();
});
const fields = computed(() => {
  return [
    {
      cell: "timeArr",
      type: "date",
      label: "开始时间",
      attrs: {
        showTime: true,
        format: "YYYY-MM-DD HH:mm:ss",
      },
    },
    {
      type: "buttons",
      colSpan: 5,
      children: [
        {
          text: "查询",
          onClick: () => {
            search();
          },
        },
        {
          text: "导出",
          attrs: {
            type: "default",
            loading: exportLoading.value,
          },
          onClick: () => {
            exportFile();
          },
        },
      ],
    },
  ];
});

const chartOptions = computed(() => {
  const xData = data.value.map((item: any) => item.device);
  return {
    grid: {
      top: 50,
      bottom: 15,
      left: 30,
      right: 30,
      containLabel: true,
    },
    legend: {
      top: 10,
      itemWidth: 14,
      data: ["扫描量"],
    },
    tooltip: {
      trigger: "item",
      triggerOn: "mousemove",
    },
    xAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: {
        rotate: 30,
        // interval: 0,
      },
      data: xData,
    },
    yAxis: {
      axisTick: { show: false },
      type: "value",
    },
    dataZoom: [
      {
        show: xData.length > 20,
        realtime: true,
        height: 20,
        bottom: 10,
        start: 0,
        end: 2000 / xData.length,
        brushSelect: false,
      },
    ],
    series: [
      {
        name: "扫描量",
        type: "bar",
        itemStyle: {
          normal: {
            color: new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#4080ff",
              },
              {
                offset: 1,
                color: "#C6E1FF",
              },
            ]),
          },
        },
        data: data.value.map((item: any) => item.answerScanCount),
        label: {
          show: true,
          color: "#444",
          fontSize: 10,
          position: "top",
          formatter({ value }: { value: number }) {
            return value > 0 ? `${value}` : "";
          },
        },
        barWidth: xData.length <= 20 ? "20" : "16",
        barCategoryGap: "50%",
        barGap: "0%",
      },
    ],
  };
});
const exportLoading = ref(false);
const exportFile = async () => {
  if (exportLoading.value) return;
  exportLoading.value = true;

  exportWorkStatistics(transParams.value)
    .then(() => {
      window.$message.success("导出成功！");
    })
    .finally(() => {
      exportLoading.value = false;
    });
};
</script>
<style lang="less" scoped>
.work-statistics {
  padding: 20px;
  .chart-wrap {
    height: calc(100% - 50px);
  }
}
</style>
