<template>
  <div class="cardList" v-if="statisticsData.projectTypeCount.length">
    <div class="typeList">
      <div class="type" v-for="item in statisticsData.projectTypeCount">
        <p>{{ item.typeName }}</p>
        <div class="count_box">
          <div class="icon">
            <img v-if="iconMap.get((item.typeName.slice(item.typeName.length-2,item.typeName.length)))" :src="iconMap.get((item.typeName.slice(item.typeName.length-2,item.typeName.length))) || ''" alt="" />
            <img v-else :src="iconMap.get('其他') || ''" alt="" />

          </div>
          <div class="count">{{ item.typeCount }}个</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getExemptItemProjectStatistics } from '@/api/project/exemptionList'
import { onMounted, reactive, nextTick } from 'vue'
import { iconMap } from './map'
const statisticsData = reactive({
  projectTypeCount: []
})
const getData = async (callback) => {
  const res = await getExemptItemProjectStatistics()
  if(res?.code !== 200) return
  console.log(res)
  statisticsData.projectTypeCount = res.data || []
  nextTick(() => {
    callback && callback()
  })
}

onMounted(() => {
  // getData()
})
defineExpose({
  getData
})
</script>

<style lang="scss" scoped>
  .cardList {
    height: 92px;

    .typeList {
      display: flex;
      // margin-top: 10px;
      .type {
        max-width: 200px;
        flex: 1;
        padding: 10px 15px;
        box-shadow: 0px 2px 6px 0px rgba(28, 52, 92, 0.1);
        font-size: 18px;
        margin-right: 10px;
        &:last-of-type {
          margin-right: 0;
        }
        p {
          margin-top: 0;
          margin-bottom: 10px;
          text-align: center;
        }
        .count_box {
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: space-around;
          padding: 0 20px;
          .icon {
            width: 32px;
            height: 32px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>