<template>
  <div v-if="loading" :style="{height:(tableHeight - loadingHeightDiff) + 'px'}">
    <el-skeleton :loading="loading" animated class="tableSkeleton">
    </el-skeleton>
  </div>
  <transition name="el-fade-in" v-else>
    <div class="eno-table-box" v-show="!loading">
      <div class="add-btn-top" v-if="addBtnPostion=='top' && !disabled && addBtnShow" :style="{top:addBtnTop+'px', right:addBtnRight+'px'}">
        <el-button @click="clickAdd">
          <i class="el-button-suffix el-icon-plus"></i>添加
        </el-button>
      </div>
      <el-table
        class="eno-table"
        v-loading="loading"
        ref="table"
        :row-key="rowKey"
        :tree-props="treeProps"
        :max-height="tableHeight"
        :class="{'eno-table-inside-add':btnInside}"
        border
        v-bind="$attrs"
        :data="tableData"
        :span-method="spanMethod"
        element-loading-spinner="el-icon-loading"
        element-loading-background="transparent"
        v-on="$listeners"
        @row-click="rowClick"
        @selection-change="selectChange"
        @header-click="headerChange"
      >
        <slot></slot>
        <span slot="empty" v-if="emptyFlag" class="empty-slot" :style="{height:(tableHeight - 40) + 'px'}">
          <i class="iconfont icon-icon_nodata" style="font-size: 48px;color:#B2B2B1"></i>
          <span style="line-height: 28px;color:#828282;">{{emptyText}}</span>
        </span>
        <span slot="empty" v-else></span>
        <div slot="append" class="add-btn-inside" @click="clickAdd" v-if="addBtnPostion=='inside' && !disabled && addBtnShow">
          <i class="el-button-suffix el-icon-plus"></i>添加
        </div>
        <div slot="append" class="add-btn-inside-hide" v-if="addBtnPostion=='inside' && !disabled && !addBtnShow && !tableData.length"></div>
      </el-table>
      <div class="add-btn-bottom" @click="clickAdd" v-if="addBtnPostion=='bottom' && !disabled && addBtnShow">
        <i class="el-button-suffix el-icon-plus"></i>添加
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'enoTable',
  data() {
    return {
      addBtnTop: 0,
      addBtnRight: 0,
      btnInside: false,
      emptyFlag: false,
      staticHeight: true,
      heightAttr: '',
    }
  },
  props: {
    tableData: {
      type: Array,
      require: true,
      default: () => {
        return []
      },
    },
    emptyText: {
      type: String,
      default: '暂无数据',
    },
    selectTarget: Array,
    addBtnPostion: {
      type: String,
      default: '',
    },
    rowKey: String,
    treeProps: Object,
    disabled: {
      type: Boolean,
      default: true,
    },
    addBtnShow: {
      type: Boolean,
      default: true,
    },
    limitHeight: {
      type: Boolean,
      default: true,
    },
    tableHeight: {
      type: Number,
      default: 450,
    },
    spanMethod: {
      type: Function,
      default: null,
    },
    loading:{
      type: Boolean,
      default: false,
    },
	loadingHeightDiff:{
	  type: Number,
	  default: 0,
	}
  },
  created() {
    if (!this.limitHeight) {
      this.staticHeight = false
    }
    if (this.addBtnPostion) {
      this.btnInside = true
      this.staticHeight = false
    }
  },
  computed:{
    tableShow(){
      return !this.loading
    }
  },
  watch: {
    disabled(val) {
      if (this.addBtnPostion == 'inside') {
        if (!val) {
          this.btnInside = true
        } else {
          this.btnInside = false
        }
      }
    },
    tableData(val) {
      if (val.length || !this.disabled) {
        this.emptyFlag = false
      } else {
        this.emptyFlag = true
      }
    },
    staticHeight(val) {
      if (val) {
        this.heightAttr = 'height'
      } else {
        this.heightAttr = ''
      }
    },
  },
  mounted() {
    if (this.addBtnPostion == 'top') {
      const table = this.$refs.table
      let bounding = table.$el.getBoundingClientRect()
      this.addBtnRight = document.body.clientWidth - bounding.right
      this.addBtnTop = bounding.top - 50
    }
    if(!this.tableData.length && this.disabled){
      this.emptyFlag = true
    }
  },
  methods: {
    rowClick: function (row) {
      this.$emit('row-click', row)
    },
    selectChange: function (selection) {
      this.$emit('update:selectTarget', selection)
    },
    headerChange(column) {
      this.$emit('headerChange', column)
    },
    clickAdd() {
      this.$emit('addBtnClick')
    },
  },
}
</script>

