<template>
    <BasicModal @register="registerModal" :title="title" width="50%" :showOkBtn="false">
      <a-spin :spinning="loading">
        <VScroll :itemHeight="41" :items="dynamicInfoItems" :height="333" @scroll="simpleDebounce(scrolling($event),3000)">
            <template #default="{ item }">
              <a-row @click="toPage(item.wrdkid)" class="listBox">
                  <a-col :span="2" class="listItem">
                    <span class="listRadio"></span>
                  </a-col>
                  <a-col :span="9" class="listItem listBody" :title=" item.wrdkmc">{{ item.wrdkmc }}</a-col>
                  <a-col :span="4" class="listItem"  :title="item.scjdmc">{{ item.scjdmc}}</a-col>
                  <a-col :span="3" class="listItem"  :title="item.tbjdmc">{{ item.tbjdmc }}</a-col>
                  <a-col :span="6" class="listItem listTime" :title="item.createTsamp">{{ item.createTsamp?item.createTsamp:'暂无时间' }}</a-col>
                </a-row>
            </template>
      </VScroll>
      <a-divider dashed="true" v-if="bottom" style="border-color: #999999;color:#99999;font-size:12px">我也是有底线的</a-divider>
      </a-spin>
    </BasicModal>
  </template>
  <script lang="ts" setup>
    import { defineComponent,ref,reactive } from 'vue';
    import { BasicModal,useModalInner } from '/@/components/Modal';
    import { VScroll } from '/@/components/VirtualScroll/index';
    import { useRouter } from 'vue-router';
    import { getDblist } from "../api";
    import { simpleDebounce } from '/@/utils/common/compUtils';

    let router = useRouter();
    let dynamicInfoItems = ref([])
    const loading = ref(true);
    let pageNo = ref(1)
    let type = ref(0)
    let pages = ref(0)
    const props = defineProps({
        title:{
            type:String,
            default:'更多',
        },
    })
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) =>{
        switch (data.record.val) {
            case '待办事项':
              type.value = 1
              break;
            case '已办事项':
              type.value = 2
              break;
            case '通知消息':
              type.value = 3
              break;
        }
        // 重置状态
        loading.value = true
        pageNo.value = 1
        dynamicInfoItems.value = []
        // 请求接口赋值
        let result = await getDblist({type:type.value,pageNo:pageNo.value,pageSize:15})
        dynamicInfoItems.value = result?.records
        pages.value = result?.pages
        loading.value = false
    });
    function toPage(val) {
        // 增加传参id 跳转评审页面打开新窗口
        // const url = router.resolve({
        // path: `/directory/mlzk/land/modules/Plans`,
        // query:{
        //     id:val,
        //     scjdbm:'S2'
        // }
        // })
        // window.open(url.href, '_blank')
   }
  const bottom = ref(false)
  async function scrolling(e) {
     const clientHeight = e.target.clientHeight
     const scrollHeight = e.target.scrollHeight
     const scrollTop = e.target.scrollTop
     if (scrollTop + clientHeight >= scrollHeight - 5) {
       bottom.value = true
       loading.value = true
      if(pageNo.value >=  pages.value){
        // bottom.value = true
       loading.value = false
      }else{
        pageNo.value = pageNo.value + 1
        let result = await getDblist({type:type.value,pageNo:pageNo.value,pageSize:15})
        dynamicInfoItems.value = dynamicInfoItems.value.concat(result?.records)
       loading.value = false
        bottom.value = false
      }
     } else {
       bottom.value = false
     }
   }
  </script>
  
<style scoped>
.listBox:nth-child(2n){
  background: rgba(232,232,232,.27);
}
.listBox:hover{
  background: rgba(232,232,232,.27);
}
.listItem{
  text-align:center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space:nowrap;
  font-size: 13px;
  color: #272727;
  cursor:pointer;
  padding: 10px 0;
}
.listRadio{
  display: inline-block;
  background-color: #1CA4FF;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.listBody{
  text-align:left;
}
.listTime{
  color: #999999;
}
</style>
  