<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)" 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 { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { VScroll } from '/@/components/VirtualScroll/index';
  import { useRouter } from 'vue-router';
  import { getDblist } from '../api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { simpleDebounce } from '/@/utils/common/compUtils';
  import { getMenus } from '/@/router/menus';
  import menusStore from '/@/store/menu';

  let router = useRouter();
  let dynamicInfoItems = ref([]);
  const loading = ref(true);
  let pageNo = ref(1);
  let type = ref(0);
  let pages = ref(0);
  const { createMessage } = useMessage();
  defineProps({
    title: {
      type: String,
      default: '更多',
    },
  });
  const [registerModal, {}] = 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;
  });
  const dkMenus = ref();
  async function genMenus() {
    const res = await getMenus();
    res.forEach((v: any) => {
      if (v.title == '地块管理') {
        dkMenus.value = v;
      }
    });
  }
  genMenus();
  const menus = menusStore();
  function toPage(val) {
    const actions = {
      地块调查: {
        path: `/dkgl/investigate/modal/ViewData`,
        condition: (val) => !!val.wrdkid,
        query: {
          wrdkid: val.wrdkid,
        },
      },
      风险评估: {
        path: `/dkgl/fxpg/ViewDetail`,
        condition: (val) => !!val.wrdkid,
        query: {
          wrdkid: val.wrdkid,
        },
      },
      风险管控: {
        path: `/dkgl/fxgk/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      风险管控效果评估: {
        path: `/dkgl/gkpg/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      修复: {
        path: `/dkgl/repair/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      修复效果评估: {
        path: `/dkgl/xfpg/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
      管控及修复: {
        path: `/dkgl/gkxf/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm && !!val.scjdmc,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
          scjdmc: val.scjdmc,
        },
      },
      管控及修复效果评估: {
        path: `/dkgl/gkxfpg/DetailList`,
        condition: (val) => !!val.tbjdmc && !!val.tbjdbm,
        query: {
          wrdkid: val.wrdkid,
          type: val.tbjdmc,
          jdnzt: val.tbjdbm,
        },
      },
    };

    const action = val.scjdmc;
    if (actions[action]) {
      if (actions[action].condition(val)) {
        // const url = router.resolve({
        //   path: actions[action].path,
        //   query: actions[action].query
        // })
        // window.open(url.href, '_blank')
        menus.setMenus(dkMenus.value);
        router.push({
          path: actions[action].path,
          query: actions[action].query,
        });
      } else {
        createMessage.info('暂未开展调查');
      }
    } else {
      createMessage.info('暂未开展调查');
    }
  }
  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, 0.27);
  }

  .listBox:hover {
    background: rgba(232, 232, 232, 0.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>
