<template>
  <Module class :loading="loading" :error="error" :info="bsMeta && bsMeta['utilities']">
    <template #title>基础设施统计(数量)</template>
    <div class="base-struct-list" v-if="arr">
      <div class="list-item-box" v-for="item in baseStructInfo" :key="item.code">
        <el-tooltip placement="top">
          <template #content>
            <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>
                <span class="sub-num">{{ formatThousand(subItem.count) }}</span>
              </li>
            </ul>
          </template>

          <div
            class="list-item"
            @click="activeBaseStruct = item.code"
            :class="{ active: activeBaseStruct === item.code }"
            v-waves
          >
            <div class="mouseenter-box"></div>
            <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>
            </template>
          </div>
        </el-tooltip>
      </div>
    </div>
    <Empty v-else-if="!loading" />
  </Module>
</template>

<script lang="ts" setup>
import { genConfig } from "@/utils/request";
import { useRequest } from "vue-request";
import { computed, defineProps, watch, reactive, ref } 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 huTong from "@/assets/images/baseStruct/huTong.png";
import huTongAct from "@/assets/images/baseStruct/huTong-active.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 sideslope from "@/assets/images/baseStruct/bp.png";
import sideslopeAct from "@/assets/images/baseStruct/bp-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 img4 from '@/assets/4.png'
import * as businessApi from "@/api/businessOverview";
import { getSideslopeCount, getSideslopeInfo } from "@/api/curingManage";
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,
    sideslope: sideslope,
    sideslopeAct: sideslopeAct,
    huTong: huTong,
    huTongAct: huTongAct
  }
});
let showTip = ref(Number);
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 getValue = (value: any, key: any) => {
  const result =
    value && (value as Array<any>)[0] && (value as Array<any>)[0][key];

  return result;
};

const changeIndex = (index: any, item: any) => {
  showTip.value = index;
};
const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const params = computed(() => selectLevel.value + "&" + selectRoadId.value);

// 收费站
const { data: stationCount, refresh: stationCountRefresh } = useRequest<any>(
  () =>
    businessApi.getStationCount(
      selectLevel.value,
      selectRoadId.value[selectLevel.value - 1]
    )
);

// 路段
const { data: sectionCount, refresh: sectionCountRefresh } = useRequest<any>(
  () =>
    businessApi.getSectionCount(
      selectLevel.value,
      selectRoadId.value[selectLevel.value - 1]
    )
);

// 服务区
const { data: serviceAreaCount, refresh: serviceAreaCountRefresh } = useRequest<
  any
>(() =>
  businessApi.getServiceAreaCount(
    selectLevel.value,
    0,
    selectRoadId.value[selectLevel.value - 1]
  )
);

// 互通
const { data: hutongCount, refresh: huTongRefrese } = useRequest<any>(() =>
  businessApi.getHuTongCount(
    selectLevel.value,
    selectRoadId.value[selectLevel.value - 1]
  )
);

// 边坡
const { data: sideslopeApiData, refresh: sideslopeApiRefresh } = useRequest<
  any
>(() =>
  getSideslopeCount(
    selectLevel.value,
    0,
    selectRoadId.value[selectLevel.value - 1]
  )
);
// 隧道
const { data: tunnelCount, refresh: tunnelCountRefresh } = useRequest<any>(() =>
  businessApi.getTunnelCount(
    selectLevel.value,
    0,
    selectRoadId.value[selectLevel.value - 1]
  )
);
// 桥梁
const { data: bridgeCount, refresh: bridgeCountFresh } = useRequest<any>(() =>
  businessApi.getBridgeCount(
    selectLevel.value,
    0,
    selectRoadId.value[selectLevel.value - 1]
  )
);
// // 门架&车道
// const { data: summaryGateorlane, refresh: summaryGateorlaneRefresh } =
//   useRequest<any>(() =>
//     businessApi.getSummarygateorlane(
//       selectLevel.value,
//       selectRoadId.value[selectLevel.value - 1]
//     )
//   )
// 门架&车道
const {
  data: summaryGateorlane,
  refresh: summaryGateorlaneRefresh
} = useRequest<any>(() =>
  businessApi.getStationLaneTypeCount(
    selectLevel.value,
    selectRoadId.value[selectLevel.value - 1]
  )
);

const arr = computed(() => {
  const stationCountValue = stationCount.value?.msgContent;
  const sectionCountValue = sectionCount.value?.msgContent;
  const serviceAreaCountValue = serviceAreaCount.value?.msgContent;
  const tunnelCountValue = tunnelCount.value?.msgContent;
  const bridgeCountValue = bridgeCount.value?.msgContent;
  const summaryGateorlaneValue = summaryGateorlane.value?.msgContent;
  const hutongCountValue = hutongCount.value?.msgContent;
  const sideslopeData = sideslopeApiData.value?.msgContent;
  const result = {
    tollStatNums: getValue(stationCountValue, "stationCount"),
    serviceStatNums: getValue(serviceAreaCountValue, "areaCount"),
    tunnelCount: getValue(tunnelCountValue, "tunnelCount"),
    bridgeCount: getValue(bridgeCountValue, "bridgeCount"),
    // gantry: getValue(summaryGateorlaneValue, 'stationCount'),
    ectCount: getValue(summaryGateorlaneValue, "etccount"),
    mixturecount: getValue(summaryGateorlaneValue, "mixturecount"),
    // lanesSum: getValue(summaryGateorlaneValue, 'lanessum'),
    hutongCount: getValue(hutongCountValue, "hutongCount"),
    slopeCount: getValue(sideslopeData, "slopeCount"),
    lanesSum: getValue(sectionCountValue, "sectionCount")
  };
  return result;
});

const { data: tunnelTypeData, refresh: tunnelTypeDataRefresh } = useRequest<
  any
