<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' },
      },
    },
  },
];
var current = ref(array[0]);
function changeTab(v) {
  current.value = null;
  setTimeout(() => (current.value = v));
}
</script>
