<template>
  <div class="main-table" ref="mainTable">
    <el-table
      highlight-current-row
      ref="table"
      :row-key="'id'"
      class="tableListValue"
      :height="height || '0'"
      :data="tableData"
      :class="
        transparent === true
          ? 'table width--100 height--100'
          : 'width--100 tableHeight'
      "
      :stripe="stripe || true"
      :border="border || true"
      :row-class-name="tableRowClassName"
      :header-cell-style="headerStyel"
      :row-style="{ height: '20px' }"
      :span-method="spanMethod"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentChange"
    >
      <slot v-for="(el, index) in comTableFormat">
        <el-table-column
          v-if="el.prop !== 'selection'"
          :field="el.prop"
          :label="el.label"
          :width="el.maxWidth"
          :show-overflow-tooltip="el.tooltip || false"
          :align="el.align"
          :fixed="el.fixed"
        >
          <template v-slot="scope">
            <span v-if="el.prop == 'index'">
              {{ scope.$index + 1 }}
            </span>
            <slot :name="el.prop" v-else :row="scope.row">
              {{ scope.row[el.prop] }}</slot
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :type="el.prop"
          :reserve-selection="el.reserveSelection"
        >
        </el-table-column>
      </slot>
      <!-- <el-table-column
        v-for="(el, index) in comTableFormat"
        :key="index"
        :field="el.prop"
        :label="el.label"
        :width="el.maxWidth"
        :show-overflow-tooltip="el.tooltip || false"
        :align="el.align"
        :fixed="el.fixed"
      >
        <template v-slot="scope">
          <span v-if="el.prop == 'index'">
            {{ scope.$index + 1 }}
          </span>
          <template v-else-if="el.prop === 'selection'">
            <el-checkbox @change="change($event, scope, 'dept')"
              ></el-checkbox
            >
          </template>
          <slot :name="el.prop" v-else :row="scope.row">
            {{ scope.row[el.prop] }}</slot
          >
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    height: String,
    // 表格数据
    tableData: {
      type: Array,
      default() {
        return [];
      },
    },
    // 表格字段
    tableFormat: {
      type: Array,
      default() {
        return [
          {
            label: "xx",
            prop: "xxx",
          },
        ];
      },
    },
    // 是否带斑马纹
    stripe: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 是否带边框
    border: {
      type: Boolean,
      default() {
        return false;
      },
    },
    // 设置表格头颜色
    headerStyel: Object,
    // 是否设置透明
    transparent: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  created() {
    this.comTableFormat = JSON.parse(JSON.stringify(this.tableFormat));
    this.comTableFormat = this.comTableFormat || [];
    let arr = [];
    this.comTableFormat.map((item) => {
      item = item.prop ? item : { prop: item };
      item.width = item.width || "80";
      item.label = item.label;
      item.align = item.align;
      item.maxWidth = item.maxWidth;
      item.tooltip = Boolean(item.tooltip);
      arr.push(item);
    });
    this.comTableFormat = arr;
  },
  mounted() {
    if (!this.comTableFormat.length) {
      this.comTableFormat = JSON.parse(JSON.stringify(this.tableFormat));
      this.comTableFormat = this.comTableFormat || [];
      let arr = [];
      this.comTableFormat.map((item) => {
        item = item.prop ? item : { prop: item };

        item.width = item.width || "80";
        item.label = item.label;
        item.tooltip = Boolean(item.tooltip);
        arr.push(item);
      });
      this.comTableFormat = arr;
    }
  },
  methods: {
    // 设置表格行颜色
    tableRowClassName({ row, rowIndex }) {
      this.$emit("setTableRowClass", rowIndex);
    },
    scroll() {},
    spanMethod({ rowIndex, columnIndex }) {
      this.$emit("spanMethod", { rowIndex, columnIndex });
    },
    rowClick(row, column, event) {
      this.$emit("rowClick", { row, column, event });
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
  },
};
</script>

<style scoped lang="scss">
.width--100 {
  width: 100%;
}
.height--100 {
  height: 100%;
}
.tableHeight {
  height: 100% !important;
}
.el-table .table-bg {
  background: rgb(243, 160, 7);
}
</style>
<style lang="scss" scoped>
.main-table {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  padding-right: 2px;
  padding-bottom: 2px;
  flex: 1;
}
.table {
  background-color: transparent !important;
}
.table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
::v-deep {
  // .el-table
  //   .el-table__fixed-right
  //   .el-table__fixed-body-wrapper
  //   .el-table__body {
  //   padding-bottom: 10px !important;
  // }

  table tbody tr:hover > td {
    background: transparent !important;
  }

  // 表格内背景颜色
  .table th,
  .table tr,
  .table td {
    background-color: transparent; // 背景透明
    border: 0px;
    height: 30px;
    font-size: 13px;
  }

  .table,
  .el-table__expanded-cell {
    background-color: transparent;
  }
  .table th.el-table__cell.is-leaf {
    border-bottom: none;
  }
  .table tr.el-table__row.el-table__row--striped {
    background: rgb(30, 58, 109);
    color: rgb(202, 215, 227);
  }
  .table .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: rgb(30, 58, 109);
    color: rgb(202, 215, 227);
  }
  .table .el-table__cell {
    padding: 0px;
    color: rgb(202, 215, 227);
  }
  // .el-table__body-wrapper {
  //   height: calc(100% - 80px);
  // }
}
// /deep/ .table tbody tr:hover > td {
//   background: transparent !important;
// }

// // 表格内背景颜色
// /deep/ .table th,
// /deep/ .table tr,
// /deep/ .table td {
//   background-color: transparent; // 背景透明
//   border: 0px;
//   height: 30px;
//   font-size: 13px;
// }

// /deep/ .table,
// /deep/ .el-table__expanded-cell {
//   background-color: transparent;
// }
// /deep/ .table th.el-table__cell.is-leaf {
//   border-bottom: none;
// }
// /deep/.table tr.el-table__row.el-table__row--striped {
//   background: rgb(30, 58, 109);
//   color: rgb(202, 215, 227);
// }
// /deep/ .table .el-table__body tr.el-table__row--striped td.el-table__cell {
//   background: rgb(30, 58, 109);
//   color: rgb(202, 215, 227);
// }
// /deep/ .table .el-table__cell {
//   padding: 0px;
//   color: rgb(202, 215, 227);
// }
// /deep/ .el-table__body-wrapper {
//   height: 100%;
// }

// .tableListValue {
//   // width: 19vw;
//   // margin-left: 0.8vh;
//   //滚动条的宽高
//   ::-webkit-scrollbar {
//     width: 1.5vh;
//     height: 1.5vh;
//   }
//   //滚动条的滑块背景色
//   ::-webkit-scrollbar-thumb {
//     background: #ccc;
//     border-radius: 1vh;
//   }
//   //滚动条的背景色
//   ::-webkit-scrollbar-track {
//     background: rgba(#ccc, 0.3);
//   }
// }
</style>