>(() =>
  businessApi.getTunnelCount(
    selectLevel.value,
    1,
    selectRoadId.value[selectLevel.value - 1]
  )
);

const { data: bridgeTypeData, refresh: bridgeTypeDataRefresh } = useRequest<
  any
>(() =>
  businessApi.getBridgeCount(
    selectLevel.value,
    1,
    selectRoadId.value[selectLevel.value - 1]
  )
);
const { data: sideslopeTypeData, refresh: sideslopeTypeRefresh } = useRequest<
  any
>(() =>
  getSideslopeCount(
    selectLevel.value,
    1,
    selectRoadId.value[selectLevel.value - 1]
  )
);

// 服务区子查询
const {
  data: serviceAreaTypeData,
  refresh: serviceAreaTypeDataRefresh
} = useRequest<any>(() =>
  businessApi.getServiceAreaCount(
    selectLevel.value,
    1,
    selectRoadId.value[selectLevel.value - 1]
  )
);

// 互通子查询
const {
  data: hutongCountTypeData,
  refresh: hutongCountTypeDataRefresh
} = useRequest<any>(() =>
  businessApi.getHuTongCount(
    selectLevel.value,
    selectRoadId.value[selectLevel.value - 1],
    1
  )
);

//收费站
const {
  data: stationCountQueryChildData,
  refresh: stationCountQueryChild
} = useRequest<any>(() =>
  businessApi.getStationCount(
    selectLevel.value,
    selectRoadId.value[selectLevel.value - 1]
  )
);

// 路段
const { data: sectionTypeData, refresh: sectionCountQueryRefresh } = useRequest<
  any
>(() =>
  businessApi.getSectionCount(
    selectLevel.value,
    selectRoadId.value[selectLevel.value - 1]
  )
);

//etc ，混合车道
const {
  data: StationLaneTypeCount,
  refresh: StationLaneTypeCountQueryChild
} = useRequest<any>(() =>
  businessApi.getStationLaneTypeCount(
    selectLevel.value,
    selectRoadId.value[selectLevel.value - 1]
  )
);

// console.log(307,StationLaneTypeCount);

watch(params, () => {
  stationCountRefresh();
  sectionCountRefresh();
  serviceAreaCountRefresh();
  serviceAreaTypeDataRefresh();
  tunnelCountRefresh();
  bridgeCountFresh();
  summaryGateorlaneRefresh();
  // summaryGateorlaneRefresh()
  sectionCountQueryRefresh();
  huTongRefrese();
  tunnelTypeDataRefresh();
  bridgeTypeDataRefresh();
  sideslopeTypeRefresh();
  sideslopeApiRefresh();
  stationCountQueryChild();
  hutongCountTypeDataRefresh();
  StationLaneTypeCountQueryChild();
});
// 下标数据

const childrenData = computed(() => {
  const tunnelTypeDataValue = tunnelTypeData.value?.msgContent;
  const bridgeTypeDataValue = bridgeTypeData.value?.msgContent;
  const sectionCountValue = sectionTypeData.value?.msgContent;
  // etc 混合车道查询
  const summaryGateorlaneValue = summaryGateorlane.value?.msgContent;
  const sideslopeTypeDataValue = sideslopeTypeData.value?.msgContent;
  const serviceAreaTypeDataValue = serviceAreaTypeData.value?.msgContent;
  const hutongCountTypeDataValue = hutongCountTypeData.value?.msgContent;
  // 收费站子查询
  const stationCountQueryChildDataValue =
    stationCountQueryChildData.value?.msgContent;

  const bridgeCount = new Array();
  const tunnelCount = new Array();
  const slopeCount = new Array();
  const serviceStatNums = new Array();
  const hutongCount = new Array();
  // 收费站子查询
  // const tollStatNums = new Array()

  const tollStatNums = [
    { type: "ETC", count: getValue(summaryGateorlaneValue, "etccount") },
    {
      type: "混合车道",
      count: getValue(summaryGateorlaneValue, "mixturecount")
    }
  ];
  //  stationCountQueryChildDataValue &&
  //   (stationCountQueryChildDataValue as Array<any>).forEach((item: any) => {
  //     tollStatNums.push({ count: item.tollStatNums, type: "收费站" })
  //   });

  serviceAreaTypeDataValue &&
    (serviceAreaTypeDataValue as Array<any>).forEach((item: any) => {
      serviceStatNums.push({ count: item.areaCount, type: item.areaType });
    });
  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 });
    });
  Array.isArray(sideslopeTypeDataValue) &&
    sideslopeTypeDataValue.forEach((item: any) => {
      slopeCount.push({ count: item.slopeCount, type: item.riskType });
    });

  hutongCountTypeDataValue &&
    (hutongCountTypeDataValue as Array<any>).forEach((item: any) => {
      hutongCount.push({ count: item.hutongCount, type: item.hutongType });
    });
  // sectionCount
  return {
    tunnelCount: tunnelCount,
    bridgeCount: bridgeCount,
    slopeCount: slopeCount,
    serviceStatNums: serviceStatNums,
    hutongCount: hutongCount,
    tollStatNums: tollStatNums
    // lanesSum: lanesCount,
  };
});
console.log(400, childrenData);

// watch(activeCom, refresh);

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

const getSum = (dataObj: any, list: any) =>
  list
    .map((e: any) => Number(dataObj[e.key]))
    .reduce((a: number, b: number) => a + b);
</script>

<style lang="postcss" scoped>
.mouseenter-box {
  position: absolute;
  width: 100%;
  height: 100%;
}

.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-top {
  top: 100%;
}
.item-subtypes-bottom {
  bottom: 100%;
}
.item-subtype {
  /* background-color: rgba(0, 0, 0, 0.5); */
  @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: 14px;
  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>
