<template>
  <template v-if="componentType === 'form'">
    <a-row :style="borderColorStyle">
      <a-col :span="3" :style="borderColorStyle">
        {{ item?.label }}
      </a-col>
      <a-col :span="21" :style="borderColorStyle">
        <a-table
          :dataSource="item?.value"
          :columns="item?.columns"
          :pagination="false"
          tableLayout="fixed"
          v-if="item?.value.length"
        />
      </a-col>
    </a-row>
  </template>
  <table
    :cellpadding="10"
    :cellspacing="10"
    v-else-if="item?.type === 'tab' || item?.type === 'card'"
  >
    <template v-if="Object.keys(item?.value)">
      <thead>
        <tr>
          <th
            :style="borderColorStyle"
            v-for="(title, index) in Object.keys(item?.value)"
            :key="index"
          >
            {{ title }}
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(value, index) in item?.value" :key="index">
          <tr v-if="!!value.length">
            <td :style="borderColorStyle" :colspan="Object.keys(item?.value).length">
              <template v-for="(info, idx) in Object.values(value)" :key="idx">
                <TableStyle :item="info" :componentType="info.type" />
              </template>
            </td>
          </tr>
        </template>
      </tbody>
    </template>
  </table>

  <table :cellpadding="0" :cellspacing="0" :border="0" v-else-if="item?.type === 'grid'">
    <thead> </thead>
    <tbody>
      <tr v-for="it in maxCol" :key="it" class="grid-tr">
        <template v-for="(value, index) in item?.value" :key="index">
          <template v-for="(info, idx) in value" :key="idx">
            <td v-if="idx == it - 1" style="height: 40px; border: 0">
              <TableStyle :item="info" :componentType="info.type" style="height: 100%" />
            </td>
          </template>
        </template>
      </tr>
    </tbody>
  </table>

  <div class="grid-box" v-else-if="item?.type === 'table-layout'">
    <div v-for="(child, index) in Object.values(item.value)" :key="index" class="w-full flex">
      <template v-for="(ch, idx) in child" :key="idx">
        <div :style="tableLayoutWidth(child.length)" class="flex flex-col">
          <TableStyle
            :item="com"
            :componentType="com.type"
            v-for="(com, i) in ch"
            :key="i"
            class="flex-1"
          />
        </div>
      </template>
    </div>
  </div>
  <div
    v-else-if="noBorderComponent.includes(item?.type)"
    :style="item?.type === 'title' ? underlineStyle : ''"
    class="noborder-box"
  >
    <a-divider
      v-if="item?.type === 'divider'"
      :orientation="item?.componentProps?.orientation"
      :style="item?.componentProps?.style"
    >
      {{ item?.label }}
    </a-divider>
    <h2
      v-else-if="item?.type === 'title'"
      :align="item.componentProps.align"
      :style="{
        fontWeight: 'bold',
        fontSize: item.componentProps.fontSize + 'px',
        color: item.componentProps.color,
        ...item.componentProps.style,
      }"
    >
      {{ item?.label }}
    </h2>
  </div>
  <template v-else-if="!!componentType">
    <a-row :style="borderColorStyle">
      <a-col :span="5" :style="borderColorStyle">
        {{ item?.label }}
      </a-col>
      <a-col :span="19">
        <span>{{ item?.value }}</span>
      </a-col>
    </a-row>
  </template>
</template>
<script lang="ts" setup>
  import { inject, StyleValue, Ref, onMounted, ref } from 'vue';

  const props = defineProps({
    item: Object,
    componentType: String,
  });

  let maxCol = ref(0);
  onMounted(() => {
    if (props.item?.type == 'grid') {
      for (let obj in props.item?.value) {
        let o = props.item?.value[obj];
        if (o.length > maxCol.value) maxCol.value = o.length;
      }
    }
  });
  const borderColorStyle = inject<Ref<StyleValue>>('borderColorStyle')!;
  const underlineStyle = inject<Ref<StyleValue>>('underlineStyle')!;
  const noBorderComponent = ['title', 'divider'];

  const tableLayoutWidth = (span) => {
    return { width: (1 / span) * 100 + '%' };
  };
</script>
<style lang="less" scoped>
  table {
    width: 100%;

    thead {
      text-align: left;
    }

    td,
    th {
      border: 1px solid;
    }
  }

  :deep(.ant-table) {
    border-right: 1px solid #000;
  }

  :deep(.ant-table-thead) tr th {
    border: 1px solid;
    background: #fff;
  }

  :deep(.ant-table-tbody) tr td {
    border: 1px solid;
    border-bottom: 1px solid #000;
  }

  .noborder-box {
    width: 100%;
    padding: 10px;
  }

  .grid-box {
    display: flex;
    border: 1px solid;
    width: 100%;
    flex-wrap: wrap;

    .ant-row {
      border: 0 !important;
    }

    .ant-row:not(:last-child) {
      border-bottom: 1px solid !important;
    }
  }

  .grid-tr {
    td {
      + td {
        & > div.ant-row {
          border-left: 0 !important;
        }
      }
    }

    + .grid-tr {
      td {
        & > div {
          border-top: 0 !important;
        }
      }
    }
  }
</style>
