<template>
  <el-row class="detail-table"
          ref="detail_table">
    <slot name="table"
          :height="height"
          :width="width" />
    <slot />
  </el-row>
</template>
<script>
import ElRow from 'mk-element/packages/row';

export default {
  name: 'mk-search-table-box',
  components: {
    ElRow
  },
  data() {
    return {
      height: 300,
      width: '100%'
    };
  },
  activated() {
    this.$nextTick(() => {
      this.height = document.documentElement.clientHeight - this.$refs.detail_table.$el.getBoundingClientRect().top - 35;
      if (this.$refs.detail_table.$el.querySelector('.el-table__fixed-right')) {
        this.width = `${this.$refs.detail_table.$el.querySelector('.el-table').clientWidth - this.$refs.detail_table.$el.querySelector('.el-table__fixed-right').clientWidth - 50}px`;
      }
    });
  }
};
</script>
