<template>
  <Loader :loading="loading">
    <div class="card">
      <div class="card-body">
        <div class="clearfix">
          <div class="float-end">
            <div class="input-group input-group-sm">
              <select
                class="form-select form-select-sm"
                @change="onChange($event)"
              >
                <option value="january" selected>Jan</option>
                <option value="december">Dec</option>
                <option value="november">Nov</option>
                <option value="october">Oct</option>
              </select>
              <label class="input-group-text">Month</label>
            </div>
          </div>
          <h4 class="card-title mb-4">Top Selling product</h4>
        </div>
        <div v-for="(data, index) of products" :key="index">
          <div class="text-muted text-center">
            <p class="mb-2">{{ data.title }}</p>
            <h4>{{ data.amount }}</h4>
            <p class="mt-4 mb-0">
              <span class="badge badge-soft-success font-size-11 me-2">
                {{ data.revenue }}%
                <i><Icon icon="mdi:arrow-up"/></i>
              </span>
              From previous period
            </p>
          </div>

          <div class="table-responsive mt-4">
            <table class="table align-middle mb-0">
              <tbody>
                <tr v-for="(item, index) of data.list" :key="index">
                  <td>
                    <h5 class="font-size-14 mb-1">
                      {{ item.name }}
                    </h5>
                    <p class="text-muted mb-0">
                      {{ item.text }}
                    </p>
                  </td>
                  <td>
                    <!-- <vue-apex-charts
                      :options="chartOptions"
                      :series="[100, item.sales]"
                      height="80"
                      width="85"
                    >
                    </vue-apex-charts> -->

                    <apexchart
                      :options="chartOptions"
                      :series="[100, item.sales]"
                      height="80"
                      width="85"
                    >
                    </apexchart>
                  </td>
                  <td>
                    <p class="text-muted mb-1">Sales</p>
                    <h5 class="mb-0">{{ item.sales }} %</h5>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </Loader>
</template>


<script>
// import VueApexCharts from 'vue-apexcharts';
import VueApexCharts from 'vue3-apexcharts';
import { Icon } from '@iconify/vue';
import Loader from '../../components/Loader/loader.vue';

export default {
  components: {
    VueApexCharts,
    Loader,
    apexchart: VueApexCharts,
    Icon
  },
  data() {
    return {
      products: [
        {
          title: 'Product A',
          amount: '$ 6385',
          revenue: '0.6',
          list: [
            {
              name: 'Product A',
              text: 'Neque quis est',
              sales: 37,
            },
            {
              name: 'Product B',
              text: 'Quis autem iure',
              sales: 72,
            },
            {
              name: 'Product C',
              text: 'Sed aliquam mauris.',
              sales: 54,
            },
          ],
        },
      ],
      loading: true,
      chartOptions: {
        chart: {
          type: 'donut',
        },
        dataLabels: {
          enabled: false,
        },
        tooltip: {
          enabled: false,
        },
        legend: {
          show: false,
        },
        plotOptions: {
          pie: {
            donut: {
              labels: {
                show: false,
              },
              size: '65%',
            },
          },
        },
        responsive: [
          {
            breakpoint: 480,
            options: {
              chart: {
                width: 100,
              },
            },
          },
        ],
        colors: ['#556ee6', '#f8f9fa'],
      },
      series11: [100, 37],
    };
  },
  mounted() {
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  },
  methods: {
    onChange(event) {
      // let value = event.target.value;
      // axios.get("http://localhost:3000/"+ value).then((response) => {
      //   // here assign api response to this.products
      //   this.products = response;
      // });
      if (event.target.value === 'december') {
        this.products = [
          {
            title: 'Product B',
            amount: '$ 7842',
            revenue: '0.4',
            list: [
              {
                name: 'Product D',
                text: 'Neque quis est',
                sales: 41,
              },
              {
                name: 'Product E',
                text: 'Quis autem iure',
                sales: 14,
              },
              {
                name: 'Product F',
                text: 'Sed aliquam mauris.',
                sales: 85,
              },
            ],
          },
        ];
      } else if (event.target.value === 'january') {
        this.products = [
          {
            title: 'Product A',
            amount: '$ 6385',
            revenue: '0.6',
            list: [
              {
                name: 'Product A',
                text: 'Neque quis est',
                sales: 37,
              },
              {
                name: 'Product B',
                text: 'Quis autem iure',
                sales: 72,
              },
              {
                name: 'Product C',
                text: 'Sed aliquam mauris.',
                sales: 54,
              },
            ],
          },
        ];
      } else if (event.target.value === 'november') {
        this.products = [
          {
            title: 'Product C',
            amount: '$ 4745',
            revenue: '0.8',
            list: [
              {
                name: 'Product G',
                text: 'Neque quis est',
                sales: 37,
              },
              {
                name: 'Product H',
                text: 'Quis autem iure',
                sales: 42,
              },
              {
                name: 'Product I',
                text: 'Sed aliquam mauris.',
                sales: 63,
              },
            ],
          },
        ];
      } else if (event.target.value === 'october') {
        this.products = [
          {
            title: 'Product D',
            amount: '$ 8745',
            revenue: '0.4',
            list: [
              {
                name: 'Product J',
                text: 'Neque quis est',
                sales: 41,
              },
              {
                name: 'Product K',
                text: 'Quis autem iure',
                sales: 74,
              },
              {
                name: 'Product L',
                text: 'Sed aliquam mauris.',
                sales: 52,
              },
            ],
          },
        ];
      }
    },
  },
};
</script>