<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import ConverterCard from './converterCard.vue';
import { IInfoCard } from '@/model/System/power-interface';
import { deepClone } from '@/utils/utils';
import { getPowerConverter } from '../../services/power.services';
import { loading } from '@/utils/composition';
let infoList: IInfoCard[] = reactive([]);
const pageLoaded = ref(false);
// 初始化
function init() {
  loading(true);
  infoList.splice(0);
  getPowerConverter()
    .then(res => {
      loading(false);
      res?.data?.SupplyList?.forEach((item: any) => {
        const obj = deepClone(item);
        infoList.push(obj);
      });
    })
    .finally(() => {
      loading(false);
      pageLoaded.value = true;
    });
}
onMounted(() => {
  init();
});
</script>
 
<template>
  <div v-if="pageLoaded" class="page-box">
    <div class="info-list">
      <ConverterCard v-for="item in infoList" :key="item.id" :data="item"></ConverterCard>
    </div>
  </div>
</template>
 
<style lang="scss" scoped>
.page-box {
  .info-list {
    display: flex;
    flex-wrap: wrap;
 
    .card-box {
      margin-top: 16px;
      margin-right: 16px;
    }
  }
}
</style>