<template>
  <Module :loading="loading" :error="error">
    <template #title> 基础设施统计(数量)</template>
    <div class="base-struct-list" v-if="data.InfrastructureList">
      <div class="list-item-box" v-for="(item,index) in data.InfrastructureList"
        :class="{ active: activeSectionSystemName === item.name }" :key="index">
        <div class="list-item" @click="onItemClick( item)" v-waves>
          <div class="item-icon">
            <img v-if="activeSectionSystemName === item.name" :src="item.srcActive" />
            <!-- <img v-else :src="`~@/src/assets/images/${item.code}.png`" /> -->
            <img v-else :src="item.src" />
          </div>
          <!-- <svg-icon class="icon pointer-events-none" :name="'eq-' +item.code" /> -->
          <span class="item-title">{{ item.name }}</span>
          <span class="item-value">{{ item.number|| 0 }}</span>
        </div>
      </div>
    </div>

    <Empty v-else-if="!loading" />
  </Module>
</template>
<script lang="ts" setup>
import { reactive, computed, watch,ref } from "vue";
import { useStore } from "vuex";
import { key } from "@/store";
import base11 from "../assets/base11.png";
import base11AC from "../assets/base11Ac.png";
import base12 from "../assets/base12.png";
import base12AC from "../assets/base12Ac.png";
import base13 from "../assets/base13.png";
import base13AC from "../assets/base13Ac.png";
import base14 from "../assets/base14.png";
import base14AC from "../assets/base14Ac.png";
import base15 from "../assets/base15.png";
import base15AC from "../assets/base15Ac.png";
import {
  basicEq
} from "@/api/ele-control-cabin";
import { constant } from "lodash";

interface InfrastructureItem {
  src: string;
  srcActive: string;
  name: string;
  number: number;
}
const store = useStore(key);
const year = computed(() => store.state.ele?.currentTime);
const orgCode= computed(() => store.state.ele?.orgCode);
const refresh= computed(() => store.state.ele?.refresh);
let data = reactive({
  InfrastructureList: [] as InfrastructureItem[],
});

const infrastructureList:InfrastructureItem[]=[ 
   {
    src: base11,
    srcActive: base11AC,
    name: "收费系统",
    number: 0,
  },

  {
    src: base12,
    srcActive: base12AC,
    name: "监控系统",
    number: 0,
  },
  {
    src: base13,
    srcActive: base13AC,
    name: "通信系统",
    number: 0,
  },
  {
    src: base14,
    srcActive: base14AC,
    name: "供配电系统",
    number: 0,
  },
  {
    src: base15,
    srcActive: base15AC,
    name: "隧道机电系统",
    number: 0,
  }]
  data.InfrastructureList=infrastructureList
//请求数据
const getData = () => {
  basicEq({ year: year.value, ...orgCode.value }).then(res => {
    if (res.data) {
      let list:InfrastructureItem[]=[]
      infrastructureList.forEach((item: any) => {
        item.number = res.data.find((v: any) => v.text === item.name)['value']
        list.push({...item})
      })
      data.InfrastructureList.splice(0,6,...list) 
    }

  })
}
const activeSectionSystemName = computed({
  get: () => store.state.activeSectionSystemName,
  set(val: string) {
    store.commit("activeSectionSystemName", val);
  },
});
const onItemClick = (item: any) => {
  store.commit("changeSectionSystemName", item.name);
}
// 根据路段变化请求接口
watch([refresh], () => {
  getData()
});
</script>

<style lang="postcss" scoped>
.surplus-content {
  width: 200px;
  height: auto;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 1rem;
}

.base-struct-list {
  @apply w-full h-full flex flex-wrap p-0.5;
}

.list-item-box {
  /* height: 62%; */
  /* height: 190px; */
  overflow: hidden;
  @apply p-0.5 w-1/3;

  &.single {
    /* height: 38%; */
  }
}

.list-item {
  @apply relative w-full h-full cursor-pointer rounded-sm flex flex-col items-center transition-all duration-300;
  /* @apply relative w-full h-full cursor-pointer rounded-sm flex flex-col items-center justify-center transition-all duration-300; */

  &.active {
    /* border: 1px solid rgba(7, 133, 196, 1);
    background: linear-gradient(
      to left top,
      rgba(0, 59, 88, 0.3),
      rgb(7, 133, 196)
    ); */
  }
}

.active .item-title {
  background: linear-gradient(to right,
      transparent,
      rgba(255, 192, 0, 0.45),
      transparent);
  color: rgba(255, 206, 90, 1);
}

.item-title {
  font-weight: bold;
  letter-spacing: 1px;
  width: 70%;
  height: 15px;
  line-height: 15px;
  margin: auto;
  margin-top: 0;
  margin-bottom: 0.1rem;
  text-align: center;
  color: #badeff;
  font-size: 13px;
  background: linear-gradient(to right,
      transparent,
      rgba(0, 72, 137, 1),
      transparent);
}

.item-value {
  font-size: 20px;
}

.item-subtypes {
  @apply flex flex-col flex-shrink-0 w-full flex-grow px-6 py-1;
}

.item-subtype {
  @apply flex justify-between items-center;
}

.sub-point {
  @apply flex justify-between;
  width: 20px;
  /* width: 43px; */
}

.in_po {
  display: inline-block;
  width: 1px;
  height: 1px;
  border-radius: 1px;
  background: #00b4ff;
}

.sub-name {
  font-size: 13px;
  color: #badeff;
}

.sub-num {
  font-size: 14px;
  color: #60b3ff;
}

.icon {
  position: absolute;
  font-size: 60px;
  top: 0;
  height: 100%;
  color: rgba(255, 255, 255, 0.12);
}

.item-icon {
  width: 50px;
  height: 41px;
  /* margin: auto; */
  margin: 5px;
  /* background: red; */
}

.item-icon img {
  width: 100%;
  height: 100%;
}
</style>
