<commit_before><template>
  <div class="ui-data-table flex flex-1 flex-column">
    <div v-if="$slots.toolbar" class="toolbar">
      <slot name="toolbar"></slot>
    </div>
    <div class="data-table flex flex-1" ref="wrapper">
      <el-table :data="data" border :height="avaliableHeight">
        <slot></slot>
      </el-table>
      <slot name="table"></slot>
      <transition name="fade">
        <div class="data-loading flex flex-main-center flex-cross-center" v-show="pending">
          <div class="loader-inner">
            <div></div>
            <div></div>
          </div>
        </div>
      </transition>
    </div>
    <pagination v-if="showPagination" :current="page.current"
      :total="page.total||0" @page-change="onPageChange"></pagination>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { merge } from 'lodash'
import Pagination from 'components/Pagination'

export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    rowKey: String,
    showPagination: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      avaliableHeight: 0,
      pending: false,
      page: {
        current: 1,
        limit: 0,
        total: 0
      }
    }
  },
  computed: {
    ...mapGetters(['globalConfig'])
  },
  watch: {
    'globalConfig.pageLimit' (val) {
      this.page.current = 1
      this.page.limit = val
      this.$emit('page-change', 1)
    }
  },
  components: {
    Pagination
  },
  methods: {
    calcTableAvaliableHeight () {
      this.$nextTick(() => {
        this.avaliableHeight = this.$refs.wrapper.clientHeight
      })
    },
    query (resource, current, ...rest) {
      current = current || this.page.current
      this.pending = true
      const condition = merge({ page: { current, limit: this.globalConfig.pageLimit }}, ...rest)
      return resource.query(condition)
      .then(res => res.json()).then(data => {
        this.pending = false
        this.page.current = current || this.page.current
        this.page.total = data.page ? data.page.total : data.results.length
        return data.results
      })
    },
    onPageChange (targetPage) {
      this.$emit('page-change', targetPage)
    }
  },
  created () {
    this.page.limit = this.globalConfig.pageLimit
  },
  mounted () {
    this.calcTableAvaliableHeight()
    window.addEventListener('resize', this.calcTableAvaliableHeight)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.calcTableAvaliableHeight)
  }
}
</script>
<style lang="stylus">
@import "../assets/css/variable"
.ui-data-table
  .toolbar
    margin-bottom .5rem
  // 数据表格
  .data-table
    position relative
    margin 0 -1rem
    font-size .75rem
    border-left none
    border-right none
    .el-table
      &::before
        background none
    > .data-loading
      position absolute
      left 0
      right 0
      top 0
      bottom 0
      background-color rgba(255, 255, 255, .9)
      z-index 10<commit_msg>fix data-table rowkey<commit_after><template>
  <div class="ui-data-table flex flex-1 flex-column">
    <div v-if="$slots.toolbar" class="toolbar">
      <slot name="toolbar"></slot>
    </div>
    <div class="data-table flex flex-1" ref="wrapper">
      <el-table :data="data" border :height="avaliableHeight" :row-key="(row)=>row[rowKey]">
        <slot></slot>
      </el-table>
      <slot name="table"></slot>
      <transition name="fade">
        <div class="data-loading flex flex-main-center flex-cross-center" v-show="pending">
          <div class="loader-inner">
            <div></div>
            <div></div>
          </div>
        </div>
      </transition>
    </div>
    <pagination v-if="showPagination" :current="page.current"
      :total="page.total||0" @page-change="onPageChange"></pagination>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { merge } from 'lodash'
import Pagination from 'components/Pagination'

export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    rowKey: String,
    showPagination: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      avaliableHeight: 0,
      pending: false,
      page: {
        current: 1,
        limit: 0,
        total: 0
      }
    }
  },
  computed: {
    ...mapGetters(['globalConfig'])
  },
  watch: {
    'globalConfig.pageLimit' (val) {
      this.page.current = 1
      this.page.limit = val
      this.$emit('page-change', 1)
    }
  },
  components: {
    Pagination
  },
  methods: {
    calcTableAvaliableHeight () {
      this.$nextTick(() => {
        this.avaliableHeight = this.$refs.wrapper.clientHeight
      })
    },
    query (resource, current, ...rest) {
      current = current || this.page.current
      this.pending = true
      const condition = merge({ page: { current, limit: this.globalConfig.pageLimit }}, ...rest)
      return resource.query(condition)
      .then(res => res.json()).then(data => {
        this.pending = false
        this.page.current = current || this.page.current
        this.page.total = data.page ? data.page.total : data.results.length
        return data.results
      })
    },
    onPageChange (targetPage) {
      this.$emit('page-change', targetPage)
    }
  },
  created () {
    this.page.limit = this.globalConfig.pageLimit
  },
  mounted () {
    this.calcTableAvaliableHeight()
    window.addEventListener('resize', this.calcTableAvaliableHeight)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.calcTableAvaliableHeight)
  }
}
</script>
<style lang="stylus">
@import "../assets/css/variable"
.ui-data-table
  .toolbar
    margin-bottom .5rem
    .el-form-item
      margin-bottom 0
  // 数据表格
  .data-table
    position relative
    margin 0 -1rem
    font-size .75rem
    border-left none
    border-right none
    .el-table
      &::before
        background none
    > .data-loading
      position absolute
      left 0
      right 0
      top 0
      bottom 0
      background-color rgba(255, 255, 255, .9)
      z-index 10
{'fraction_non_alphanumeric': 0.14699112134166392, 'fraction_numerical': 0.010029595527786912, 'mean_word_length': 2.2757135164243403, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 74, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5545518', 'n_tokens_mistral': 1978, 'n_tokens_neox': 1922, 'n_words': 399}