<template>
  <Card :title="title" :loading="loading">
    <template #extra>
      <condition @change="Search" :cameraType="true" @expor="handleExport" />
    </template>
    <div ref="chartRef" :style="{ height: '280px', width: '100%' }"></div>
  </Card>
</template>
<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { ref, Ref, watch, onMounted, reactive } from 'vue';
import { volumeTrend } from '/@/api/home/index';
import condition from './condition.vue';
import dayjs from 'dayjs';
import { useECharts } from '/@/hooks/web/useECharts';
import { exportElsxFile } from '/@/utils/file/download';
import { useI18n } from '/@/hooks/web/useI18n';
const props = defineProps({
  loading: Boolean,
  title: String,
});
const { t } = useI18n();
let SearchData = reactive({
  startTime: dayjs().subtract(6, 'month').format('YYYY-MM-DD'),
  endTime: dayjs().format('YYYY-MM-DD'),
  type: '2',
  cameraType: '0',
});
const viewStaticsData = ref({
  kjList: [],
  kkList: [],
  ssList: [],
});
const shareStaticsData = ref<number[]>([]);
const yixStringData = ref<string[]>([]);
const maxSize = ref(0);
const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
onMounted(() => {
  getAddUser();
});
function handleChange(val) {
  console.log('handleChange', val);
  SearchData = val;
  getAddUser();
}
function Search(val) {
  SearchData = val;
  getAddUser();
}
function handleExport() {
  console.log('props', props.title);
  let fields = {
    time: '日期',
    kankan: t('routes.scene.tableType.0'),
    kanjian: t('routes.scene.tableType.1'),
    shenshi: t('routes.scene.tableType.2'),
  };
  let data = yixStringData.value.map((ele, index) => {
    return {
      time: ele,
      kankan: (viewStaticsData.value && viewStaticsData.value.kkList[index]) || 0,
      kanjian: (viewStaticsData.value && viewStaticsData.value.kjList[index]) || 0,
      shenshi: (viewStaticsData.value && viewStaticsData.value.ssList[index]) || 0,
    };
  });
  exportElsxFile(data, fields, props.title);
}
async function getAddUser() {
  let xdata = [],
  kj = [],
  kk = [],
  ss = [];
  let apiSrc = volumeTrend;
  let { kjList = [], kkList = [], ssList = [], } = await apiSrc(SearchData);
  kjList.map((ele) => {
    xdata.push(ele.groupKey);
    kj.push(ele.count);
  });
  kk = kkList.map(ele => ele.count)
  ss = ssList.map(ele => ele.count)
  yixStringData.value = xdata;
  viewStaticsData.value.kjList = kj;
  viewStaticsData.value.kkList = kk;
  viewStaticsData.value.ssList = ss;
  handlesetOptions();
}
function handlesetOptions() {
  setOptions({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          width: 1,
          color: '#019680',
        },
      },
    },
    legend: {
      orient: 'horizontal',
      bottom: 0,
    },
    xAxis: {
      type: 'category',
      data: yixStringData.value,
    },
    yAxis: {
      name: '数量',
      type: 'value',
      splitNumber: 4,
    },
    series: [
      {
        data: viewStaticsData.value.kkList,
        type: 'line',
        itemStyle: { color: '#38a0ff' },
        name: t('routes.scene.tableType.0'),
      },
      {
        data: viewStaticsData.value.kjList,
        type: 'line',
        itemStyle: { color: '#4cca73' },
        name: t('routes.scene.tableType.1'),
      },
      {
        data: viewStaticsData.value.ssList,
        type: 'line',
        itemStyle: { color: '#FDD56A' },
        name: t('routes.scene.tableType.2'),
      },
    ],
  });
}
watch(
  () => props.loading,
  () => {
    // const maxNumber = Math.max(...viewStaticsData.value.concat(shareStaticsData.value));
    // const pow = Math.pow(10, maxNumber.toString().length - 1);
    // maxSize.value = maxNumber > 10 ? Math.floor(maxNumber / 10) * 10 + pow * 2 : 10;
    handlesetOptions();
  },
  {
    immediate: true,
    deep: true,
  },
);
</script>
