<script setup lang="ts">
let pageTitle: any = ref("HOTKING-个人中心-我的BOM");
useHead(() => ({
  title: pageTitle.value,
}));
const user = useUserStore();
user.value.adminTitle = "我的BOM";
import empty from "@/assets/img/empty.svg";
import { useAll } from "~/api/pubAll/service";
const { messagePage, batchMessageIsRead, get_bom_order, del_bom_order } =
  useAll();
import { showLoadingToast, closeToast } from "vant";
import type msgListQuery from "~/api/msg/msgQuery";
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);
let open: any = ref({
  detail: false,
});
let detailInfo: any = ref({});
const pageData: any = ref([]);
const defaultSort = { prop: "createTime", isAsc: "descending" };
const defaultQuery = () => {
  const q = new DefaultQuery({
    orderByColumn: defaultSort.prop,
    isAsc: defaultSort.isAsc,
  }) as msgListQuery;
  q.pageSize = 10;
  return q;
};
const query: any = ref({ pageNum: 1, pageSize: 10 });
async function getBomOrder() {
  if (isFetching.value) return;
  isFetching.value = true;
  const q = JSON.parse(JSON.stringify(query.value));
  const res: any = await get_bom_order(q);
  if (res.httpCode == 200) {
    setTimeout(() => {
      if (query.value.pageNum == 1) {
        pageData.value = res?.data?.records;
      } else {
        res?.data?.records?.forEach((item: msgType) => {
          pageData.value.push(item);
        });
      }
      query.value.pageNum++;
      total.value = res.data.total;
      loading.value = false;
      if (
        res?.data?.records.length == 0 ||
        pageData.value.length == res.data.total ||
        res?.data?.records.length < query.value.pageSize
      ) {
        isEnd.value = true;
      }
    }, 300);
  }
  setTimeout(() => {
    isFirst.value = false;
  }, 300);
  setTimeout(() => {
    isFetching.value = false;
  }, 500);
}
function linkTo(item: any) {
  if(item.distribution!=1) return 
  navigateTo({
    path: "/match",
    query:{id:item.id}
  });
}
async function batchMessageIsReadFun(item: any) {
  console.log(11111)
}
onMounted(() => {
  loading.value = true;
  getBomOrder();
  window.addEventListener("scroll", onScroll);
});
onUnmounted(() => {
  window.removeEventListener("scroll", onScroll);
});
// 滚动事件处理函数
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
    ) {
      getBomOrder();
    }
  }
}, 500); // 设置200ms的防抖时间
function calcTime(val: any) {
  return val.substr(0, val.length - 2);
}
function delFunDialog(item: any) {
  ElMessageBox.confirm("确定删除这个物料清单吗？", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      delBomOrder(item);
    })
    .catch(() => {
      // catch error
    });
}
async function delBomOrder(item: any) {
  const toast = showLoadingToast({
    message: "",
    forbidClick: true,
    duration: 0,
  });
  const res: any = await del_bom_order({ id: item.id });
  toast.close();
  if (res.httpCode == 200) {
    loading.value = false;
    isEnd.value = false;
    isFetching.value = false;
    query.value.pageNum = 1;
    getBomOrder();
    ElMessage.success(res.message);
  }
}
onBeforeUnmount(() => {
  adminListStore.value.msgListData.data = pageData.value;
  adminListStore.value.msgListData.query = query.value;
  adminListStore.value.msgListData.scrollPosition =
    document.documentElement.scrollTop;
  adminListStore.value.msgListData.loading = isEnd.value;
});
</script>
<template>
  <div class="admin-boxs-bg">
    <div class="admin-wrap bom-wrap" v-loading="loading">
      <ul class="message-ul">
        <li class="message-li unread" v-for="item in pageData" :key="item.id" @click="linkTo(item)">
          <h3>{{ item.name }}</h3>
          <div class="message-describe"></div>
          <p>{{calcTime(item.createTime)}}</p>
          <div class="opt">
            <i class="sc" @click.stop="delFunDialog(item)"></i>
          </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>
</template>
<style scoped lang="scss">
.bom-wrap {
  padding: 12px 12px 66px;
  background: #f7f7f7;
}
.message-li {
  background: #fff;
  padding: 12px 40px 10px 12px;
  border-radius: 4px;
  position: relative;
  & + .message-li {
    margin-top: 12px;
  }
  .message-describe,
  h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 20px;
    color: #999;
  }
  h3 {
    -webkit-line-clamp: 1;
    font-size: 14px;
    position: relative;
    line-height: 22px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    line-height: 20px;
    color: #999;
    margin-top: 5px;
  }
  &.unread {
    h3 {
      color: #333;
    }
    .message-describe {
      color: #666;
    }
    &::before {
      content: "";
      width: 6px;
      height: 6px;
      background: $mainColor;
      border-radius: 50%;
      position: absolute;
      top: 19px;
      left: 8px;
      display: none;
    }
  }
  .opt {
    display: flex;
    position: absolute;
    right: 0;
    flex-direction: column;
    top: 0;
    bottom: 0;
    margin: auto;
    height: max-content;
    width: 44px;
    z-index: 2;
    i {
      width: 44px;
      height: 40px;
      &.edit {
        background: url(@/assets/img/icon/edit.svg) no-repeat center center;
        background-size: 28px auto;
      }
      &.sc {
        background: url(@/assets/img/icon/del.svg) no-repeat center center;
        background-size: 20px auto;
      }
    }
  }
}
</style> 
