<template>
  <div>
    <navbar title="查失信"></navbar>
    <div class="wrapper">
      <div class="search-input">
        <van-search type="text" v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
      </div>
      <template v-if="caseInfoList.length > 0">
        <search-result-content :caseInfoList="caseInfoList"></search-result-content>
      </template>
      <template v-else>
        <van-empty />
      </template>
    </div>

  </div>
</template>

<script>
import { Icon, Search, DropdownMenu, DropdownItem, Empty } from 'vant';//button组件
import navbar from '../../../components/navbar/navbar.vue';
import SearchResultContent from './components/searchResultContent/searchResultContent.vue'
import { getQueryShixin } from "@/service/api/home";
export default {
  inject: ['reload'],
  name: "Search",
  components: {
    VanIcon: Icon,
    VanSearch: Search,
    navbar: navbar,
    SearchResultContent: SearchResultContent,
    VanDropdownMenu: DropdownMenu,
    VanDropdownItem: DropdownItem,
    VanEmpty: Empty,
  },
  data() {
    return {
      searchValue: '',
      caseInfoList: [],
      currentPage: 1,
      loading: false,
      isEndLoading: false,
    }
  },

  beforeRouteEnter(to, from, next) {
    to.meta.keepAlive = true;
    if (from.path !== '/dashboard/home/searchDishonesty/result/details') {
      next(vm => {
        vm.reload()
      })
    } else {
      next()
    }
  },

  beforeRouteLeave(to, from, next) {
    if (to.path == '/dashboard/home/searchDishonesty/result/details') {
      from.meta.keepAlive = true;
      next()
    } else {
      from.meta.keepAlive = false;
      next()
    }
  },

  mounted() {
    window.addEventListener('scroll', this.scrollBottom);
    if (sessionStorage.getItem('searchValue')) {
      this.searchValue = sessionStorage.getItem('searchValue')
      this.onSearch();
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollBottom)
  },
  methods: {
    // 搜索关键字
    onSearch() {
      this.getQueryShixinData();
    },

    // 搜索取消
    onCancel() {
      history.back();
    },

    async getQueryShixinData() {
      let params = {
        "keyword": this.searchValue,// 搜索关键词
        "pageNum": this.currentPage,
        "pageSize": 10,
      }
      let result = await getQueryShixin(params);
      if (this.loading) {
        this.caseInfoList = this.caseInfoList.concat(result.records);
      } else {
        this.caseInfoList = result.records;
      }
      this.totalDatas = result.total;
      if (this.caseInfoList.length < result.total) {
        this.isEndLoading = false;
      } else {
        this.isEndLoading = true;
      }
      this.loading = false;
    },


    // 滚动到页面底部时，请求内容
    scrollBottom() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop  //页面滚动的高度
      let clientHeight = document.documentElement.clientHeight  //可视区域高度
      let scrollHeight = document.documentElement.scrollHeight  //可滚动内容的高度
      let bottomOfWindow = scrollTop + clientHeight + 1000 >= scrollHeight    //是否滚动到底部

      //loading 和 this.tableData.length和this.total是自己的判断条件
      if (scrollTop !== 0 && bottomOfWindow && !this.loading && !this.isEndLoading) {
        this.loading = true;
        this.currentPage += 1;
        this.getQueryShixinData();
      }
    },



  }
}
</script>

<style lang="less" scoped>
.wrapper {
  padding: 46px 0 1rem;
  background: #ffffff;
  min-height: 100vh;
}

.search-input {
  padding: 16px 1rem;
  width: 100%;
  background: #ffffff;
  position: sticky;
  z-index: 100;
  top: 46px;
  left: 0;
  border-bottom: solid 1px #f2f2f2;
  margin-bottom: 12px;
}

.van-search {
  padding: 0;
}

.van-dropdown-menu /deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}

.select-item-box {
  height: 310px;
  overflow-y: scroll;
  // padding-top: 1rem;
}

.select-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 1rem;
  border-bottom: solid 1px #f2f2f2;
}

.select-item-title {
  font-size: 0.8rem;
}

.select-item-title-active {
  color: #1989fa;
}

.select-item-logo {
  font-size: 1rem;
  color: #1989fa;
}
</style>
