<template>
  <div class="techy-vertical-table">
    <div v-for="(row, index) in tableProps" :key="'row' + index" class="trow">
      <span class="thead">{{ row.label }}</span>
      <span v-for="(item, idx) in dataList" :key="'item_' + index + idx" class="tbody">
        <template v-if="!row.subcomponent">
          {{ item[row.prop] }}
        </template>
        <template v-else>
          <component :is="row.subcomponent" :inject-data="item" />
        </template>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TechyVerticalTable',
  props: {
    tableProps: {
      type: Array,
      default: () => []
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dataListT: []
    }
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.techy-vertical-table {
  /* height: calc(100% - 2.5vh); */
  overflow: auto;
  color: white;
}

.trow {
  width: 100%;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 1px;
}

.thead,
.tbody {
  /* min-width: calc(100vw / 1920 * 96); */
  background-color: #20376080;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 1px;
  text-align: left;
  padding-left: calc(12px * var(--beilv));
  padding-right: calc(12px * var(--beilv));
  font-weight: 400;
  flex: 0 1 calc(100vw / 1920 * 96);
  text-overflow: ellipsis;
}

.thead {
  width: 25%;
  font-size: calc(14px * var(--beilv));
  line-height: 1.8;
}

.tbody {
  width: 24%;
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(12px * var(--beilv));
  line-height: 2;
}

.tbody:last-child {
  margin-right: 0;
}

.techy-vertical-table .tbody:nth-of-type(even) {
  background-color: #0e203e80 !important;
}
</style>
