<template>
  <div class="table-page">
    <typo-text variant="title-bold">Table Component</typo-text>
    <hr class="my-3" />
    <div class="pt-1">
      <typo-text variant="body-1-bold" class="mb-2"> Table </typo-text>
      <base-table>
        <template v-slot:thead>
          <th>
            <form-checkbox
              value="all"
              v-model="dataCheckbox"
              size="small"
            />
          </th>
          <th>Judul Kolom</th>
          <th align="right">Jumlah</th>
          <th>
            <div>
              Judul Kolom
              <base-icon
                :iconName="`switch_${sortJudul ? 'up' : 'down'}`"
                @click="sortJudul = !sortJudul"
              />
            </div>
          </th>
          <th align="right">
            <div>
              Jumlah Pajak
              <base-icon
                :iconName="`switch_${sortJumlah ? 'up' : 'down'}`"
                @click="sortJumlah = !sortJumlah"
              />
            </div>
          </th>
          <th>Status</th>
          <th></th>
        </template>
        <template v-slot:tbody>
          <tr
            v-for="(item, index) in tableList"
            :key="index"
            :class="{ selected: item.checkbox }"
          >
            <td>
              <form-checkbox
                :value="`data${index}`"
                v-model="item.checkbox"
                size="small"
              />
            </td>
            <td>{{ item.columnTitle }}</td>
            <td align="right">{{ item.total }}</td>
            <td>{{ item.columnTitleSort }}</td>
            <td align="right">{{ item.totalTax }}</td>
            <td>
              <typo-text
                variant="body-2-bold"
                :class="`tstatus tstatus-${item.statusColor}`"
              >
                {{ item.status }}
              </typo-text>
            </td>
            <td align="center">
              <base-button v-if="item.action == 'button'" variant="secondary">
                Default
              </base-button>
              <base-icon
                v-if="item.action == 'elipsis'"
                iconName="more_horiz"
              />
              <div v-if="item.action == 'editDelete'">
                <base-icon iconName="edit" class="mr-2" />
                <base-icon iconName="delete" />
              </div>
            </td>
          </tr>
        </template>
      </base-table>
      <pre>
{{
`<base-table>
  <template v-slot:thead>
    <th>
      <form-checkbox :value="dataCheckbox" v-model="dataCheckbox" size="small" />
    </th>
    <th>Judul Kolom</th>
    <th align="right">Jumlah</th>
    <th>
      // use div to wrap sort
      <div>
        Judul Kolom
        // HANLDE SWITCH WITH: sort ? 'up' : 'down'
        <base-icon iconName="switch_up" @click="sortJudul = !sortJudul" />
      </div>
    </th>
    <th align="right">
      // use div to wrap sort
      <div>
        Jumlah Pajak
        // HANLDE SWITCH WITH: sort ? 'up' : 'down'
        <base-icon iconName="switch_down" @click="sortJumlah = !sortJumlah" />
      </div>
    </th>
    <th>Status</th>
    <th></th>
  </template>
  <template v-slot:tbody>
    <tr v-for="(item, index) in tableList" :key="index" :class="{ selected: item.checkbox }">
      <td>
        <form-checkbox :value="item.checkbox" v-model="item.checkbox" size="small" />
      </td>
      <td>item.columnTitle</td>
      <td align="right">item.total</td>
      <td>item.columnTitleSort</td>
      <td align="right">item.totalTax</td>
      <td>
        // COLOR STATUS AVAILABLE: grey, yellow, blue, red, green
        <typo-text variant="body-2-bold" class="tstatus tstatus-red">
          item.status
        </typo-text>
      </td>
      <td align="center">
        <div>
          <base-icon iconName="edit" class="mr-2" />
          <base-icon iconName="delete" />
        </div>
      </td>
    </tr>
  </template>
</base-table>`
}}
      </pre>
    </div>
    <div class="pt-1">
      <typo-text variant="body-1-bold" class="mb-2"> Pagination </typo-text>
      <div class="wrap-content">
        <table-pagination
          :totalPages="totalPages"
          :pageNumber="pageNumber"
          :limitPage="limitPage"
          :totalData="totalData"
          :pageSize="pageSize"
          :listPagesize="listPagesize"
          @clickPage="clickPage"
          @changeSize="changeSize"
        />
        <pre>
{{
`<table-pagination
  :totalPages="10"
  :pageNumber="1"
  :limitPage="5"
  :totalData="120"
  :pageSize="10"
  :listPagesize="listPagesize"
  @clickPage="clickPage"
  @changeSize="changeSize"
/>

// paginationSize & paginationInfo default is true

listPagesize: [
  { id: 1, label: 10, value: 10 },
  { id: 2, label: 20, value: 20 },
  { id: 3, label: 30, value: 30 },
  { id: 4, label: 40, value: 40 },
  { id: 5, label: 50, value: 50 },
  { id: 6, label: 100, value: 100 },
]`
}}
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";
import TypoText from "@/components/Typography/TypoText";
import BaseButton from "@/components/Base/BaseButton";
import FormCheckbox from "@/components/Form/FormCheckbox";
import BaseTable from "@/components/Base/BaseTable";
import TablePagination from "@/components/Table/TablePagination";

