<template>
  <view class="table-view">
    <view class="table-view-ths table-view-item">
      <view v-for="column in columns" :key="column.key">{{ column.title }}</view>
    </view>

    <view v-for="(item, index) in data" :key="index" class="table-view-item table-view-tds">
      <view v-for="column in columns" :key="column.key">{{ item[column.key] }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">

const props = defineProps<{
  columns: Record<string, any>[];
  data: Record<string, any>[];
}>();

</script>

<style scoped lang="scss">
.table-view {
  border-radius: 20rpx;
  font-size: 26rpx;
  font-style: normal;
  line-height: normal;
  overflow: hidden;

  &-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 2rpx solid #d9e1f2;
    &:last-child{
      border-bottom: none;
    }

    &.table-view-ths {
      background-color: #ebf2ff;
      color: #333;
      font-size: 26rpx;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }

    &.table-view-tds {
      background-color: #F7FAFF;
      &:nth-child(odd) {
        background-color: #ebf2ff;
      }
    }

    & > view {
      width: 33.33%;
      text-align: center;
      border-right: 2rpx solid #d9e1f2;
      padding: 20rpx 0;

      &:first-child {
        width: 230rpx;
        text-align: left;
        box-sizing: border-box;
        padding-left: 37rpx;
      }

      &:last-child {
        border-right: none;
      }
    }
  }
}
</style>