<style lang="less" scoped>
  @import '../../style/base.less';
  .tableSkeleton{
    padding-top: 20px;
  }
  .empty-slot{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  .add-btn-top {
    position: absolute;
  }
  .add-btn-bottom {
    text-align: center;
    border: 1px dashed #d9d9d9;
    color: #333;
    height: 32px;
    line-height: 32px;
    margin-top: 6px;
    border-radius: 4px;
    &:hover {
      cursor: pointer;
    }
    .el-icon-plus {
      margin-right: 8px;
    }
  }
  .add-btn-inside {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
    color: @mainColor;
    cursor: pointer;
  }
  .add-btn-inside-hide {
    height: 142px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid #ebebeb;
    color: @mainColor;
  }
  .eno-table-inside-add {
    /deep/.el-table__empty-block {
      display: none;
    }
  }

  .eno-table-box {
    margin-bottom: 20px;
  }
  .eno-table {
    /deep/.el-table__empty-block {
      width: 100% !important;
      position: sticky;
      left: 0px;
    }
    @normalFontSize();
    color: @57Color;
    box-sizing: border-box;

    &::before {
      background-color: #ebebeb;
    }
    /deep/.el-table__fixed-right {
      height: calc(100% - 12px) !important;
      z-index: 1;
    }
    /deep/.el-table__header-wrapper,
    /deep/.el-table__fixed-header-wrapper {
      background-color: #f5f8ff;

      .el-table__header {
        thead {
          th {
            background-color: @bgColor;
            font-size: 14px;
            color: @textColor;
            border-bottom: none;
          }
        }
      }
    }
    /deep/.el-table__append-wrapper {
      position: sticky;
      bottom: 0;
      left: 0;
      z-index: 4;
      background-color: white;
    }

    /deep/.el-table__body-wrapper,
    /deep/.el-table__fixed-body-wrapper {
      @scrollBarTable();

      .el-table__body {
        .el-table__row {
          td {
            &:last-child {
              border-right: 1px solid @borderTable;
            }
          }
          .el-input {
            .el-input__inner {
              line-height: 28px;
              height: 28px;
              border-color: @borderColor;
              color: @textColor;
            }
          }

          .el-button {
            &.el-button--text {
              height: 20px;
              line-height: 20px;
              span {
                padding: 0;
                height: 100%;
                display: inline-block;
                line-height: 100% !important;
              }
            }
          }

          .el-input-number {
            width: 100px;
            line-height: 28px;

            .el-input-number__decrease,
            .el-input-number__increase {
              height: 14px;
              width: 26px;
              line-height: 14px;
            }

            .el-input {
              .el-input__inner {
              }
            }
          }

          .el-date-editor {
            &.el-input {
              width: 160px;
            }
          }

          &:hover {
            background-color: @f2Color;
          }
        }
      }
    }

    /deep/.cell {
      line-height: 28px;
      text-overflow: ellipsis;
      padding-top: 6px;
      padding-bottom: 6px;
    }

    /deep/tr {
      th,
      td {
        padding: 0px 0;

        &:first-child {
          padding-left: 24px;

          .cell {
            // padding-left: 0;
          }
        }

        &:last-child {
          .cell {
            padding-right: 24px;
          }
        }
      }
    }

    /deep/&.el-table--border {
      border: none;

      td,
      th {
        border-right: none;
        border-color: @borderTable;
      }

      .el-table__header-wrapper {
        border: 1px solid @bgColor;
        border-bottom: none;
      }

      .el-table__body-wrapper {
        border-right: 1px solid @borderTable;
        border-left: 1px solid @borderTable;
      }

      &:after {
        display: none;
      }
    }
  }
  /deep/.el-table th.el-table__cell.required > div::before {
    display: inline-block;
    content: '*' !important;
    width: 5px;
    height: 0px;
    border-radius: 0;
    color: #ff4d51;
    background: #fff;
    margin-right: 5px;
    line-height: 0px;
    vertical-align: middle;
  }
  /deep/.treeTable .el-table__row td:first-child .cell::before {
    content: none !important;
  }
</style>
