<template>
  <Card :title="title" :loading="loading">
    <template #extra>
      <condition @change="Search"  @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';
  const props = defineProps({
  loading: Boolean,
  title: String,
  });
  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<number[]>([]);
  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':'日期',
    'num':'数量',
  }
    let data = yixStringData.value.map((ele,index) => {
      return {
        'time':ele,
        'num':viewStaticsData.value && viewStaticsData.value[index] || 0,
      }
    })
    exportElsxFile(data, fields,  props.title)
}
  async function getAddUser() {
    let xdata = [], yData=[]
    let apiSrc = volumeTrend
    let res = await apiSrc(SearchData);
    const data = res.reverse()
    data.map(ele => {
      xdata.unshift(ele.groupKey)
      yData.unshift(ele.count)
    })
    yixStringData.value = xdata
    viewStaticsData.value = yData
    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,
          type: 'line',
          itemStyle: { color: '#38a0ff' },
          name:'数量',
        },
      ],
    });
  }
  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>
