<template>
  <Card title="近半年线上订单趋势" :loading="loading">
    <template #extra>
      <div class="condition">
          <div class="selct" style="display: inline-block;">
            <span style="margin-right:15px">颗粒度</span>
            <Select
            v-model:value="value"
            style="width: 100px;margin-right:30px"
            placeholder="请选择颗粒度"
            :options="options"
            @change="handleChange"
          ></Select>
          </div>
          <a-button type="primary" @click="handleExport">导出</a-button>
      </div>
    </template>
      <div ref="chartRef" :style="{ height, width }"></div>
  </Card>
</template>
<script lang="ts">
  import { basicProps } from './props';
  // import { dateUtil } from '/@/utils/dateUtil';
  import { Card, Select } from 'ant-design-vue';
</script>
<script lang="ts" setup>
  import { ref, Ref, watch, defineEmits } from 'vue';
  // import type { dataItemType } from './props';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { exportElsxFile, } from '/@/utils/file/download';
  const props = defineProps({
  loading: Boolean,
    ...basicProps,
  });
  const value = ref('2');
  const options = ref<SelectProps['options']>([
    {
      value: '0',
      label: '日',
    },
    {
      value: '1',
      label: '周',
    },
    {
      value: '2',
      label: '月',
    },
    ]);
  const emit = defineEmits(["alertSome"])
  const downOrderData = ref<number[]>([]);
  const incrementOrderData = ref<number[]>([]);
  const partsOrderData = ref<number[]>([]);
  const yixStringData = ref<string[]>([]);
  const echartTypr = ref('line')
  const nameList = ref<string[]>(['下载订单','权益订单','配件订单']);
  const maxSize = ref(0);
  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  function handleChange(val){
    emit('change',{type:'order',value:val})
  }
  function handleExport(){
    let fields  = {
    'time':'日期',
    'd':'下载订单',
    'e':'权益订单',
    'p':'配件订单',
  }
    let data = yixStringData.value.map((ele,index) => {
      return {
        'time':ele,
        'd':downOrderData.value && downOrderData.value[index] || 0,
        'e':incrementOrderData.value && incrementOrderData.value[index] || 0,
        'p':partsOrderData.value && partsOrderData.value[index] || 0,
      }
    })
    exportElsxFile(data, fields,'订单趋势')
  }
  function handlesetOptions() {
    setOptions({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      legend: {
        orient: 'horizontal',
        bottom: 0,
      },
      // grid: { left: '2%', right: '2%', top: '10%', bottom: '10%', containLabel: true },
      xAxis: {
        type: 'category',
        // data: [...new Array(30)].map((_item, index) => `${index + 1}日`),
        data: yixStringData.value,
      },
      yAxis: {
        type: 'value',
        // max: maxSize.value,
        splitNumber: 4,
      },
      series: [
        {
          data: downOrderData.value,
          type: echartTypr.value,
          itemStyle: { color: '#38a0ff' },
          barMaxWidth: 80,
          name: nameList.value[0],
        },
        {
          data: incrementOrderData.value,
          type: echartTypr.value,
          itemStyle: { color: '#4cca73' },
          barMaxWidth: 80,
          name: nameList.value[1],
        },
        {
          data: partsOrderData.value,
          type: echartTypr.value,
          itemStyle: { color: '#FDD56A' },
          barMaxWidth: 80,
          name: nameList.value[2],
        },
      ],
    });
  }
  // props.viewStatics,
  
  watch(
    () => props.echartData,
    (echartData) => {
      downOrderData.value = echartData.downOrder ||[]
      incrementOrderData.value = echartData.incrementOrder ||[]
      partsOrderData.value = echartData.partOrder ||[]
      yixStringData.value = echartData.xdata ||[]
      if(echartData.nameList){
        nameList.value = echartData.nameList
      }
      if(echartData.echartTypr){
        echartTypr.value = echartData.echartTypr
      }
      const maxNumber = Math.max(...echartData.downOrder.concat(echartData.incrementOrder));
      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>