export default {
  components: {
    BaseIcon,
    TypoText,
    BaseButton,
    FormCheckbox,
    BaseTable,
    TablePagination,
  },
  data() {
    return {
      dataCheckbox: false,
      sortJudul: false,
      sortJumlah: false,
      totalPages: 10,
      pageNumber: 1,
      limitPage: 5,
      totalData: 120,
      pageSize: 10,
      tableList: [
        {
          checkbox: false,
          columnTitle: "Lorem ipsum",
          total: "Rp4.000.000.000",
          columnTitleSort: "Lorem ipsum",
          totalTax: "Rp1.000.000.000",
          status: "Draft",
          action: "button",
          statusColor: "grey",
        },
        {
          checkbox: false,
          columnTitle: "Lorem ipsum",
          total: "Rp4.000.000.000",
          columnTitleSort: "Lorem ipsum",
          totalTax: "Rp1.000.000.000",
          status: "Menunggu Pembayaran",
          action: "elipsis",
          statusColor: "yellow",
        },
        {
          checkbox: false,
          columnTitle: "Lorem ipsum",
          total: "Rp4.000.000.000",
          columnTitleSort: "Lorem ipsum",
          totalTax: "Rp1.000.000.000",
          status: "Posting Berhasil",
          action: "editDelete",
          statusColor: "blue",
        },
        {
          checkbox: false,
          columnTitle: "Lorem ipsum",
          total: "Rp4.000.000.000",
          columnTitleSort: "Lorem ipsum",
          totalTax: "Rp1.000.000.000",
          status: "Upload Gagal",
          action: "elipsis",
          statusColor: "red",
        },
        {
          checkbox: false,
          columnTitle: "Lorem ipsum",
          total: "Rp4.000.000.000",
          columnTitleSort: "Lorem ipsum",
          totalTax: "Rp1.000.000.000",
          status: "Upload Berhasil",
          action: "editDelete",
          statusColor: "green",
        },
      ],
      listPagesize: [
        { id: 1, label: 10, value: 10 },
        { id: 2, label: 20, value: 20 },
        { id: 3, label: 30, value: 30 },
        { id: 4, label: 40, value: 40 },
        { id: 5, label: 50, value: 50 },
        { id: 6, label: 100, value: 100 },
        { id: 7, label: "Semua", value: 0 },
      ]
    };
  },
  methods: {
    clickPage(page) {
      this.pageNumber = page;
    },
    changeSize(size) {
      this.pageSize = size;
    },
  },
};
</script>

<style lang="scss" scoped>
@use "@/assets/style/_color.scss" as *;

.table-page {
  .wrap-content {
    background: $neutral-1;
    padding: 32px 37px;
  }
}
</style>
