<template>
  <!-- 项目类型 -->
  <div class="partTitleHM">项目类型</div>
  <div class="ConstrucClass">
    <div class="ConstruList">
      <div
        class="ConstruListA"
        :class="{ activeConstruListA: listActive.typeName == item.typeName }"
        v-for="item in list"
        @click="ProjectClick(item)"
      >
        <div class="ConstruIcon">
          <img class="Icon_zp" :src="getIcon(item.typeName)" alt="" />
        </div>
        <div class="ConstruNr">
          <p class="ellipsis" :title="item.typeName">{{ item.typeName }}</p>
          <p class="NumA">{{ item.typeCount }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import bus from '@/bus';
import { getProjectStatistics } from '@/api/sponeScreen/gcpjApi.js';
import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
import drainage from '@/assets/newImgs/HMScreen/drainage_icon.png';
import else_icon from '@/assets/newImgs/HMScreen/else_icon.png';
import GIS_icon from '@/assets/newImgs/HMScreen/GIS_icon.png';
import park from '@/assets/newImgs/HMScreen/park_icon.png';
import pipe from '@/assets/newImgs/HMScreen/pipe_icon.png';
import pipepumping from '@/assets/newImgs/HMScreen/pipepumping_icon.png';
import road from '@/assets/newImgs/HMScreen/road_icon.png';
const list = ref([]);
const listActive = ref([]);
const obj = {
  海绵建筑与社区: Architectural,
  海绵型道路广场: road,
  海绵型公园绿地: park,
  海绵型水系: drainage,
  管网排查与修复: pipe,
  管网及泵站: pipepumping,
  GIS平台建设与监测设施: GIS_icon,
  全部: else_icon,
  其他: else_icon,
};
const getIcon = name => {
  return obj[name];
};
async function getProjectStatisticsM() {
  let {
    data: { projectTypeCount },
    code,
  } = await getProjectStatistics();
  if (code == 200) {
    const typeCount = projectTypeCount.reduce((n, v) => {
      return n + v.typeCount;
    }, 0);
    list.value = projectTypeCount;
    list.value.unshift({ typeName: '全部', typeCount, all: 1 });
  }
}
const ProjectClick = i => {
  listActive.value = i;
  bus.emit('getProjectList', i);
};
getProjectStatisticsM();
</script>

<style lang="scss" scoped>
.ConstrucClass {
  width: 460px;
  background: #004565;
  opacity: 0.8;
  padding-bottom: 10px;

  .ConstruList {
    width: 95%;
    margin: auto;
    display: flex;
    flex-flow: row wrap;

    .ConstruListA {
      margin-left: 10px;
      width: 45%;
      height: 45px;
      background: url('@/assets/newImgs/HMScreen/1452.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
      display: flex;
    }
  }
  .ConstruIcon {
    width: 30%;
    height: 45px;
    .Icon_zp {
      width: 35px;
      height: 35px;
      margin: 5px 10px;
    }
  }
  .ConstruNr {
    width: 70%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ellipsis {
      padding: 5px;
      width: 80%;
    }
    .NumA {
      width: 20%;
      font-size: 20px;
      color: #48fff0;
    }
  }
  .activeConstruListA {
    color: #cbc05a;
    border: 1px solid #cbc05a;
  }
}
</style>