<template>
  <a-row :gutter="24">
    <a-col class="gutter-row" :span="12">
      <div class="bg-#fff b-rd-10px py-24px px-32px text-center">
        <div class="flex justify-between mb-14px">
          <div class="text-22px fw-500 text-#223354">My Client</div>
          <div class="text-14px text-#767676 flex items-center cursor-pointer">
            Details
            <i-custom-arrow_right class="w-16px h-16px" />
          </div>
        </div>
        <a-divider class="!my-0" />
        <a-table
          class="theme-table"
          :columns="columns"
          :row-key="(record) => record.id"
          :data-source="clientList"
          :pagination="false"
          :loading="clientLoading"
        >
          <template #bodyCell="{ column, value, record }">
            <template v-if="column.dataIndex === 'billNo'">
              <router-link class="c-primary underline" :to="{ path: '/product/detail', query: { id: record.id } }">{{ value }}</router-link>
            </template>
          </template>
          <template #emptyText>
            <div class="text-center py-100px">
              <img src="@/assets/images/table_empty.png" alt="" class="w-70px h-46px" />
              <div class="text-14px text-#767676">No data</div>
            </div>
          </template>
        </a-table>
      </div>
    </a-col>
    <a-col class="gutter-row" :span="12">
      <div class="bg-#fff b-rd-10px py-24px px-32px text-center">
        <div class="flex justify-between mb-14px">
          <div class="text-22px fw-500 text-#223354">Customer Order</div>
          <div class="text-14px text-#767676 flex items-center cursor-pointer">
            Details
            <i-custom-arrow_right class="w-16px h-16px" />
          </div>
        </div>
        <a-divider class="!my-0" />
        <a-table
          class="theme-table"
          :columns="columns"
          :row-key="(record) => record.id"
          :data-source="orderList"
          :pagination="false"
          :loading="orderLoading"
        >
          <template #bodyCell="{ column, value, record }">
            <template v-if="column.dataIndex === 'billNo'">
              <router-link class="c-primary underline" :to="{ path: '/product/detail', query: { id: record.id } }">{{ value }}</router-link>
            </template>
          </template>
          <template #emptyText>
            <div class="text-center py-100px">
              <img src="@/assets/images/table_empty.png" alt="" class="w-70px h-46px" />
              <div class="text-14px text-#767676">No data</div>
            </div>
          </template>
        </a-table>
      </div>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { columns, useGetData } from '../useGetData'
const { clientList, orderList, clientLoading, orderLoading } = useGetData()
</script>
<style scoped lang="less">
.theme-table {
  :deep(.ant-table-cell) {
    background-color: #fff;
  }
}
</style>
