<!--
 * @Author: your name
 * @Date: 2021-09-18 16:30:17
 * @LastEditTime: 2021-12-06 13:45:19
 * @LastEditors: Please set LastEditors
 * @Description: 表格的封装
 * @FilePath: \hyyfClient\src\components\NewTable.vue
-->
<template>
  <div class="bio-table">
    <div class="header">
      <div class="left">
        <svg
          t="1631952219128"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5880"
          width="25"
        >
          <path
            d="M384 320l512 0c38.4 0 64-25.6 64-64 0-38.4-25.6-64-64-64L384 192C345.6 192 320 217.6 320 256 320 294.4 345.6 320 384 320zM896 448 384 448C345.6 448 320 473.6 320 512c0 38.4 25.6 64 64 64l512 0c38.4 0 64-25.6 64-64C960 473.6 934.4 448 896 448zM896 704 384 704c-38.4 0-64 25.6-64 64 0 38.4 25.6 64 64 64l512 0c38.4 0 64-25.6 64-64C960 729.6 934.4 704 896 704zM128 192C89.6 192 64 217.6 64 256c0 38.4 25.6 64 64 64s64-25.6 64-64C192 217.6 166.4 192 128 192zM128 448C89.6 448 64 473.6 64 512c0 38.4 25.6 64 64 64s64-25.6 64-64C192 473.6 166.4 448 128 448zM128 704c-38.4 0-64 25.6-64 64 0 38.4 25.6 64 64 64s64-25.6 64-64C192 729.6 166.4 704 128 704z"
            p-id="5881"
            fill="#bfbfbf"
          ></path>
        </svg>
        <span>{{ title }}</span>
      </div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="listData"
        border
        :height="height"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          v-if="shows.showSelect"
          type="selection"
          :selectable="checkSelectable"
          align="center"
        >
        </el-table-column>

        <el-table-column
          v-if="shows.showIndex"
          type="index"
          label="序号"
          align="center"
          width="70"
        >
        </el-table-column>

        <template v-for="item in tableItems">
          <el-table-column :key="item.prop" v-bind="item" align="center">
            <template slot-scope="scope">
              <slot :name="item.slotName" :row="scope.row">
                {{ scope.row[item.prop] }}
              </slot>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>
<script>
// import TableContent from './TableContent.vue'

export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    listData: {
      type: Array,
      required: true,
    },
    shows: {
      type: Object,
      // defaultProp =>  需要特定条件的字段
      default: () => ({ showIndex: true, showSelect: true, defaultProp: null }),
    },
    tableItems: {
      type: Array,
      required: true,
    },
    height: {
      // 表格高度控制
      type: Number,
      default: 500,
    },
  },
  components: {
    // TableContent
  },
  methods: {
    // 特定条件不让其选中
    checkSelectable(row) {
      if (this.shows.defaultProp) {
        return row[this.shows.defaultProp] === false;
      } else {
        return true;
      }
    },
    handleSelectionChange(rows) {
      this.$emit("selectionChange", rows);
    },
  },
};
</script>
<style scoped>
.bio-table {
  margin-top: 20px;
}

/* 标题栏 */
.bio-table > .header {
  background-color: #f3f3f3;
  color: #bcbcbc;
  font-size: 12px;
  border-bottom: 1px solid rgba(228, 228, 228, 1);
  padding: 10px 24px 10px 18px;
  display: flex;
  justify-content: space-between;
  height: 50px;
  border: 1px solid rgba(235, 238, 245, 1);
  border-bottom: 0;
}
/* 左边 */
.header > .left {
  position: relative;
  display: inline-block;
}
.header > .left > svg {
  position: absolute;
  bottom: 3px;
  padding-left: 4px;
}
.header > .left > span {
  margin-left: 28px;
  position: absolute;
  width: 120px;
  bottom: 5px;
}
</style>
