<template>
  <div>
    <navbar title="查案件"></navbar>
    <div class="wrapper">
      <div class="search-input-box">
        <div class="search-input">
          <van-search type="text" v-model="searchValue" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
        </div>
        <!--        <van-dropdown-menu active-color="#2372eb">-->
        <!--          <van-dropdown-item ref="caseActionDrop" title="案由">-->
        <!--            <ul class="select-item-box">-->
        <!--              <li class="select-item" :class="[caseActionItem.isSelect ? 'select-item-title-active' : '']"-->
        <!--                @click="caseActionChange(caseActionIndex)" v-for="(caseActionItem, caseActionIndex) in caseActionList"-->
        <!--                :key="caseActionItem.title">-->
        <!--                <div class="select-item-title">{{ caseActionItem.title }}</div>-->
        <!--                <div>-->
        <!--                  <van-icon v-if="caseActionItem.isSelect" name="success" class="select-item-logo" />-->
        <!--                </div>-->
        <!--              </li>-->
        <!--            </ul>-->
        <!--          </van-dropdown-item>-->
        <!--          <van-dropdown-item ref="announcementTypeDrop" title="公告类型">-->
        <!--            <ul class="select-item-box">-->
        <!--              <li class="select-item" :class="[announcementTypeItem.isSelect ? 'select-item-title-active' : '']"-->
        <!--                @click="announcementTypeChange(announcementTypeIndex)"-->
        <!--                v-for="(announcementTypeItem, announcementTypeIndex) in announcementTypeList"-->
        <!--                :key="announcementTypeItem.title">-->
        <!--                <div class="select-item-title">{{ announcementTypeItem.title }}</div>-->
        <!--                <div>-->
        <!--                  <van-icon v-if="announcementTypeItem.isSelect" name="success" class="select-item-logo" />-->
        <!--                </div>-->
        <!--              </li>-->
        <!--            </ul>-->
        <!--          </van-dropdown-item>-->
        <!--        </van-dropdown-menu>-->
      </div>


      <search-result-content :caseInfoList="caseInfoList"></search-result-content>

    </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 { getQueryZhixing } 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: '',

      caseActionList: [
        {
          title: '全部',
          isSelect: false,
        },
        {
          title: '著作权权属，侵权纠纷',
          isSelect: false,
        },
        {
          title: '侵权作品放映纠纷',
          isSelect: false,
        },
        {
          title: '民间借贷纠纷',
          isSelect: false,
        },
        {
          title: '买卖合同纠纷',
          isSelect: false,
        },
        {
          title: '合同纠纷',
          isSelect: false,
        },
        {
          title: '建筑设备租赁合同纠纷',
          isSelect: false,
        },
      ],


      announcementTypeList: [
        {
          title: '全部',
          isSelect: false,
        },
        {
          title: '开庭公告',
          isSelect: false,
        },
        {
          title: '立案公告',
          isSelect: false,
        },
        {
          title: '送达公告',
          isSelect: false,
        },
        {
          title: '裁判公告',
          isSelect: false,
        },
        {
          title: '执行公告',
          isSelect: false,
        },
        {
          title: '拍卖公告',
          isSelect: false,
        },
      ],

      caseInfoList: [],

      currentPage: 1,
      loading: false,
      isEndLoading: false,

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

  beforeRouteLeave(to, from, next) {
    if (to.path == '/dashboard/home//searchCase/result/details') {
      from.meta.keepAlive = true;
      next()
    } else {
      from.meta.keepAlive = false;
      next()
    }
  },
  mounted() {
    window.addEventListener('scroll', this.scrollBottom);

  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollBottom)
  },
  methods: {
    // 搜索关键字
    onSearch() {
      this.getQueryZhixing();
    },

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

    // 案件筛选
    caseActionChange(caseActionIndex) {
      for (let i = 0; i < this.caseActionList.length; i++) {
        this.caseActionList[i].isSelect = false;
      }
      this.caseActionList[caseActionIndex].isSelect = true;
      this.$refs.caseActionDrop.toggle(false);
      this.getQueryZhixing();
    },


    // 公告类型筛选
    announcementTypeChange(announcementTypeIndex) {
      for (let i = 0; i < this.announcementTypeList.length; i++) {
        this.announcementTypeList[i].isSelect = false;
      }
      this.announcementTypeList[announcementTypeIndex].isSelect = true;
      this.$refs.announcementTypeDrop.toggle(false);
      this.getQueryZhixing();
    },


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



  }
}
</script>

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

.search-input {
  margin-bottom: 10px;
}

.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;
}

.search-input-box {
  padding: 14px 1rem 0;
  background: #ffffff;
  position: sticky;
  z-index: 100;
  top: 46px;
  left: 0;
  border-bottom: solid 1px #f2f2f2;
  margin-bottom: 12px;
}
</style>
