<template>
  <div :style="{width:panelWidth+'px'}">
    <vuc-datatable ref="xtable"
                   :height="`${panelHeight-10}`"
                   :show-checkbox="false"
                   :show-toolbar="false"
                   :auto-selected="autoSelected"
                   :row-key="rowKey"
                   @on-select="handleSelect"
                   @on-select-change="handleSelectChange"></vuc-datatable>
  </div>
</template>

<script>

export default {
  name: 'VucTablecomboxItem',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    panelWidth: {
      type: [Number, String],
      default: () => 'auto'
    },
    panelHeight: {
      type: [Number, String],
      default: () => 200
    },
    autoSelected: {
      type: Boolean,
      default: true
    },
    rowKey: {
      type: String,
      default: ''
    }
  },
  inject: ['parent'],
  methods: {
    handleSelect({ row, rowIndex }) {
      this.$emit('on-click', row)
    },
    handleSelectChange(params) {
      if (params) {
        const { row } = params
        this.$emit('on-change', row)
      } else {
        this.$emit('on-change', null)
      }
    },
    loadColumn(columns) {
      this.$refs.xtable.loadColumn(columns)
    },
    loadData(data) {
      this.$refs.xtable.loadData(data)
    },
    doFilter(queryText) {
      this.$refs.xtable.doFilter(queryText)
    },
    getCurrentRow() {
      return this.$refs.xtable.getCurrentRow()
    }
  },
  mounted() {

  }
}
</script>

<style></style>
