<template>
  <div>
    <vue-good-table
      :columns="columns"
      styleClass=" vgt-table  lesspadding2 centered "
      :rows="advancedTable"
      :pagination-options="{
        enabled: true,
        perPage: perpage,
      }"
      :sort-options="{
        enabled: false,
      }"
      :select-options="{
        enabled: true,
        selectOnCheckboxOnly: true, // only select when checkbox is clicked instead of the row
        selectioninfoClass: 'custom-class',
        selectionText: 'rows selected',
        clearSelectionText: 'clear',
        disableSelectinfo: true, // disable the select info-500 panel on top
        selectAllByGroup: true, // when used in combination with a grouped table, add a checkbox in the header row to check/uncheck the entire group
      }"
    >
      <template v-slot:table-row="props">
        <span v-if="props.column.field == 'customer'" class="flex items-center">
          <span class="w-7 h-7 rounded-full ltr:mr-3 rtl:ml-3 flex-none">
            <img
              :src="props.row.customer.image"
              :alt="props.row.customer.name"
              class="object-cover w-full h-full rounded-full"
            />
          </span>
          <span
            class="text-sm text-slate-600 dark:text-slate-300 capitalize font-normal"
            >{{ props.row.customer.name }}</span
          >
        </span>
        <span v-if="props.column.field == 'order'" class="font-medium">
          {{ "#" + props.row.order }}
        </span>
        <span
          v-if="props.column.field == 'date'"
          class="text-slate-500 dark:text-slate-400"
        >
          {{ props.row.date }}
        </span>
        <span v-if="props.column.field == 'status'" class="block w-full">
          <span
            class="inline-block px-3 min-w-[90px] text-center mx-auto py-1 rounded-[999px] bg-opacity-25"
            :class="`${
              props.row.status === 'paid'
                ? 'text-success-500 bg-success-500'
                : ''
            } 
            ${
              props.row.status === 'due'
                ? 'text-warning-500 bg-warning-500'
                : ''
            }
            ${
              props.row.status === 'cancled'
                ? 'text-danger-500 bg-danger-500'
                : ''
            }
            
             `"
          >
            {{ props.row.status }}
          </span>
        </span>
        <span v-if="props.column.field == 'action'">
          <div class="flex space-x-3 justify-center rtl:space-x-reverse">
            <Tooltip placement="top" arrow theme="dark">
              <template #button>
                <div class="action-btn">
                  <Icon icon="heroicons:eye" />
                </div>
              </template>
              <span> View</span>
            </Tooltip>
            <Tooltip placement="top" arrow theme="dark">
              <template #button>
                <div class="action-btn">
                  <Icon icon="heroicons:pencil-square" />
                </div>
              </template>
              <span> Edit</span>
            </Tooltip>
            <Tooltip placement="top" arrow theme="danger-500">
              <template #button>
                <div class="action-btn">
                  <Icon icon="heroicons:trash" />
                </div>
              </template>
              <span>Delete</span>
            </Tooltip>
          </div>
        </span>
      </template>
      <template #pagination-bottom="props">
        <div class="py-4 px-3 flex justify-center">
          <Pagination
            :total="50"
            :current="current"
            :per-page="perpage"
            :pageRange="pageRange"
            @page-changed="current = $event"
            :pageChanged="props.pageChanged"
            :perPageChanged="props.perPageChanged"
          >
            >
          </Pagination>
        </div>
      </template>
    </vue-good-table>
  </div>
</template>
<script>
import Icon from "@/components/Icon";
import Tooltip from "@/components/Tooltip";
import Pagination from "@/components/Pagination";
import { advancedTable } from "../../../constant/basic-tablle-data";
export default {
  components: {
    Pagination,
    Icon,
    Tooltip,
  },

  data() {
    return {
      advancedTable,
      current: 1,
      perpage: 10,
      pageRange: 5,
      searchTerm: "",

      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "5",
          label: "5",
        },
      ],
      columns: [
        {
          label: "Id",
          field: "id",
        },
        {
          label: "Order",
          field: "order",
        },
        {
          label: "Customer",
          field: "customer",
        },
        {
          label: "Date",
          field: "date",
        },

        {
          label: "Quantity",
          field: "quantity",
        },

        {
          label: "Amount",
          field: "amount",
        },

        {
          label: "Status",
          field: "status",
        },
        {
          label: "Action",
          field: "action",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.action-btn {
  @apply h-6 w-6 flex flex-col items-center justify-center border border-slate-200 dark:border-slate-700 rounded;
}
</style>
