<template>
  <PageWrapper dense>
    <div>
      <Row :gutter="[16, 16]">
        <Col v-for="(item, index) in growCardList" :key="item.title" :span="6">
          <Card size="small" :loading="loading" :title="item.title" @click="handleClickCard(item)">
            <template #extra>
              <!-- <Tag :color="item.color">{{ item.action }}</Tag> -->
            </template>

            <div class="py-2 px-4 flex justify-between items-center">
              <CountTo prefix="" :startVal="1" :endVal="item.value" class="text-3xl" />
              <Image :preview="false" :src="item.src" :width="60" :height="60"></Image>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
    <!-- <commonTableModal
      ref="commonTableModalRef"
      v-model:commonObj="commonObj"
      v-model:columns="columns"
    ></commonTableModal> -->
    <OverTimeEleModal @register="registerModal"></OverTimeEleModal>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { CountTo } from '@/components/CountTo';
import { Card, Row, Col, Image } from 'ant-design-vue';
import { growCardList } from '../data';
import { reactive, ref, onMounted } from 'vue';
import { homeList } from '@/api/basicInfo/elevator';
import OverTimeEleModal from './overTimeEleModal.vue';
import { useModal } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
defineProps({
  loading: {
    type: Boolean,
  },
});
const commonTableModalRef = ref<any>(null);
interface commonObj {
  title: string;
}
const commonObj: commonObj = reactive({
  title: '',
});
const expiredEleNumList = ref<any>(null);
const overdueEleNumList = ref<any>(null);
const [registerModal, { openModal }] = useModal();
function handleClickCard(data) {
  if (!data.canClick) {
    return;
  }
if(expiredEleNumList.value.length<=0||overdueEleNumList.value.length<=0){
  const { createMessage } = useMessage();
  createMessage.warn('当前无可查看电梯');
  return
}
  // commonObj.title = data.title.replace("数 (部)", "");
  openModal(true, {
    arrayPass: data.key === 'expiredMainEleNum' ? expiredEleNumList.value : overdueEleNumList.value,
  });
}
onMounted(async () => {
  const res = await homeList({});
  console.log(res, growCardList, 'ressss');
  expiredEleNumList.value = res.expiredEleNumList;
  overdueEleNumList.value = res.overdueEleNumList;
  growCardList.map((item) => {
    item.value = res[item.key];
  });
});
</script>
<style lang="less" scoped>
/deep/.ant-card-body {
  padding: 0 !important;
}
</style>
