<template>
  <div class="table-container">
    <table class="data-table">
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.props">{{ column.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index"
          :class="{ 'odd-row': (index + 1) % 2 !== 0, 'even-row': (index + 1) % 2 === 0 }">
          
          <td v-for="column in columns" :key="`${column.props}-${index}`">{{ row[column.props] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'TableList',
  props: {
    columns: {
      type: Array,
      default: () => []

    },
    data: {
      type: Array,
      default: () => []
    }
  },
  created() {
    console.log(this.columns,this.data);
  }
};
</script>

<style lang="scss" scoped>
.table-container {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 4rpx dashed #ccc;
  border-radius: 16rpx;

  th,
  td {
    padding: 12rpx;
    height: 48rpx;
    text-align: left;
    border-bottom: 1rpx dashed #ccc;
  }

  th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #666;
  }

  .odd-row {
    background-color: #fff !important;
  }

  .even-row {
    background-color: #f5f5f5 !important;
  }

  tr:hover {
    background-color: #e0e0e0;
  }
}
</style>