<template>
  <div v-for="(item,index) in getDepListLen()" :key="index">
    <a-row :gutter="[16, 16]">
      <a-col v-for="(itemIndex,k ) in item" :key="k" :span="6">
        <div style="width: 100%;height: 100%;">
          <StDepRectify v-if="depData[itemIndex]['id']" :depId="depData[itemIndex]['id']"/>
          <div style="text-align: center;">{{ depData[itemIndex]['departName'] }}</div>
        </div>
      </a-col>
    </a-row>
  </div>
  </template>
  <script lang="ts" setup>
    import StDepRectify from './StDepRectify.vue';
    import {onMounted, ref } from 'vue';
    import { problemDepList } from '../../StRectifyStaticsChart.api';
    const depData = ref([])
    onMounted(() => {
      problemDepList({}).then(rep=>{
        if(!rep){
          return
        }
        depData.value = rep
      })
    })
    function getDepListLen(){
      let data =  depData.value
      let dataLen = !!data?data.length:0
      console.log(dataLen)
      if(dataLen > 0){
        let data = []
        let page = 0
        if(dataLen%4!=0){
          page = dataLen/4+1
        }else{
          page = dataLen/4
        }
        for(var i=0;i<page;i++){
            let item = []
            for(var j =i*4;j<(i+1)*4 && j<dataLen;j++){
              item.push(j);
            }
            data.push(item)
           }
        return data
      }
      return [];
    }
  </script>
