<!--
 * @Author: your name
 * @Date: 2021-10-09 18:16:42
 * @LastEditTime: 2021-10-22 14:28:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/components/v-table/index.vue
-->


<script>
export default {
  name: "v-table",
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    columns: {
      handler(val) {
        if (val.length > 0) {
          this.tbColumns = [...val];
        }
      },
      immediate: true,
    },
    data: {
      handler(val) {
        if (val.length > 0) {
          this.tbData = [...val];
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      tbData: [],
      tbColumns: [],
    };
  },
  render () {
    const on = {
      ...this.$listeners
    }
    const props = {
      ...this.$attrs,
      ...this.$props,
      ...{
        dataSource: this.tbData,
        columns: this.tbColumns
      }
    }
    const isRedRow = this.isRedRow;
    const slots = Object.keys(this.$slots).map(slot => {
      return (
        <template slot={slot}>{this.$slots[slot]}</template>
      )
    })
    const table = (
      <a-table  props={props} scopedSlots={this.$scopedSlots} on={on} row-class-name={isRedRow} row-key='id'>
        {slots}
      </a-table>
    )
    return (
      <div class="v-table">{table}</div>
    )
  },
  methods: {
    isRedRow(record, index) {
      let className = "";
      className = index % 2 === 0 ? "evenRow" : "oddRow";
      return className;
    },
  },
};
</script>

<style lang="less" scoped>
.v-table {
    width: 100%;
    height: auto;
}
</style>
