<template>
  <div class="static-data p-2">
    <Module
      :loading="loading"
      :error="error"
      :info="bsMeta && bsMeta['utilities']"
    >
      <template #title>静态统计数据</template>
      <div class="p-2.5 flex flex-wrap" v-if="arr">
        <div
          class="list-item-box"
          :class="{ single: !item.children }"
          v-for="item in baseStructInfo"
          :key="item.code"
        >
          <div
            class="list-item"
            @click="activeBaseStruct = item.code"
            :class="{ active: activeBaseStruct === item.code }"
            v-waves
          >
            <div class="item-icon">
              <img
                v-if="activeBaseStruct === item.code"
                :src="imgslist.value[item.code + 'Act']"
              />
              <!-- <img v-else :src="`~@/src/assets/images/${item.code}.png`" /> -->
              <img v-else :src="imgslist.value[item.code]" />
            </div>
            <!-- <svg-icon class="icon pointer-events-none" :name="'eq-' +item.code" /> -->
            <template v-if="!childrenData[item.key]">
              <span class="item-title">{{ item.name }}</span>
              <span class="item-value">{{
                arr ? formatThousand(arr[item.key] || 0) : '-'
              }}</span>
            </template>
            <template v-else>
              <span class="item-title">{{ item.name }}</span>
              <span class="item-value">{{
                arr ? formatThousand(arr[item.key] || 0) : '-'
              }}</span>
              <ul class="item-subtypes">
                <li
                  class="item-subtype"
                  v-for="subItem in childrenData[item.key]"
                  :key="subItem.key"
                >
                  <span class="sub-name">{{ subItem.type }}</span>
                  <span
                    class="sub-point"
                    v-if="subItem.type && subItem.type.length < 4"
                  >
                    <span v-for="i in 4" :key="i" class="in_po"></span>
                  </span>
                  <span class="sub-num">{{
                    formatThousand(subItem.count)
                  }}</span>
                </li>
              </ul>
            </template>
          </div>
        </div>
      </div>
      <Empty v-else />
    </Module>
    <event-datas></event-datas>
  </div>
</template>

<script lang="ts" setup>
import { eventDatas } from "../eventDatas";
import { genConfig } from '@/utils/request';
import { useRequest } from 'vue-request';
import { computed, defineProps, watch, reactive } from 'vue';
import { useStore } from 'vuex';
import { key } from '@/store';
import { baseStructInfo } from '@/store/state';
import { formatThousand } from '@/utils/util';
import stat from '@/assets/images/baseStruct/stat.png';
import statAct from '@/assets/images/baseStruct/stat-active.png';
import area from '@/assets/images/baseStruct/area.png';
import areaAct from '@/assets/images/baseStruct/area-active.png';
import gantry from '@/assets/images/baseStruct/gantry.png';
import gantryAct from '@/assets/images/baseStruct/gantry-active.png';
import brg from '@/assets/images/baseStruct/brg.png';
import brgAct from '@/assets/images/baseStruct/brg-active.png';
import tunnel from '@/assets/images/baseStruct/tunnel.png';
import tunnelAct from '@/assets/images/baseStruct/tunnel-active.png';
import route from '@/assets/images/baseStruct/route.png';
import routeAct from '@/assets/images/baseStruct/route-active.png';
import * as businessApi from '@/api/businessOverview';

const imgslist = reactive({
  value: {
    stat: stat,
    statAct: statAct,
    area: area,
    areaAct: areaAct,
    gantry: gantry,
    gantryAct: gantryAct,
    brg: brg,
    brgAct: brgAct,
    tunnel: tunnel,
    tunnelAct: tunnelAct,
    route: route,
    routeAct: routeAct,
  },
});

const store = useStore(key);
const activeCom = computed(() => store.state.activeCom);
const bsMeta = computed(() => store.getters.bsMeta);

