<template>
  <!-- <PageWrapper> -->
    <div style="display: flex;justify-content: center;align-items: center;margin: 70px 20px 0 20px;">
      <div class="lg:w-3/9 w-full !mr-4 enter-y" style="min-width: 450px;">
        <DynamicInfo :loading="loading" title="待办事项" :urls="'待办事项'" @moreClck="moreClck" class="enter-y" :dynamicInfoItems="dbData"/>
      </div>
      <div class="lg:w-3/9 w-full !mr-4 enter-y" style="min-width: 450px;">
        <DynamicInfo :loading="loading" title="已办事项" :urls="'已办事项'" @moreClck="moreClck" class="enter-y" :dynamicInfoItems="ybData"/>
      </div>
      <div class="lg:w-3/9 w-full enter-y" style="min-width: 450px;">
        <DynamicInfo :loading="loading" title="通知消息" :urls="'通知消息'" @moreClck="moreClck" class="enter-y" :dynamicInfoItems="tzData"/>
      </div>
    </div>
  <!-- </PageWrapper> -->
  <Modal @register="register"  :title="title" :canFullscreen="false"/>
</template>
<script lang="ts" setup>
  import { ref,reactive } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import DynamicInfo from './components/DynamicInfo.vue';
  import Modal from './components/modal.vue';
  import { useModal } from '/@/components/Modal';
  import { getDblist } from "./api";
  const [register, { openModal }] = useModal();
  const loading = ref(true);
  let dbData = reactive({})
  let ybData = reactive({})
  let tzData = reactive({})
  let title = ref('')
  async function init() {
    // 请求接口
    let result1 = await getDblist({type:1,pageNo:1,pageSize:15});//代办事项
    let result2 = await getDblist({type:2,pageNo:1,pageSize:15});//已办事项
    let result3 = await getDblist({type:3,pageNo:1,pageSize:15});//通知消息
    dbData = result1?.records
    ybData = result2?.records
    tzData = result3?.records
    loading.value = false;
  };
  init()
  function moreClck(val) {
    title.value = val
    openModal(true, {
      record:{val},
      isUpdate:false,
    });
  }
</script>
