<script setup lang="ts">
let pageTitle: any = ref("HOTKING-个人中心-发票资料");
useHead(() => ({
  title: pageTitle.value,
}));
const user = useUserStore();
user.value.adminTitle = "发票资料";
import { useAll } from "~/api/pubAll/service";
const { getUserInvoice } = useAll();
import empty from "@/assets/img/empty.svg";
import type msgListQuery from "~/api/msg/msgQuery";
import { useMsg } from "~/api/msg/msgService";
const { getMsgList, getMsgSummary } = useMsg();
import type msgType from "~/domain/Msg";
import { DefaultQuery, pageSizes } from "~/domain/query";
const adminListStore = useAdminListStore();
const route = useRoute();
let loading = ref(false);
let isEnd = ref(false);
let isFirst = ref(true);
let isFetching: any = ref(false);
let total = ref(0);
const pageData: Ref<any[]> = ref([]);

const query: Ref<any> = ref({
  pageNum:1,
  pageSize:10
});
async function getUserInvoiceFun() {
  if (isFetching.value) return;
  isFetching.value = true;
  const res: any = await getUserInvoice();
  if (res.httpCode == 200) {
    setTimeout(() => {
      pageData.value.push(res.data);
      query.value.pageNum++;
      total.value = 1;
      loading.value = false;
      isEnd.value = true;
    }, 300);
  }
  setTimeout(() => {
    isFirst.value = false;
  }, 300);
  setTimeout(() => {
    isFetching.value = false;
  }, 500);
}
function linkTo(item:any) {
  navigateTo({
    path: "/home/user/invoice/edit",
    query:{item:JSON.stringify(item)}
  });
}
onMounted(() => {
  loading.value = true;
  getUserInvoiceFun();
});
// 滚动事件处理函数
const isBottom = ref(false); // 用于标记是否到底部
const onScroll = debounce((event: any) => {
  if (isFirst.value) {
    return;
  }
  const scrollTop = window.scrollY || document.documentElement.scrollTop; // 当前滚动位置
  const clientHeight = document.documentElement.clientHeight; // 可视区域高度
  const scrollHeight = document.documentElement.scrollHeight; // 整个文档高度
  // 判断是否滚动到底部（允许 10px 的偏差）
  isBottom.value = scrollTop + clientHeight >= scrollHeight - 100;
  if (isBottom.value) {
    if (
      !loading.value &&
      !isEnd.value &&
      user.value.isLogin &&
      !isFetching.value
    ) {
      getUserInvoiceFun();
    }
  }
}, 500); // 设置200ms的防抖时间

const navType: any = ref(1);
const navClick = (keys: any) => {
  navType.value = keys;
  loading.value = true;
  query.value.pageNum = 1;
  isEnd.value = false;
  pageData.value = [];
  window.scrollTo({
    top: 0,
    behavior: "smooth", // 平滑滚动
  });
  getUserInvoiceFun();
};
</script>
<template>
  <div class="admin-boxs-bg">
    <div class="admin-wrap bill-wrap">
      <div class="storehouse-nav-box">
        <ul class="storehouse-nav">
          <li @click="navClick(1)" :class="{'current':navType == 1}">
            <span>公司发票</span>
          </li>
          <li @click="navClick(2)" :class="{'current':navType == 2}">
            <span>个人发票</span>
          </li>
        </ul>
      </div>
      <div class="address-con" v-loading="loading">
        <ul class="item-ul">
          <li class="item-li" v-for="(item,idx) in pageData" :key="idx" @click="linkTo(item)">
            <h3>{{item.openName}}<i v-if="idx==0">默认</i></h3>
            <div class="address">{{item.openTaxpayer}}</div>
          </li>
        </ul>
        <img class="loading" src="@/assets/img/ico/loading.gif" v-if="!isEnd && user.isLogin && !isFirst && pageData.length>0" />
        <template v-if="pageData.length<1 && isEnd">
          <el-empty description=" " :image="empty" :image-size="350">
            <div class="noContent">
              没有数据
            </div>
          </el-empty>
        </template>
        <p class="loading-text" v-else-if="isEnd && user.isLogin">--&nbsp;已经到底了&nbsp;--</p>
      </div>
    </div>
    <div class="buy-btn-wrap">
      <el-button class="btn_main">
        +新增开票资料
      </el-button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.bill-wrap {
  background: #f7f7f7;
  padding-bottom: 124px;
  :deep(.el-loading-mask) {
    top: 150px;
  }
  .bill-con {
    padding: 12px 12px 1px;
  }
  .storehouse-nav {
    display: flex;
    justify-content: space-between;
    height: 40px;
    background: #fff;
    margin-bottom: 12px;
    li {
      width: 50%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      &.current {
        span {
          color: $mainColor;
          &::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background: $mainColor;
            bottom: 2px;
            left: 0;
          }
        }
      }
      span {
        font-size: 16px;
        width: max-content;
        position: relative;
        padding: 0 6px;
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
.buy-btn-wrap {
  display: flex;
  position: fixed;
  bottom: 54px;
  background: #fff;
  width: 100%;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  left: 0;
  padding: 0 30px;
  z-index: 1;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.1);
  .btn_main {
    border-radius: 25px !important;
    flex: 1;
    height: 42px !important;
    &.is-disabled {
      background: #e9e9e9;
      color: #fff;
    }
  }
}
.item-li {
  background: #fff url(@/assets/img/icon/edit.svg) no-repeat right 12px center;
  background-size: 20px auto;
  padding: 6px 12px 10px 12px;
  border-radius: 4px;
  position: relative;
  & + .item-li {
    margin-top: 12px;
  }
  .address {
    font-size: 12px;
    color: #666;
    padding-right: 25px;
  }
  h3 {
    font-size: 14px;
    position: relative;
    line-height: 26px;
    font-weight: bold;
    margin-bottom: 3px;
    color: #333;
    display: flex;
    align-items: center;
    span {
      font-weight: 400;
      color: #666;
      display: flex;
      align-items: center;
      margin-left: 10px;
    }
    i {
      border: 1px solid $mainColor;
      font-size: 10px;
      font-style: normal;
      height: 16px;
      display: flex;
      align-items: center;
      color: $mainColor;
      padding: 0 3px;
      margin-left: 15px;
    }
  }
}
</style> 
