<template>
  <ul class="scroll-table">
    <li class="table-header">
      <div v-for="(item, index) in columns" :key="item" :title="item" :style="getStyle(index)">
        <span>{{ item }}</span>
      </div>
    </li>
    <div class="table-body">
      <li class="table-tr" v-for="(item, index) in data" :key="index">
        <slot :row="item"></slot>
      </li>
      <div v-if="!data.length"></div>
    </div>
  </ul>
</template>
<script>
export default {
  props: {
    options: {
      type: Object,
      default: function () {
        return {}
      }
    },
    columns: {
      type: Array
    },
    columnWidth: {
      type: Array,
      default: function () {
        return []
      }
    },
    data: {
      type: Array
    }
  },
  setup(props) {
    const getStyle = (index) => {
      const width = props.columnWidth[index]
      return width ? { width: width, flex: 'none' } : {}
    }
    return {
      getStyle
    }
  }
}
</script>
<style lang="scss" scoped>
.scroll-table {
  height: calc(100% - 20px);
  color: #fff;
  font-size: 14px;
  padding: 0 10px;
  margin: 10px 0 10 0;
  padding-left: 0px;
  text-align: center;
  list-style: none;
  .table-header {
    background: #152e6a;
    background: url('../../images/table-header.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    div {
      flex: 1;
      // width: calc(100% / 7);
      padding: 10px 5px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .table-body {
    height: calc(100% - 50px);
    overflow-y: hidden;

    .table-tr {
      display: flex;
      background: url('../../images/table-row.png');
      background-repeat: no-repeat;
      background-size: 100% 32px;
    }
  }
  .table-body::-webkit-scrollbar {
    width: 0;
  }
}
</style>
