<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: 100%;
  width: 460px;
  height: 310px;
  background: #004565;
  opacity: 0.8;

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

    .ConstruListA {
      margin-left: 10px;
      flex-basis: 200px;
      width: 45%;
      height: 65px;
      background: url('@/assets/newImgs/HMScreen/1452.png') no-repeat;
      background-size: 100% 100%;

      margin-top: 10px;
      display: flex;
    }
  }
}
.ConstruIcon {
  width: 30%;
  height: 64px;
  // border: 1px solid #0096e7;
  .Icon_zp {
    width: 40px;
    height: 40px;
    // background: red;
    margin: 15px 10px;
  }
  // background-image: linear-gradient(#004891, #3f80e7);
}
.ConstruNr {
  width: 70%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .ellipsis {
    padding: 5px;
    width: 80%;
    // background: red;
  }
  .NumA {
    width: 20%;
    font-size: 20px;
    color: #48fff0;
    // background: lawngreen;
  }
  // background: goldenrod;
}
.activeConstruListA {
  color: #cbc05a;
  border: 1px solid #cbc05a;
}
</style>