<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">
        <ul>
          <li @click="goUrl(relationItem.companyId)" v-for="(relationItem, relationIndex) in caseInfoList"
            :key="relationIndex" class="relationship-item">
            <div class="relationship-item-left bg-2372eb" v-if=" relationItem.status == '存续' ">
              <img src="../../../images/part_one/icon_company.png" alt="">
            </div>
            <div class="relationship-item-left bg-ee8c15" v-else-if="relationItem.status == '营业'">
              <img src="../../../images/part_one/icon_company.png" alt="">
            </div>
            <div class="relationship-item-left" v-else>
              <img src="../../../images/part_one/icon_company.png" alt="">
            </div>
            <div class="relationship-item-right">
              <div class="relationship-item-right-title">{{ relationItem.companyName }}</div>
              <div class="relationship-item-right-number">
                <!--                <span>关联企业：</span>-->
                <van-tag color="#e8f1fd" text-color="#2372eb">{{ relationItem.status }}</van-tag>
              </div>
            </div>
          </li>
        </ul>
      </template>
      <template v-else>
        <van-empty />
      </template>
    </div>

  </div>
</template>

<script>
import { Icon, Search, Empty, Tag } from 'vant';//button组件
import navbar from '../../../components/navbar/navbar.vue';
import { getQueryRelationshipPage } from "@/service/api/home";
export default {
  inject: ['reload'],
  name: "Search",
  components: {
    VanIcon: Icon,
    VanSearch: Search,
    navbar: navbar,
    VanTag: Tag,
    VanEmpty: Empty,
  },
  data() {
    return {
      searchValue: '',
      caseInfoList: [],
      currentPage: 1,

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

  beforeRouteLeave(to, from, next) {
    if (to.path == '/dashboard/home/searchRelationship/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.getQueryRelationshipPageData();
    },

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

    goUrl(companyId) {
      sessionStorage.setItem('getDetailsId', companyId);
      this.$router.push('/dashboard/home/searchRelationship/SearchRelationTree');
    },

    async getQueryRelationshipPageData() {
      let params = {
        "keyword": this.searchValue,// 搜索关键词
        "pageNum": this.currentPage,
        "pageSize": 10,
      }
      let result = await getQueryRelationshipPage(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.getQueryRelationshipPageData();
      }
    },



  }
}
</script>

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

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

.van-search {
  padding: 0;
}

.relationship-item {
  border-top: solid 1px #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 1rem;
  background: #ffffff;
  margin-bottom: 10px;
}

.relationship-item-left {
  width: 36px;
  height: 36px;
  background: #999999;
  color: #ffffff;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.relationship-item-left img {
  width: 22px;
  height: 24px;
}

.relationship-item-right {
  width: calc(100% - 50px);
}

.relationship-item-right-title {
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.relationship-item-right-number {
  font-size: 0.8rem;
  color: #666666;
}

.bg-2372eb{
  background: #2372EB;
}


.bg-ee8c15{
  background: #ee8c15;
}
</style>
