<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'

const fields1 = ref([
  { key: 'currency', label: 'Currency', formatter: 'currency', class: 'text-right' },
  { key: 'currencyOptions', label: 'Currency Rounded', formatter: 'currency|1|0|0', class: 'text-right' },
  { key: 'number', label: 'Number', formatter: 'number', class: 'text-right' },
  { key: 'numberOptions', label: 'Number Rounded', formatter: 'number|1|3|3', class: 'text-right' },
  { key: 'percent', label: 'Percent', formatter: 'percent', class: 'text-right' },
  { key: 'percentOptions', label: 'Percent to 3 Decimals', formatter: 'percent|1|3|3', class: 'text-right' },
])
const items1 = ref([
  { currency: 123456.78, currencyOptions: 123456.78, number: 123456.3456789, numberOptions: 123456.3456789, percent: 0.2323, percentOptions: 0.2323 },
  { currency: 123456.78, currencyOptions: 123456.23, number: 654320.987654321, numberOptions: 654320.987654321, percent: 0.00333, percentOptions: 0.00333 }
])

const fields2 = ref([
  { key: 'date', label: 'Date', formatter: 'date', class: 'text-center', sortable: true },
  { key: 'stringDate', label: 'String Date', formatter: 'date|YYYY-MM-DD', sortByFormatted: true, class: 'text-center', sortable: true },
  { key: 'dateTime', label: 'DateTime', formatter: 'dateTime', class: 'text-center', sortable: true },
  { key: 'stringDateTime', label: 'String DateTime', formatter: 'dateTime', class: 'text-center', sortable: true },
  { key: 'phone', label: 'Phone', formatter: 'phone', class: 'text-center whitespace-nowrap' },
  { key: 'phone2', label: 'Phone 2', formatter: 'phone', class: 'text-center whitespace-nowrap' },
])
const items2 = ref([
  { date: '2022-01-17', stringDate: '01/21/2023', dateTime: '2022-02-23', stringDateTime: '2022-02-23 15:30', phone: 3193353500, phone2: '319-335-3500' },
  { date: '2021-02-17', stringDate: '02/17/2022', dateTime: '2021-02-23', stringDateTime: '2021-02-23 15:30', phone: 13193353500, phone2: 3353500 }
])

const fields3 = ref([
  { key: 'stringCurrency', label: 'with \'sortFormatter\'', sortFormatter: 'parseCurrency', class: 'text-right', sortable: true },
  { key: 'stringCurrency2', label: 'without \'sortFormatter\'', class: 'text-right', sortable: true },
  { key: 'stringDate', label: 'with \'sortFormatter\'', sortFormatter: 'date|YYYY-MM-DD', class: 'text-center', sortable: true },
  { key: 'stringDate2', label: 'without \'sortFormatter\'', class: 'text-center', sortable: true },
])
const items3 = ref([
  { stringCurrency: '$123,456', stringCurrency2: '$123,456', stringDate: '11/21/2022', stringDate2: '11/21/2022' },
  { stringCurrency: '$77,456', stringCurrency2: '$77,456', stringDate: '01/21/2023', stringDate2: '01/21/2023' }
])
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex flex-col gap-0">
      <div class="font-bold">Example 1 - currency, number, and percent</div>
      <AisTable bordered :items="items1" :fields="fields1"></AisTable>
    </div>
    <div class="flex flex-col gap-0">
      <div class="font-bold">Example 2 - date, dateTime, and phone</div>
      <AisTable bordered :items="items2" :fields="fields2"></AisTable>
    </div>
    <div class="flex flex-col gap-0">
      <div class="font-bold">Example 3 - sortFormatter (sort these fields to see the difference in behavior) </div>
      <AisTable bordered :items="items3" :fields="fields3"></AisTable>
    </div>
  </div>
</template>


