<!-- <template>
  <div v-if="tableData.length">
    <div class="cell-title">
      <span
        v-for="(title, index) in tableColums"
        :key="index"
      >
        {{title.name}}
      </span>
    </div>
    <div
      class="cell-list"
      v-for="(item, index) in tableData"
      :key="index"
    >
      <span
        v-for="(col, index) in tableColums"
        :key="index"
      >
        <span>{{ col.render && col.render(item)}}</span>
        {{item[col.code]}}
      </span>
    </div>
  </div>
  <Empty v-else /> -->
<!-- </template> -->
<script lang="jsx">
import Empty from '@/components/empty.vue'
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import { toRefs, watch } from 'vue'
export default {
  props: {
    tableData: {
      type: Array,
      default: () => ([])
    },
    tableColums: {
      type: Array,
      default: () => ([])
    },
  },
  render() {
    const { tableData, tableColums, isScorll } = this
    return (
      <>
        <div v-show={tableData.length} style="height: 100%; overflow: hidden">
          <div class="cell-title">
            {
              tableColums.map(title => <div class={`${!title.width &&'flex-1'}`} style={`width: ${title.width}`}>{title.name}</div>)
            }
          </div>
          <div class="table-box">
            <vueSeamlessScroll data={tableData}>
              {
                tableData.map((row, index) => (
                  <div class="cell-list">
                    {
                      tableColums.map(col => <div class={`${col.class} ${!col.width &&'flex-1'}`} style={`width: ${col.width}`}>{ col.type==='index' ? ++index : col.render ? col.render(row):row[col.code] }</div>)
                    }
                  </div>
                
                ))
              }
            </vueSeamlessScroll >
          </div>
        </div>
        <Empty v-show={!tableData.length} />
      </>
    )
  },
}
</script>
<style lang="scss" scoped>
.cell-title {
  width: 100%;
  color: #9aa7bf;
  display: flex;
  margin-bottom: 5px;
  padding: 0 5px;
  // >span {
  //   // flex: 1;
  // }
}
.table-box {
  height: 100%;
  overflow: auto;
}
.cell-list {
  width: 100%;
  display: flex;
  background: rgba(73, 153, 255, 0.1);
  border: 1px solid rgba(73, 153, 255, 0.2);
  margin-bottom: 10px;
  >div {
    // flex: 1;
    padding: 5px;
    box-sizing: border-box;
  }
}
</style>