// 管理后台通用表格，含：搜索，分页，表格

<template>
  <div class="layout-table" :loading="data.loading">
    <div class="table-head flex flex-pack-justify">
      <div class="table-head-left flex flex-align-center">
        <slot name="breadcrumb">
          <Breadcrumb />
        </slot>
        <div class="buttons">
          <slot name="table-head-left"></slot>
          <slot name="table-head-center"></slot>
          <slot name="table-head-left2"></slot>
        </div>
      </div>

      <div class="table-head-right">
        <div class="extend flex flex-pack-justify">
          <slot name="table-head-right"></slot>
          <slot name="table-head-right2"></slot>
        </div>
      </div>
    </div>

    <!-- 树查询条件-->
    <div  class="table-form">
      <slot name="table-search-left"></slot>
    </div>

    <!-- 树主体 -->
    <div class="table-body">
      <slot name="table-body-head"> </slot>

      <slot>
        <DataTree
          v-if="showType == 'tree'"
          :treeData="data.result"
          :defaultProps="config.defaultProps"
          :loading="data.loading"
          :expand="config.expand"
          :handleNodeClick="config.methods.handleNodeClick"
          :render-content="config.methods.renderContent"
        />
      </slot>

    </div>
  </div>
</template>

<script>
import DataTree from "@/components/DataTree.vue";

export default {
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {},
    },
    config: {
      type: Object,
      required: true,
      default: () => {},
    },
  },
  components: {
    DataTree
  },
  methods: {
    // 根据url的query参数判断是否展示查询条件
    isShowSearch(query) {
      return showSearch;
    },
    isShowButton(name) {
      return this.canShow.indexOf(name) === -1;
    },
    isShowBtn(name) {
      return this.canShow.indexOf(name) !== -1;
    },
  },
  watch: {
   
  },
  computed: {
  },
  data() {
    return {
      loading: this.config.loading,
    };
  },
};
</script>

<style lang="less">
@media screen and (max-width: 800px) {
  .layout-table {
    .table-head {
      display: block;
      width: 100%;
      .el-button {
        margin-bottom: 5px;
      }
      .table-head-left {
        margin-bottom: 10px;
        display: block;
        width: 100%;
      }
      .el-breadcrumb {
        margin-bottom: 10px;
        display: block;
        width: 100%;
      }
    }
  }
}
.layout-table {
  .table-head {
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ededed;
    .el-breadcrumb {
      margin-right: 30px;
    }
    .table-head-left .buttons {
      button + button {
        margin-left: 10px;
      }
      button + span {
        margin-left: 10px;
      }
      span + span {
        margin-left: 10px;
      }
      span + button {
        margin-left: 10px;
      }
    }
  }
  .table-form {
    padding-top: 10px;
    margin-top: 10px;
    overflow: hidden;
  }
  .search-form-wapper {
    float: left;
  }
  .table-foot {
    width: 100%;
    overflow: auto;
  }

  &[loading] {
    pointer-events: none;
    .my-compontent-switch span,
    .el-button,
    .el-input,
    .el-tag,
    input {
      background: #eee;
      color: transparent;
      border-color: #eee;
    }
    input {
      color: #ccc;
    }
    td,
    th {
      color: #eee;
    }
    .el-pagination {
      color: #eee;
      span,
      input,
      button,
      li {
        color: #eee;
      }
    }
  }
}
</style>