<template>
  <div class="pro-table">
    <!-- 搜索区域card -->
    <div class="pro-search-card" v-if="showSearch" ref="searchRef">
      <div class="pro-search">
        <div class="title-container">
          <div class="title-text">
            <slot name="title">
              {{ showTitle || $route.name }}
            </slot>
          </div>
        </div>
        <slot name="search"></slot>
      </div>
    </div>

    <!-- 表格区域card -->
    <div class="pro-content-card">
      <div class="pro-tool" v-if="toolbarConfig" ref="toolbarRef">
        <div class="pro-xTool">
          <div class="toolbar">
            <div class="toolbar-left">
              <slot name="tools"></slot>
            </div>
            <div class="toolbar-right">
              <el-tooltip
                v-if="toolbarConfig.search"
                class="search-tooltip"
                effect="dark"
                :content="showSearch ? '隐藏搜索' : '显示搜索'"
                placement="top"
              >
                <el-button
                  size="mini"
                  circle
                  icon="el-icon-search"
                  @click="showSearch = !showSearch"
                />
              </el-tooltip>
              <slot name="toolButton"></slot>
            </div>
          </div>
        </div>
      </div>
      <div ref="remainingRef" style="flex: 1; overflow: hidden">
        <slot :remainingHeight="remainingHeight"></slot>
        <div ref="footerRef">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProTable',
  props: {
    // 显示工具栏相关项
    toolbarConfig: {
      type: [Object, Boolean],
      default: () => {
        return {
          custom: true,
          refresh: true,
          search: true
        }
      }
    },
    fixedHeightOffset: {
      type: Number,
      default: 93
    }
  },
  data() {
    return {
      showSearch: true,
      searchHeight: 0,
      toolbarHeight: 0,
      footerHeight: 0
    }
  },
  computed: {
    refresh() {
      if (this.$listeners.refresh) {
        return { query: () => this.$emit('refresh') }
      } else {
        return false
      }
    },
    showTitle() {
      return this.title || this.$route.meta?.title
    },
    remainingHeight() {
      const total = this.searchHeight + this.toolbarHeight + this.footerHeight
      return `calc(100vh - ${93 + total}px)` // 当前总和231 → 100vh-324px
    }
  },
  mounted() {
    this.calcHeights()
    window.addEventListener('resize', this.calcHeights)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.calcHeights)
  },
  watch: {
    showSearch() {
      this.$nextTick(() => {
        this.calcHeights()
      })
    }
  },
  methods: {
    calcHeights() {
      this.searchHeight = this.showSearch
        ? this.$refs.searchRef?.clientHeight || 0
        : 0
      this.toolbarHeight = this.$refs.toolbarRef?.clientHeight || 0
      this.footerHeight = this.$refs.footerRef?.clientHeight || 0
    }
  }
}
</script>

<style lang="scss" scoped>
.pro-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #333;
  font-family: PingFangSC, PingFang SC;
}

// 搜索区域card
.pro-search-card {
  width: 100%;
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  margin-bottom: 16px;
  display: flex;
  color: #333;

  .title-container {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 9px;

    .title-text {
      display: inline-block;
      height: 100%;
      font-size: 16px;
      font-weight: 500;
      color: #333;
      border-bottom: 2px solid #4a7ff8;
    }
  }
  ::v-deep .el-select-dropdown.el-popper {
    border: none;
  }
}

// 表格区域card
.pro-content-card {
  flex: 1;
  background-color: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #333;
  font-weight: normal;
  ::v-deep .el-table__body-wrapper {
    /*  max-height: #{v-bind(remainingHeight)};
    height: auto !important;
    overflow-y: auto; */
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
    }
  }
}

.pro-search {
  width: 100%;

  ::v-deep .el-form-item {
    margin-top: 15px;
    margin-bottom: 0px;
  }
  /* ::v-deep .el-form-item:last-child {
    margin-bottom: 0 !important;
  } */
  ::v-deep .el-button {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    height: 34px;
    min-width: 88px;
  }
}

.pro-tool {
  margin-bottom: 24px;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  /*  align-items: center;
    margin-bottom: 12px; */
  height: 34px;
  /*   ::v-deep .el-button {
    font-size: 14px;
    height: 34px;
  } */
  .toolbar-left {
    ::v-deep .el-button {
      font-family: PingFangSC, PingFang SC;

      font-weight: 500;
      font-size: 14px;
      height: 34px;
      min-width: 88px;
    }
  }
}

.toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-tooltip {
  margin-right: 8px;
}

// 移动端适配 (≤768px)
@media (max-width: 768px) {
  /*   .pro-search-card {
    padding: 16px;
    margin-bottom: 12px;

    .title-container {
      height: 36px;
      margin-bottom: 8px;

      .title-text {
        font-size: 14px;
      }
    }
  } */

  .pro-content-card {
    padding: 16px;
  }

  .pro-tool {
    margin-bottom: 16px;
  }

  .toolbar {
    flex-direction: row;
    height: auto;
    gap: 12px;

    .toolbar-left {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 85%;
      justify-content: flex-start;

      ::v-deep .el-button {
        height: 32px;
        min-width: 76px;
        font-size: 13px;
        margin-left: 0px;
      }

      ::v-deep .el-button--mini {
        height: 28px;
        min-width: 60px;
        font-size: 12px;
      }
    }

    .toolbar-right {
      width: 15%;
      justify-content: flex-end;
      align-items: self-start;

      ::v-deep .el-button--mini.is-circle {
        width: 28px;
        height: 28px;
      }
    }
  }

  .pro-search {
    ::v-deep .el-form-item {
      margin-top: 12px !important;
    }

    ::v-deep .el-button {
      height: 32px !important;
      min-width: 76px !important;
      font-size: 13px !important;
    }
  }
}

// 平板端适配 (769px-1024px)
@media (min-width: 769px) and (max-width: 1024px) {
  .pro-search-card {
    padding: 20px !important;
  }

  .pro-content-card {
    padding: 20px !important;
  }

  .toolbar {
    .toolbar-left {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 8px !important;

      ::v-deep .el-button {
        height: 33px !important;
        min-width: 80px !important;
        font-size: 13px !important;
      }
    }

    .toolbar-right {
      ::v-deep .el-button--mini.is-circle {
        width: 30px !important;
        height: 30px !important;
      }
    }
  }
}
</style>