<template>
  <div>
    <div>
      <LoadingBox v-if="loading" />
      <div v-else>
        <apexchart
          height="300px"
          width="100%"
          type="line"
          :options="chartByDate.options"
          :series="chartByDate.series"
        />

        <apexchart
          height="300px"
          width="100%"
          type="pie"
          :options="chartByTime.options"
          :series="chartByTime.series"
        />
      </div>
    </div>
    <div>
      <!-- Table Detail-->
    </div>
    <div>
      <!-- Top Product-->
    </div>
  </div>
</template>

<script>
import sumBy from 'sum-by';
import groupArray from 'group-array';
import moment from 'moment';
import { getFlashSaleReport } from '@/api/shopee/seller/flashsale';
import { unixTime } from './mixin/Data';
import VueApexCharts from 'vue-apexcharts';

const groupByReport = ([time, lisReport]) => {
  return {
    time,
    total: lisReport.length,
    saleTotal: sumBy(lisReport, (item) => item.saleTotal),
    orderCount: sumBy(lisReport, (item) => item.orderCount),
    buyerCount: sumBy(lisReport, (item) => item.buyerCount),
    clickCount: sumBy(lisReport, (item) => item.clickCount),
    impressionCount: sumBy(lisReport, (item) => item.impressionCount),
  };
};

export default {
  name: 'ShopeeFlashsaleReport',
  components: {
    apexchart: VueApexCharts,
  },
  data() {
    return {
      loading: false,
      listData: [],
      groupByDate: [],
      groupByTime: [],
    };
  },
  methods: {
    async reportFlashSale() {
      this.loading = true;
      const limit = 200;
      const lisReport = (await getFlashSaleReport(limit)).map((item) => {
        const timeStart = unixTime(item.start_day);
        const timeEnd = unixTime(item.end_day);
        return {
          flashsaleId: item.flash_sale_id,
          timeStart,
          timeEnd,
          timeOnly: moment(timeStart).format('HH:mm'),
          dateOnly: moment(timeStart).format('MM-DD'),
          saleTotal: Math.floor(Number(item.sales)),
          orderCount: item.orders,
          buyerCount: item.buyers,
          clickCount: item.product_clicks,
          impressionCount: item.product_impression,
        };
      });

      this.listData = lisReport;
      this.groupByDate = Object.entries(groupArray(lisReport, 'dateOnly'))
        .map(groupByReport)
        .sort((item1, item2) => (item1.time < item2.time ? 1 : -1));

      this.groupByTime = Object.entries(groupArray(lisReport, 'timeOnly'))
        .map(groupByReport)
        .sort((item1, item2) => (item1.orderCount < item2.orderCount ? 1 : -1));

      this.loading = false;
    },
  },
  computed: {
    chartByDate() {
      return {
        options: {
          chart: {
            id: 'flashsale-chart-by-date',
          },
          xaxis: {
            categories: this.groupByDate.map((/** @type {FlashsaleReport} */ item) => item.time),
          },
        },
        series: [
          {
            name: this.$t('FLASHSALE_REPORT_ORDER_TOTAL'),
            data: this.groupByDate.map((/** @type {FlashsaleReport} */ item) => item.orderCount),
          },
        ],
      };
    },
    chartByTime() {
      return {
        options: {
          labels: this.groupByTime.map((/** @type {FlashsaleReport} */ item) => item.time),
        },
        series: this.groupByTime.map((/** @type {FlashsaleReport} */ item) => item.orderCount),
      };
    },
  },
};
</script>
