<template>
  <div class="columns mx-0">
    <div class="column is-narrow px-0 mx-0">
      <div style="width: 200px">
        <div class="py-1" v-for="v in array">
          <a
            :class="(current ? current.code === v.code : false) ? 'has-text-primary has-text-weight-bold' : ''"
            @click="changeTab(v)"
            >{{ v.name }}</a
          >
        </div>
      </div>
    </div>
    <div class="column">
      <div class="fsb-20 mb-3" v-if="current">{{ current.name }}</div>
      <DataView v-bind="current.vbind" v-if="current && current.typeView === 'table'"></DataView>
      <component v-if="current && current.typeView === 'component'" :is="current.component" v-bind="current.vbind" />
    </div>
  </div>
</template>
<script setup>
var array = [
  {
    code: "transactionphase",
    name: "Giai đoạn giao dịch",
    typeView: "table",
    vbind: {
      api: "transactionphase",
      setting: "transaction-phase",
      pagename: "pagedata99",
      timeopt: 36000,
      modal: {
        component: "parameter/TransactionPhase",
        title: "Transaction phase",
        height: "400px",
        vbind: { api: "transactionphase" },
      },
    },
  },
  {
    code: "cart",
    name: "Danh sách giỏ hàng",
    typeView: "table",
    vbind: {
      api: "cart",
      setting: "parameter-fields-cart",
      pagename: "parameter-fields-cart",
      timeopt: 36000,
      modal: {
        component: "parameter/CodeName",
        title: "Giỏ hàng",
        height: "400px",
        vbind: { api: "cart" },
      },
    },
  },
  {
    code: "documenttype",
    name: "Loại tài liệu",
    typeView: "table",
    vbind: {
      api: "documenttype",
      setting: "parameter-fields",
      pagename: "pagedata99",
      timeopt: 36000,
      modal: {
        component: "parameter/CodeName",
        title: "Document type",
        height: "400px",
        vbind: { api: "documenttype" },
      },
    },
  },
  {
    code: "discounttype",
    name: "Danh sách chiết khấu",
    typeView: "table",
    vbind: {
      api: "discounttype",
      setting: "parameter-discount",
      pagename: "tableDiscountType",
      timeopt: 36000,
      modal: {
        component: "parameter/DiscountType",
        title: "Thông tin chiết khấu",
        height: "400px",
        vbind: { api: "discounttype" },
      },
    },
  },
  {
    code: "gifttype",
    name: "Danh sách quà tặng",
    typeView: "table",
    vbind: {
      api: "gift",
      setting: "parameter-gift",
      pagename: "tableDiscountType",
      timeopt: 36000,
      modal: {
        component: "parameter/GiftType",
        title: "Thông tin quà tặng",
        height: "400px",
        vbind: { api: "gift" },
      },
    },
  },
  {
    code: "DuePayables",
    name: "Lịch công nợ đến hạn",
    typeView: "table",
    vbind: {
      api: "bizsetting",
      params: {
        filter: {
          category: "system",
          classify: "duepayables",
        },
      },
      setting: "parameter-payable-schedule",
      pagename: "tablePayableSchedule",
      timeopt: 36000,
      modal: {
        component: "parameter/DuePayables",
        title: "Thông tin lịch công nợ đến hạn",
        height: "400px",
        vbind: { api: "bizsetting" },
      },
    },
  },
  {
    code: "OverduePayables",
    name: "Lịch công nợ quá hạn",
    typeView: "table",
    vbind: {
      api: "bizsetting",
      params: {
        filter: {
          category: "system",
          classify: "overduepayables",
        },
      },
      setting: "parameter-overdue-payables",
      pagename: "tableOverduePayables",
      timeopt: 36000,
      modal: {
        component: "parameter/OverduePayables",
        title: "Thông tin lịch công nợ quá hạn",
        height: "400px",
        vbind: { api: "bizsetting" },
      },
    },
  },
  // {
  //   code: "allocationRules",
  //   name: "Quy tắc phân bổ",
  //   typeView: "component",
  //   component: defineAsyncComponent(() => import("@/components/parameter/AllocationRules.vue")),
  //   vbind: {
  //     api: "common",
  //     setting: "parameter-gift",
  //     pagename: "tableDiscountType",
  //     timeopt: 36000,
  //     modal: {
  //       component: "parameter/AllocationRules",
  //       title: "Thông tin quà tặng",
  //       height: "400px",
  //       vbind: { api: "gift" },
  //     },
  //   },
  // },
];
var current = ref(array[0]);
function changeTab(v) {
  current.value = null;
  setTimeout(() => (current.value = v));
}
</script>
