<script setup lang="ts">
import { watch, onMounted, defineProps } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { api_logCount } from "@/api/index.ts";

defineOptions({
  name: 'LineChart'
});


const props = defineProps({
  date: {
    type: Array,
    default: () => []
  }
});

watch(props, () => {
  getLogCount();
})

// 获取日志报警的数据
const getLogCount = async () => {


  await api_logCount(props.date).then(res => {
    if (res.data.code === 200) {
      console.log("================= res", res.data.data);
      let data = res.data.data;
      console.log("=================== data", data);
      updateOptions(opts => {
        console.log("========================= opts", opts)
        // opts.series[1].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678];
        opts.xAxis.data = data.dateLabel;
        opts.legend.data = data.result;

        opts.series.forEach((item, index) => {
          opts.series[index].data =  [];
        })


        const service = (name = (Math.random() * 100).toFixed(0)) => {
          return {
            color: '#1872F0',
            name,
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.25,
                    color: '#1872F0'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ]
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: new Array(data[0].countList.length).fill(100)
          };
        }


        data.countLabel.forEach((item, index) => {
          opts.series.push({
            color: '#1872F0',
            name: data.result[index],
            type: 'line',
            smooth: true,
            stack: 'Total',
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.25,
                    color: '#1872F0'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ]
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: item
          })
        })

        // opts.series = new Array(data[0].countList.length).fill(
        //   series
        // );
        //  date 10
        //  countList 17
        //  opts.series[0].data = [0xxx]



        // data.forEach(wrapItem => {
        //   wrapItem.countList.forEach((item, index) => {
        //     opts.series[index].name = item.algorithmName;
        //   })
        // });


        // data[0].countList((item, index) => {
        //   series.data[index] = item.count;
        // })
        console.log("========================= opts", opts.xAxis.data, opts.legend.data)
        return opts;
      })
    }
  })
}


onMounted(() => {
  getLogCount()
})

const appStore = useAppStore();

const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: [$t('page.home.downloadCount'), $t('page.home.registerCount')]
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [] as string[]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      color: '#1872F0',
      name: $t('page.home.downloadCount'),
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#1872F0'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [] as number[]
    },
    {
      color: '#26deca',
      name: $t('page.home.registerCount'),
      type: 'line',
      smooth: true,
      stack: 'Total',
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0.25,
              color: '#26deca'
            },
            {
              offset: 1,
              color: '#fff'
            }
          ]
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: []
    }
  ]
}));

async function mockData() {
  await new Promise(resolve => {
    setTimeout(resolve, 1000);
  });

  updateOptions(opts => {
    [
      {
        label: "10/15",
        num: 502
      },
      // ?cvxccxvxcv
    ]
    // opts.xAxis.data = ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'];
    // opts.series[0].data = [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311];
    // opts.series[1].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678];

    return opts;
  });
}

// function updateLocale() {
//   updateOptions((opts, factory) => {
//     const originOpts = factory();

//     opts.legend.data = originOpts.legend.data;
//     opts.series[0].name = originOpts.series[0].name;
//     opts.series[1].name = originOpts.series[1].name;

//     return opts;
//   });
// }

// async function init() {
//   mockData();
// }

// watch(
//   () => appStore.locale,
//   () => {
//     updateLocale();
//   }
// );

// init
// init();
</script>

<template>
  <NCard :bordered="false" class="card-wrapper">
    <!--  overflow-hidden -->
    <div ref="domRef" class="h-360px"></div>
  </NCard>
</template>

<style scoped></style>
