<template>
  <div class="ai-table">
    <div class="table-title">{{ obj.title }}</div>
    <div class="table-list">
      <div class="list-item" v-for="(item, index) in obj.text" :key="index">
        <div class="item-header">
          <div class="header-item">{{ item.column }}</div>
        </div>
        <div class="item-boby" v-for="(valueItem, valueIndex) in item.list" :key="valueIndex">
          {{ valueItem }}{{obj.unit  }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { ref, reactive } from 'vue'
const props = defineProps({
    obj: {
      type: Object,
      default: () => {}
    },
})


</script>

<style lang="scss" scoped>
.ai-table {
//   width: fit-content;
}
.table-title{
   
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
}
.table-list {
    min-width: 400px;
  display: flex;
  align-items: center;
  background-color: rgba(195, 202, 217, 0.5);
  gap: 1px;
  .list-item{
    flex: 1;
    
  }
  .item-header {
    background-color: #507afc;
    & > div {
      padding: 3px 10px;
      text-align: center;
      font-size: 15px;
      font-weight: bold;
    }
  }
  .item-boby{
    margin-top: 1px;
    background-color: #3D424D;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
 
  }
}
</style>
