<template>
  <el-table
    :data="data"
    ref="JNPFTable"
    class="JNPF-common-table"
    :height="height"
    :max-height="maxHeight"
    :element-loading-text="$t('common.loadingText')"
    v-bind="$attrs"
    v-on="$listeners"
    :border="border"
    :show-summary="showSummary"
    :span-method="spanMethod"
  >
    <el-table-column type="selection" width="50" v-if="hasC" align="center" fixed="left" />
    <el-table-column type="index" width="50" label="序号" v-if="hasNO" align="center" fixed="left" />
    <slot></slot>
    <template slot="empty">
      <el-empty description="暂无数据" :image-size="120"></el-empty>
    </template>
  </el-table>
</template>

<script>
export default {
  name: 'JNPF-table',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    // 合计 默认无
    showSummary: {
      type: Boolean,
      default: false
    },
    columnData: {
      type: Array,
      default: () => []
    },
    // 序号 默认有
    hasNO: {
      type: Boolean,
      default: true
    },
    // 多选框 默认无
    hasC: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    height: {
      default: '100%'
    },
    maxHeight: {
      default: '100%'
    },
    // 自定义合并
    spanMethod: {
      type: Function,
      default: null
    }
  },
  watch: {
    data: {
      handler(val) {
        if (!val) return
        this.doLayout()
      },
      deep: true
    },
    columnData: {
      handler(val) {
        if (!val) return
        this.doLayout()
      },
      deep: true
    }
  },
  methods: {
    doLayout() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.JNPFTable.doLayout()
        })
      }, 50)
    }
  }
}
</script>
