<script>
import Pagination from '../widget/Pagination.vue'

export default {
  inheritAttrs: false,

  props: {
    selection: { type: Boolean },
    pageInfo: { type: Object }
  },

  created () {
    this.handleColumn = {
      actions: (actions, props) => {
        return actions.map((v) => this.$createElement(
          'el-button',
          {
            props: { type: 'text', icon: 'el-icon-' + v.type },
            class: '_action_ ' + v.type,
            on: { click: () => v.click && v.click(v.type, props, actions) }
          },
          v.label
        ))
      }
    }
  },

  methods: {
    toggleRowSelections (rows, selected) {
      for (const row of rows) {
        this.$refs.tableRef.toggleRowSelection(row, selected)
      }
    }
  },

  render (h) {
    const { column, data, calcMaxHeight, ...tableProps } = this.$attrs
    const cols = []

    if (this.selection) cols.push(h('el-table-column', { props: { type: 'selection', width: '44' } }))

    for (let i = 0, len = column.length; i < len; i++) {
      const { on, actions, ...props } = column[i]
      cols.push(h('el-table-column', {
        props,
        on,
        scopedSlots: props.type === 'index'
          ? undefined
          : {
              default: (properties) => {
                if (props.prop && this.$scopedSlots[props.prop]) return this.$scopedSlots[props.prop](properties)
                return properties.row[properties.column.property]
              }
            }
      }))
    }

    return h('div', { class: 'table_layout' }, [
      h('el-table', {
        ref: 'tableRef',
        style: { '--table-max-height': calcMaxHeight },
        props: { data, stripe: true, border: true, ...tableProps },
        on: { ...this.$listeners, 'current-change': this.$listeners['table-current-change'] }
      }, cols),

      this.pageInfo && h(Pagination, { props: { pageInfo: this.pageInfo }, on: this.$listeners })
    ])
  }
}
</script>

<style lang="scss">
.table_layout {

  .el-table {
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 2px 10px 0px rgba(16,166,180,0.2);
    border: 1px solid #208ac6;

    .cell {
      text-align: center;
    }

    th.el-table__cell {
      padding: 6px 0;
      background-color: $--color-primary;

      .cell {
        color: #fff;
      }
    }

    ._action_.edit {
      color: $--color-primary;
    }

    ._action_.view {
      color: $--color-primary;
    }

    ._action_.delete {
      color: $--color-danger;
    }

    .el-table__body-wrapper {
      max-height: calc(100vh - var(--table-max-height));
      overflow-y: auto;
    }

    .el-table__header .el-table__cell {
      border-right-color: rgba($color: #fff, $alpha: 0.3);
    }
  }

  .el-table::before, .el-table--group::after, .el-table--border::after {
    background-color: transparent;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
    background-color: #f1fafa;
  }

  .el-pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
