<template>
  <div class="custom-table">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr v-for="index in rowCount" :key="index">
        <td class="text-width-color">{{ columns[index*3-3].label }}</td>
        <td width="25%">{{ columns[index*3-3] !== undefined ? (columns[index*3-3].format ? columns[index*3-3].format(tableData[columns[index*3-3].prop]) : tableData[columns[index*3-3].prop]) : '' }}</td>
        <td class="text-width-color">{{ columns[index*3-2] !== undefined ? columns[index*3-2].label : '' }}</td>
        <td width="25%">{{ columns[index*3-2] !== undefined ? (columns[index*3-2].format ? columns[index*3-2].format(tableData[columns[index*3-2].prop]) : tableData[columns[index*3-2].prop]) : '' }}</td>
        <td class="text-width-color">{{ columns[index*3-1] !== undefined ? columns[index*3-1].label : '' }}</td>
        <td width="25%">{{ columns[index*3-1] !== undefined ? (columns[index*3-1].format ? columns[index*3-1].format(tableData[columns[index*3-1].prop]) : tableData[columns[index*3-1].prop]) : '' }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'verticalTable',
  props: {
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    tableData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {
    rowCount () {
      return Math.ceil(this.columns.length / 3)
    }
  }
}
</script>

<style scoped lang="scss">
  .custom-table{
    text-align: center;
    font-size: 14px;
    color: #5c6682;
    table {
      td {
        height: 41px;
        border-bottom: 1px solid #dfe6ec;
        border-right: 1px solid #dfe6ec;
      }
      border: 0.5px solid #dfe6ec;
    }
  }

  .text-width-color {
    width: 130px;
    font-weight: bold;
    background-color: #D2E1FF;
  }
</style>
