<template>
  <section class="AiTable">
    <u-table color="#333">
      <u-tr>
        <u-th v-for="(col,i) in colConfigs" :key="i" :width="col.width">{{ col.label }}</u-th>
      </u-tr>
      <u-tr v-for="(row,j) in data" :key="j">
        <u-td v-for="(col,i) in colConfigs" :key="i" :width="col.width">
          <slot v-if="col.slot" :name="col.slot"/>
          <p v-else-if="col.dict">{{ $dict.getLabel(col.dict, row[col.prop]) }}</p>
          <p v-else>{{ row[col.prop] || "-" }}</p>
        </u-td>
      </u-tr>
    </u-table>
  </section>
</template>

<script>

export default {
  name: "AiTable",
  props: {
    data: {default: () => []},
    colConfigs: {default: () => []},
  }
}
</script>

<style lang="scss" scoped>
.AiTable {
  border-radius: 8px;
  min-height: 100px;
  overflow: hidden;

  .u-table, .u-th {
    border-color: #D0D4DC !important;
  }

  .u-th {
    background-color: #DFE6F4;
    color: #646D7F;
  }

  .u-tr {
    height: 80px;
  }
}
</style>
