<script setup lang="ts">
const props = defineProps<{
  hideHead: boolean
  columns: anyObj[]
  tableData: anyObj[]
}>()

const emit = defineEmits(['update:modelValue', 'handleChange'])
</script>
<template>
  <table class="table">
    <thead>
      <tr class="table-head" :style="{ display: hideHead ? 'none' : 'table-row' }">
        <th v-for="(item, index) in columns" :key="index">
          {{ item.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(i, index) in tableData" :key="index" class="table-row">
        <td v-for="(c, index) in columns" :key="index">
          <div v-if="c.prop === 'value'" class="content">
            <!-- <img
                        v-if="i.abbr"
                        class="img-Speech"
                        :src="`${OSS_URL}/icon/part_${i.abbr[i.abbr.length - 1] === '.' ? i.abbr.slice(0, i.abbr.length - 1) : i.abbr}.svg`"
                        alt=""
                    /> -->
            <AbbrImg height="50" :abbr="i.abbr"></AbbrImg>

            {{ i[c.prop] }}
          </div>
          <span v-else>
            {{ i[c.prop] }}
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<style scoped lang="scss">
* {
  box-sizing: content-box !important;
}
.table {
  font-size: 1.17vh;
  line-height: 1.1;
  width: 100%;
  color: #6a3906;
  &-head {
    background: transparent;
    border-radius: 0.67vh;
    th {
      width: 100px;
      font-weight: 400;
      text-align: left;
      padding: 0.83vh 16px;
      &:first-child {
        border-radius: 0.67vh 0 0 0.67vh;
      }
      &:last-child {
        border-radius: 0 0.67vh 0.67vh 0;
      }
    }
  }

  &-row {
    &:last-child {
      td {
        border-bottom: none;
      }
    }
    td {
      height: 4.67vh;
      padding: 0.83vh 16px;
      box-sizing: border-box;
      border-bottom: 0.08vh solid #d9d163;
      border-right: 0.08vh solid #d9d163;
      &:last-child {
        border-right: none;
      }
      .content {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
// .img-Speech {
//     width: auto;
//     height: 50px;
//     margin-right: 4px;
// }
</style>
