<template>
  <div class="public-table">
    <el-table v-bind="$attrs" v-on="$listeners"
      :class="[{ 'thead-is-image': theadIsImage }, { 'table-no-border': $attrs.border === undefined }]">
      <el-table-column v-bind="item" v-for="item in tableTitleType" :key="item.type"></el-table-column>
      <el-table-column v-bind="item" v-for="item in tableTitleIndex" :key="item.type">
        <template v-slot="scope">
          <span class="scope-item">
            <slot v-if="!item.slots">{{ scope.$index + 1 }}</slot>
            <slot :name="item.slots" :row="scope.$index + 1"></slot>
          </span>
        </template>
      </el-table-column>
      <el-table-column v-bind="item" v-for="item, index in tableTitle" :label="item.label" :key="item.id">
        <template v-slot:header="scope">
          <slot name="header" :scope="{ 'row': item, '$index': index }">{{ item.label }}</slot>
          </slot>
        </template>
        <template v-slot="scope">
          <span class="scope-item">
            <slot v-if="!item.slots"><span class="scope-label" :style="item">{{ scope.row[item.prop] }}</span></slot>
            <slot :name="item.slots" :scope="{ 'row': scope.row, '$index': scope.$index, 'title': item }"></slot>
          </span>
        </template>
      </el-table-column>
      <div slot="append">
        <slot name="append"></slot>
      </div>
    </el-table>
    <div v-if="theadIsImage" class="thead-slot">
      <slot name="theadSlot">
        <div class="slot-default-img"></div>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'publicTable',
  watch: {
    '$attrs.titles': {
      handler(newVal, onload) {
        if (newVal && newVal.length > 0) {
          this.tableTitle = newVal.filter(item => !item.type);
          this.tableTitleType = newVal.filter(item => item.type && item.type !== 'index');
          this.tableTitleIndex = newVal.filter(item => item.type && item.type == 'index');
        }
        this.theadIsImage = this.$slots['thead-is-image'] || this.$slots['thead-is-image'] === '' || this.$attrs.theadIsImage || this.$attrs.theadIsImage === '';
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      theadHeight: 0,
      theadIsImage: false,
      tableTitle: [],
      tableTitleType: [],
      tableTitleIndex: []
    };
  },
  updated() {
    const gutter = document.getElementsByClassName('has-gutter');
    const tableFixed = document.getElementsByClassName('el-table__fixed');
    const defaultImg = document.getElementsByClassName('slot-default-img');
    const theadHeight = gutter && gutter.length > 0 ? gutter[0].clientHeight : 47;

    if (defaultImg && defaultImg.length > 0) {
      defaultImg[0].style.height = `${theadHeight}px`;
    }
    if (tableFixed && tableFixed.length > 0) {
      tableFixed[0].style.border = '1px solid var(--publicTableColor01)';
      tableFixed[0].style.borderTop = 'none';
      tableFixed[0].style.borderLeft = 'none';
      tableFixed[0].style.borderBottom = 'none';
    }
  },
  methods: {}
};
</script>
<style lang="scss">
.chaoti-os-ui-black .public-table .el-table .el-table__header-wrapper th {
  padding: 0px;
}

.public-table {
  height: 100%;
  position: relative;

  ::v-deep.el-table {
    background-color: transparent;

    thead {
      color: var(--publicTableColor02);
    }

    tbody {
      color: var(--publicTableColor06);
    }

    td {
      padding: 0;
      font-size: 12px;
      border-color: var(--publicTableColor01);
    }

    th {
      padding: 0;
      background: var(--publicTableColor03);
      border-color: var(--publicTableColor01);
    }

    tr {
      background-color: var(--publicBgColor01);
    }

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

    .gutter {
      border-bottom: 1px solid var(--publicTableColor01);
    }

    .scope-label,
    .scope-item {
      display: block;
      font-size: 14px;
    }

    .el-table-column--selection {
      .cell {
        padding-right: 10px;
      }
    }

    .el-table__header-wrapper {
      th {
        padding: 10px 0;
        background: var(--publicTableColor03);
      }

      th.is-leaf {
        border-color: var(--publicTableColor01);
      }
    }

    .el-table__body-wrapper {
      padding-bottom: 0;

      .el-table__row {
        height: 40px;
      }

      tr:hover>td {
        background-color: var(--publicTableColor03);
      }
    }

    .el-table__footer-wrapper {
      tr {
        height: 40px;
      }

      td {
        color: var(--publicTableColor06);
        background-color: var(--publicTableColor03);
      }
    }

    .el-table__fixed-header-wrapper {
      th {
        padding: 10px 0;
        border-bottom: 0;
      }
    }

    .el-table__fixed-footer-wrapper {
      td {
        color: var(--publicTableColor06);
        background-color: var(--publicTableColor03);
      }

      .cell {
        height: 38px;
        line-height: 38px;
      }
    }

    .hover-row>td {
      background-color: var(--publicTableColor03);
    }
  }

  ::v-deep.table-no-border {

    .el-table__header-wrapper,
    .el-table__body-wrapper {
      border-left: 1px solid var(--publicTableColor01);
      border-right: 1px solid var(--publicTableColor01);
    }

    .el-table__header-wrapper {
      border-top: 1px solid var(--publicTableColor01);
    }
  }

  ::v-deep.el-table--border {
    border-color: var(--publicTableColor01);
  }

  ::v-deep.el-table__fixed::before,
  ::v-deep.el-table--border::after,
  ::v-deep.el-table--group,
  ::v-deep.el-table--group::after,
  ::v-deep.el-table::before {
    background-color: var(--publicTableColor01);
  }

  ::v-deep.thead-is-image {
    .el-table__header {
      margin-bottom: 13px;

      tr {
        background-color: transparent;
      }

      th {
        height: 47px;
        border-bottom: none;
        background-color: transparent;
      }
    }

    .el-table__header-wrapper {
      border: none;
    }

    .el-table__body-wrapper {
      border-top: 1px solid var(--publicTableColor01);
    }
  }

  .thead-slot {
    position: absolute;
    top: 0;
    left: -6px;
    right: -6px;

    .slot-default-img {
      width: 100%;
      background-size: 100% 100%;
      background-image: var(--publicBg02);
    }
  }
}
</style>
