  Jeepay search 条件通用组件

  @author terrfly
  @site https://www.jeequan.com
  @date 2021/12/27 19:14
-->

<template>
  <div class="table-page-search-wrapper">
    <!-- 表格组件标题 -->
    <!-- <div class="table-name"><b>{{ tableName }}</b></div> -->

    <a-form layout="inline" class="table-head-ground">
      <div ref="tableLayer" class="table-layer">
        <slot />

        <div class="table-search-item">
          <a-button type="primary" @click="searchFunc">
            <search-outlined />查询
          </a-button>
          <a-button class="ref-left-10" @click="props.resetFunc">
            <reload-outlined />重置
          </a-button>
        </div>
      </div>
    </a-form>
  </div>

  <div class="split-line">
    <!-- <div v-if="vdata.searchConditionFlag !== 'none'" class="btns">
      <div
        v-if="vdata.searchConditionFlag == 'less'"
        @click="moreSearchConditionAction(true)"
      >
        更多筛选<i class="bi bi-chevron-down" />
      </div>
      <div v-else @click="moreSearchConditionAction(false)">
        收起筛选<i class="bi bi-chevron-up" />
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  defineProps,
  onBeforeUnmount,
} from "vue";
import { useRoute } from "vue-router";
import { debounce } from "@/utils/throttle";
// 获取当前路由标题
const route = useRoute();
let routeTitle = route.matched;
let tableName = routeTitle[routeTitle.length - 1].meta.title;

const tableLayer = ref(); // 获取父元素DOM对象

// 定义传入属性
const props = defineProps({
  searchConditionNum: { type: Number, default: 50 }, // 默认显示的搜索数量(不包含两个按钮)
  searchFunc: { type: Function, default: () => {} }, //搜索条件
  resetFunc: { type: Function, default: () => {} },
});

onMounted(() => {
  // 获取子元素节点
  moreSearchConditionAction(false);
});

let vdata = reactive({
  searchConditionFlag: "hide", // 搜索条件显示类型： hide: 不显示该按钮，   less: 精简搜索，  more : 包含更多搜索
});

// 更多条件， 显示 or  隐藏
function moreSearchConditionAction(isShow) {
  let layerList = tableLayer.value.getElementsByClassName("table-search-item");
  // console.log(layerList.length, props.searchConditionNum)
  if (layerList.length - 1 <= props.searchConditionNum) {
    return (vdata.searchConditionFlag = "none");
  }

  // 更改页面显示效果
  vdata.searchConditionFlag = isShow ? "more" : "less";

  // 显示 or 隐藏
  for (let i = props.searchConditionNum; i < layerList.length - 1; i++) {
    // layerList[i].style.display = isShow ? "block" : "none";
  }
}
const debounceTime = debounce(searchEnter, 300);
function searchEnter(e) {
  if (e.keyCode == 13) {
    const clsName = document.querySelector(".table-page-search-wrapper");
    const open = document.querySelector(".ant-drawer-open");
    if (clsName && !open) {
      props.searchFunc();
    }
  }
}

window.addEventListener("keydown", debounceTime);
onBeforeUnmount(() => {
  window.removeEventListener("keydown", debounceTime);
});
</script>

<style scoped lang="less">
.split-line {
  border-bottom: 1px solid #ebeff2;
  position: relative;
  -webkit-touch-callout: none;
  user-select: none;
}

.btns {
  width: 100px;
  height: 34px;
  cursor: pointer;
  border: 1px solid #ebeff2;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 50%;
  margin-top: -17px;
  background-color: #fff;
  font-size: 12px;

  div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    color: #79807e;
  }
}
.btns::before {
  content: "";
  position: absolute;
  width: calc(100% + 2px);
  height: 50%;
  background-color: #fff;
  top: -1px;
  left: -1px;
  z-index: 1;
}

i {
  display: inline-block;
  margin-left: 5px;
}
.bi-chevron-up::before,
.bi-chevron-down::before {
  font-size: 6px;
}
</style>
