<template>
  <div class="tree-table">
    <div class="tree-table-header">
      <template v-for="(header, index) in columns">
        <div :key="'header' + index" class="header-item" v-if="header.show">
          <span>{{ header.label }}</span>
        </div>
      </template>
    </div>
    <div class="tree-table-body">
      <tree-rob
        v-if="data && data.length > 0"
        :data="data"
        :columns="columns"
        @again="again"
        @statusConfirm="statusConfirm"
        @openModal="openModal"
        @setNewProfit="setNewProfit"
      ></tree-rob>
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import treeRob from "./tree-row.vue";
export default {
  name: "treeTable",
  components: {
    treeRob,
  },
  props: {
    /**
     * el-table 属性集合
     * 自定义属性：
     * @param {Array} _defaultHeader_  : 默认的表格头部，支持['setcol', 'screen'] setcol-列设置 screen-筛选
     * 可使用插槽扩展表格头部：
     * table-header - 具名插槽
     * slotProps：selection - 表格选中的数据  alldata - 表格当前全部数据
     * <template #table-header="slotProps">
     *   <el-button size="small" @click="click(slotProps)">扩展1</el-button>
     * </template>
     */
    table: {
      type: Object,
      default: () => {},
    },
    // el-table 表格数据 对应data字段
    data: {
      type: Array,
      default: () => [],
    },
    /**
     * el-table-column 表格列属性集合
     * 自定义属性：
     * @param {Boolean}       _noset_        : 是否不允许设置列
     * @param {Boolean}        _screen_      : 是否允许筛选
     * @param {Boolean}        _hidden_      : 是否隐藏列
     * @param {String/Boolean} _screen_tip_  : 筛选按钮提示信息，为false不提示
     * @param {String} _screen_tip_effect_   : 筛选按钮提示信息主题，dark/light
     * @param {String} _screen_tip_placement_: 筛选按钮提示信息位置，top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
     * @param {Array}          _keys_        : 支持的筛选key
     * @param {Array}      _select_options_  : 若需支持包含select的key，value的备选数据，示例：{_select_options_: [{id:'', label:''},...]}
     * @param {Array}  _select_options_end_  : 若需支持包含select的key，value_end的备选数据，默认使用_select_options_，示例：{_select_options_: [{id:'', label:''},...]}
     * @param {Array}          _keys_        : 支持的筛选key
     * @param {String}         _slot_        : 使用具名插槽时的名称
     * @param {Function}       _format_      : 数据格式化函数，支持返回html
     * @param {Function}       _render_      : 自定义列，采用vue中的render函数，示例: { _render_:(h, scope) => { return h(...) } }
     */
    columns: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    again(id) {
      this.$emit("again", id);
    },
    statusConfirm(id, status, ex_status) {
      this.$emit("statusConfirm", id, status, ex_status);
    },
    openModal(id, is, app) {
      this.$emit("openModal", id, is, app);
    },
    setNewProfit(e) {
      this.$emit("setNewProfit", e);
    },
  },
};
</script>

<style  lang="scss" scoped>
.tree-table {
  width: 100%;
  position: relative;
  margin: 0 0 50px 0;
  .tree-table-header {
    width: 100%;
    display: flex;
    border-top: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
    .header-item {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      height: 48px;
      border-bottom: 1px solid #dfe6ec;
      border-right: 1px solid #dfe6ec;
      align-items: stretch;
      span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        height: 23px;
        padding: 0;
        margin: 0;
        list-style: none;
        font-style: normal;
        text-decoration: none;
        text-indent: initial;
        border-spacing: 2px;
        font-size: 14px;
        border: none;
        font-weight: 500;
        font-family: "Microsoft Yahei", sans-serif;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        padding-left: 10px;
        padding-right: 10px;
        width: 100%;
        color: #909399;
      }
    }
  }
  .tree-table-body {
    width: 100%;
    // border-top: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
  }
  .no-data {
    padding: 25px 0;
    text-align: center;
    color: #909399;
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
  }
}
</style>