<template>
    <div id="category">
      <!--头部-->
      <!-- <Header/> -->
      <div class="header-title">
        <span class="header-title-return-back" @click="returnClick"><van-icon name="arrow-left" /></span>
        <span class="header-title-name-bold">全部涉诉</span>
      </div>
      <div>
        <van-tabs :v-model="0" @click="tabChange" animated>
<!--            <van-tab title="全部">-->
<!--                <div class="manage-body">-->
<!--                    <van-cell-group>-->
<!--                      <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" :name="require('@/images/part_two/icon_credit.png')" />失信信息</div>-->
<!--                        <div v-for="(item, index) in shixinList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13">{{ item.anNo }}</div>-->
<!--                    </van-cell-group>-->
<!--                    <van-cell-group>-->
<!--                        <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" :name="require('@/images/part_two/icon_debtor.png')" />被执行人信息</div>-->
<!--                        <div v-for="(item, index) in zhixingList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13">{{ item.anNo }}</div>-->
<!--                    </van-cell-group>-->
<!--                    <van-cell-group>-->
<!--                        <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" :name="require('@/images/part_two/icon_justice.png')" />裁判文书</div>-->
<!--                        <div v-for="(item, index) in judgementList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13">{{ item.caseNo }}</div>-->
<!--                    </van-cell-group>-->
<!--                    <van-cell-group>-->
<!--                        <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" :name="require('@/images/part_two/icon_court-announcement.png')" />法院公告</div>-->
<!--                        <div v-for="(item, index) in illegalCourtList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13">{{ item.caseNo }}</div>-->
<!--                    </van-cell-group>-->
<!--                    <van-cell-group>-->
<!--                        <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" :name="require('@/images/part_two/icon_limitation.png')" />限制高消费</div>-->
<!--                        <div v-for="(item, index) in courtList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13 pd-10">{{ item.casenumber }}</div>-->
<!--                    </van-cell-group>-->
<!--                </div>-->
<!--            </van-tab>-->
            <van-tab title="失信信息">
                <div class="manage-body">
                    <van-cell-group @click="jumpInvolved(0)">
                      <div class="mg-lt-10 fs-13 fw-bold" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" name="smile-comment-o" />失信信息<div class="total-num">{{ total }}</div></div>
                      <div v-for="(item, index) in shixinList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13">{{ item.anNo }}</div>
                    </van-cell-group>
                </div>
            </van-tab>
            <van-tab title="被执行人">
                <div class="manage-body">
                    <van-cell-group @click="jumpInvolved(1)">
                        <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" name="smile-comment-o" />被执行人信息<div class="total-num">{{ zhixingTotal }}</div></div>
                      <div v-for="(item, index) in zhixingList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13">{{ item.anNo }}</div>
                    </van-cell-group>
                </div>
            </van-tab>
            <van-tab title="裁判文书">
                <div class="manage-body">
                    <van-cell-group @click="jumpInvolved(2)">
                        <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" name="smile-comment-o" />裁判文书<div class="total-num">{{ caipanTotal }}</div></div>
                      <div v-for="(item, index) in judgementList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13">{{ item.caseNo }}</div>
                    </van-cell-group>
                </div>
            </van-tab>
            <van-tab title="法院公告">
                <div class="manage-body">
                    <van-cell-group @click="jumpInvolved(3)">
                        <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" name="smile-comment-o" />法院公告<div class="total-num">{{ fayuanTotal }}</div></div>
                      <div v-for="(item, index) in illegalCourtList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13">{{ item.caseNo }}</div>
                    </van-cell-group>
                </div>
            </van-tab>
            <van-tab title="限制高消费">
                <div class="manage-body">
                    <van-cell-group @click="jumpInvolved(4)">
                        <div class="mg-lt-10 fs-13 fw-bold mg-tp-10" style="padding-bottom: 10px"><van-icon class="mg-rt-5" size="18" color="#1989fa" name="smile-comment-o" />限制高消费<div class="total-num">{{ xiangaoTotal }}</div></div>
                      <div v-for="(item, index) in courtList" :key="index" style="padding: 10px 10px 15px 0px;" class="mg-lt-16 fs-13 pd-10">{{ item.casenumber }}</div>
                    </van-cell-group>
                </div>
            </van-tab>
        </van-tabs>
      </div>

    </div>

  </template>
  
  <script>
  import { Button, Col, Row, Icon, Field, Tab, Tabs, Tag } from 'vant';
  
  // 3. 引入接口
  import {
    postQueryIllegalShixin,
    postQueryIllegalZhixing,
    postQueryIllegalLimit,
    postQueryIllegalJudgement,
    postQueryIllegalCourt,
  } from "@/service/api/customerDashboard";

  
  export default {
    name: "AllInvolved",

    data() {
      return {
        shixinList: [],
        zhixingList: [],
        courtList: [],
        judgementList: [],
        illegalCourtList: [],
        tabIndex: 0,
        total: 0,
        currentPage: 1,
        loading: false,
        isEndLoading: false,
        zhixingTotal: 0,
        currentzhixingPage: 1,
        zhixingLoading: false,
        zhixingIsEndLoading: false,
        caipanTotal: 0,
        currentCaipanPage: 1,
        caipanLoading: false,
        caipanIsEndLoading: false,
        fayuanTotal: 0,
        currentFayuanPage: 1,
        fayuanLoading: false,
        fayuanIsEndLoading: false,
        xiangaoTotal: 0,
        currentXiangaoPage: 1,
        xiangaoLoading: false,
        xiangaoIsEndLoading: false,
      }
    },
    components: {
      VanButton: Button,
      VanRow: Row,
      VanCol: Col,
      VanIcon: Icon,
      VanField: Field,
      VanTab: Tab,
      VanTabs: Tabs,
      VanTag: Tag,
    },
    created() {
      window.scrollTo(0, 0)
    },
    mounted() {
      window.addEventListener('scroll', this.scrollBottom);
      this.postIllegalShixin();
      this.postIllegalZhixing();
      this.postIllegalCourt();
      this.postJudgement();
      this.postIllegal();
    },
    destroyed() {
      window.removeEventListener('scroll', this.scrollBottom)
    },
    methods: {
      // 获取失信信息
      async postIllegalShixin(){
        let params = {
          // companyId: '00334179afa2e99e4d2932c4ae1f738c',
          companyId: sessionStorage.getItem('companyId'),
          pageNum: this.currentPage,
          pageSize: 20,
        }
        let result = await postQueryIllegalShixin(params);
        // this.shixinList = result.records;
        this.total = result.total;
        if (this.loading) {
          this.shixinList = this.shixinList.concat(result.records);
        } else {
          this.shixinList = result.records;
        }
        if (this.shixinList.length < result.total) {
          this.isEndLoading = false;
        } else {
          this.isEndLoading = true;
        }
        this.loading = false;
      },
      // 获取被执行人信息
      async postIllegalZhixing(){
        let params = {
          // companyId: '00334179afa2e99e4d2932c4ae1f738c',
          companyId: sessionStorage.getItem('companyId'),
          pageNum: this.currentzhixingPage,
          pageSize: 20,
        }
        let result = await postQueryIllegalZhixing(params);
        // this.zhixingList = result.records;
        this.zhixingTotal = result.total;
        if (this.zhixingLoading) {
          this.zhixingList = this.zhixingList.concat(result.records);
        } else {
          this.zhixingList = result.records;
        }
        if (this.zhixingList.length < result.total) {
          this.zhixingIsEndLoading = false;
        } else {
          this.zhixingIsEndLoading = true;
        }
        this.zhixingLoading = false;
      },
      // 获取限制高消费
      async postIllegalCourt(){
        let params = {
          // companyId: '00334179afa2e99e4d2932c4ae1f738c',
          companyId: sessionStorage.getItem('companyId'),
          pageNum: this.currentXiangaoPage,
          pageSize: 20,
        }
        let result = await postQueryIllegalLimit(params);
        // this.courtList = result.records;
        this.xiangaoTotal = result.total;
        if (this.xiangaoLoading) {
          this.courtList = this.courtList.concat(result.records);
        } else {
          this.courtList = result.records;
        }
        if (this.courtList.length < result.total) {
          this.xiangaoIsEndLoading = false;
        } else {
          this.xiangaoIsEndLoading = true;
        }
        this.xiangaoLoading = false;
      },
      // 获取裁判文书
      async postJudgement(){
        let params = {
          // companyId: '00334179afa2e99e4d2932c4ae1f738c',
          companyId: sessionStorage.getItem('companyId'),
          pageNum: this.currentCaipanPage,
          pageSize: 20,
        }
        let result = await postQueryIllegalJudgement(params);
        // this.judgementList = result.records;
        this.caipanTotal = result.total;
        if (this.caipanLoading) {
          this.judgementList = this.judgementList.concat(result.records);
        } else {
          this.judgementList = result.records;
        }
        if (this.judgementList.length < result.total) {
          this.caipanIsEndLoading = false;
        } else {
          this.caipanIsEndLoading = true;
        }
        this.caipanLoading = false;
      },
      // 获取法院公告
      async postIllegal(){
        let params = {
          // companyId: '00334179afa2e99e4d2932c4ae1f738c',
          companyId: sessionStorage.getItem('companyId'),
          pageNum: this.currentFayuanPage,
          pageSize: 20,
        }
        let result = await postQueryIllegalCourt(params);
        // this.illegalCourtList = result.records;
        this.fayuanTotal = result.total;
        if (this.fayuanLoading) {
          this.illegalCourtList = this.illegalCourtList.concat(result.records);
        } else {
          this.illegalCourtList = result.records;
        }
        if (this.illegalCourtList.length < result.total) {
          this.fayuanIsEndLoading = false;
        } else {
          this.fayuanIsEndLoading = true;
        }
        this.fayuanLoading = false;
      },

      returnClick() {
        this.$router.go(-1)
      },

      jumpInvolved(index) {
        if (index == 0) {
          this.$router.push({path: 'PromiseInfo'})
        } else if (index == 1) {
          this.$router.push({path: 'JudgmentDebtorInfo'})
        } else if (index == 2) {
          this.$router.push({path: 'Judgments'})
        } else if (index == 3) {
          this.$router.push({path: 'CourtAnnouncements'})
        } else if (index == 4) {
          this.$router.push({path: 'LimitSpending'})
        }
      },

      tabChange(name, title) {
        // console.log(name, title)
        this.tabIndex = name;
      },

      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 (this.tabIndex == 0) {
          if (scrollTop !== 0 && bottomOfWindow && !this.loading) {
            this.loading = true;
            this.currentPage += 1;
            this.postIllegalShixin();
          }
        } else if (this.tabIndex == 1) {
          if (scrollTop !== 0 && bottomOfWindow && !this.zhixingLoading) {
            this.zhixingLoading = true;
            this.currentzhixingPage += 1;
            this.postIllegalZhixing();
          }
        } else if (this.tabIndex == 2) {
          if (scrollTop !== 0 && bottomOfWindow && !this.caipanLoading) {
            this.caipanLoading = true;
            this.currentCaipanPage += 1;
            this.postJudgement();
          }
        } else if (this.tabIndex == 3) {
          if (scrollTop !== 0 && bottomOfWindow && !this.fayuanLoading) {
            this.fayuanLoading = true;
            this.currentFayuanPage += 1;
            this.postIllegal();
          }
        } else if (this.tabIndex == 4) {
          if (scrollTop !== 0 && bottomOfWindow && !this.xiangaoLoading) {
            this.xiangaoLoading = true;
            this.currentXiangaoPage += 1;
            this.postIllegalCourt();
          }
        }
      },

    },
  }
  </script>
  
  <style lang="less" scoped>
  
  .header-title {
    height: 46px;
    width: 100%;
    background-color: #fff;
    text-align: center;
  }
  .header-title-name {
    font-weight: bold;
    line-height: 46px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
  }
  .header-title-return {
    position: absolute;
    top: 13px;
    left: 20px;
    font-size: 15px;
  }
  .manage-body {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px 10px 0px 10px;
  }
  /deep/ .van-nav-bar__text {
    color: gray !important;
    font-weight: bold;
  }
  .icon-mg {
    margin-left: 3px;
  }
  /deep/ .van-card__thumb {
    width: 60px;
  }
  /deep/ .van-cell__value {
    bottom: 5px;
  }
  .total-num {
    float: right;
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 10px;
    font-size: 12px;
    background-color: #e9f1fd;
    color: #1989fa;
    border-radius: 50%;
    line-height: 1.4rem;
    text-align: center;
  }
  /deep/ .van-tabs__line {
    background-color: #1989fa;
  }
  </style>../../service/api/index