const activeBaseStruct = computed({
  get: () => store.state.activeBaseStruct,
  set(val: string) {
    store.commit('changeBaseStruct', val);
  },
});
// const { data, loading, error, refresh } = useRequest<any>(() =>
//   genConfig(
//     `/http-server-yygl/publish/jsc/baseStruct${
//       activeCom.value !== 'list' ? '?com=' + activeCom.value : ''
//     }`
//   )
// );
const getValue = (value: any, key: any) => {
  const result = value && (value as Array<any>)[0] && (value as Array<any>)[0][key];
  return result;
};
const stationCount = useRequest<any>(() => businessApi.getStationCount(0));
const serviceAreaCount = useRequest<any>(() => businessApi.getServiceAreaCount(0));
const tunnelCount = useRequest<any>(() => businessApi.getTunnelCount(0, 0));
const bridgeCount = useRequest<any>(() => businessApi.getBridgeCount(0, 0));
const summaryGateorlane = useRequest<any>(() => businessApi.getSummarygateorlane(0));
const arr = computed(() => {
  const stationCountValue = stationCount.data.value?.msgContent;
  const serviceAreaCountValue = serviceAreaCount.data.value?.msgContent;
  const tunnelCountValue = tunnelCount.data.value?.msgContent;
  const bridgeCountValue = bridgeCount.data.value?.msgContent;
  const summaryGateorlaneValue = summaryGateorlane.data.value?.msgContent;
  const result = {
    tollStatNums: getValue(stationCountValue, 'stationCount'),
    serviceStatNums: getValue(serviceAreaCountValue, 'areaCount'),
    tunnelCount: getValue(tunnelCountValue, 'tunnelCount'),
    bridgeCount: getValue(bridgeCountValue, 'bridgeCount'),
    gantry: getValue(summaryGateorlaneValue, 'gatesummarysum'),
    lanesSum: getValue(summaryGateorlaneValue, 'lanessum'),
  };
  return result;
});
const childrenData= [];
// const tunnelTypeData = useRequest<any>(() => businessApi.getTunnelCount(0, 1));
// const bridgeTypeData = useRequest<any>(() => businessApi.getBridgeCount(0, 1));
// 下标数据
// const childrenData = computed(() => {
//   const tunnelTypeDataValue = tunnelTypeData.data.value?.msgContent;
//   const bridgeTypeDataValue = bridgeTypeData.data.value?.msgContent;
//   const summaryGateorlaneValue = summaryGateorlane.data.value?.msgContent;
//   const bridgeCount = new Array();
//   const tunnelCount = new Array();
//   const lanesCount = [
//     { type: 'ETC', count: getValue(summaryGateorlaneValue, 'etclanessum') },
//     { type: '混合车道', count: getValue(summaryGateorlaneValue, 'mixedlanessum') },
//   ];
//   tunnelTypeDataValue &&
//     (tunnelTypeDataValue as Array<any>).forEach((item: any) => {
//       tunnelCount.push({ count: item.tunnelCount, type: item.tunnelType });
//     });
//   bridgeTypeDataValue &&
//     (bridgeTypeDataValue as Array<any>).forEach((item: any) => {
//       bridgeCount.push({ count: item.bridgeCount, type: item.bridgeType });
//     });
//   return {
//     tunnelCount: tunnelCount,
//     bridgeCount: bridgeCount,
//     lanesSum: lanesCount,
//   };
// });
// watch(activeCom, refresh);

// const arr = computed(() => {
//   const msgContent = data.value?.msgContent;
//   const result = msgContent && (msgContent as Array<any>)[0];
//   return result;
// });
</script>

<style lang="postcss" scoped>
.list-item {
  width: 33%;
}
.item-icon {
  width: 50px;
  height: 41px;
  margin: auto;
  /* background: red; */
}
.item-icon img {
  width: 100%;
  height: 100%;
}
.item-title {
  font-weight: bold;
  letter-spacing: 1px;
  width: 60%;
  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 {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.static-data {
  /* background: rgba(5, 15, 45, 0.5); */
  position: absolute;
  top: 50px;
  right: 0;
  width: 349px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.map-model {
  @apply p-0.5;
}
.label {
  @apply font-normal;
  font-size: 12px;
  color: #07ffed;
}
.label2 {
  font-size: 16px;
  color: rgba(213, 251, 255, 1);
}
.label3 {
  font-size: 13px;
}
.base-struct-list {
  @apply w-full h-full flex flex-wrap p-0.5;
}

.list-item-box {
  /* height: 62%; */

  @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: 60%;
  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>
