<template>
  <Module :loading="loading" :error="error">
    <template #title>基础设施统计(数量)</template>
    <div class="base-struct-list" v-if="arr">
      <div
        class="list-item-box"
        :class="{ single: !item.children }"
        v-for="item in curingManageBaseStructInfo"
        :key="item.code"
      >
        <el-tooltip v-if="upDataSurplusData.value" placement="top">
          <template #content>
            <div>
              <div
                v-for="(item, index) in upDataSurplusData.value"
                :key="index"
                class="item-subtype"
              >
                <span class="sub-name">{{ item.type }}</span>
                <span class="sub-point" style="flex: 1" v-if="item.type && item.type.length < 10">
                  <!-- <span v-for="i in 6" :key="i" class="in_po"></span> -->
                </span>
                <span class="sub-num">{{ item.count }}</span>
              </div>
            </div>
          </template>
          <div
            class="list-item"
            @click="onItemClick(item.mapCode, item)"
            :class="{ active: activeCuringBaseStruct === item.code }"
            v-waves
            @mouseenter="upDataSurplusData = childrenData[item.key]"
          >
            <div class="item-icon">
              <img
                v-if="activeCuringBaseStruct === 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" /> -->
            <span class="item-title">{{ item.name }}</span>
            <span class="item-value">{{ arr ? arr[item.key] || 0 : "-" }}</span>
          </div>
        </el-tooltip>
        <div v-else>
          <div
            class="list-item"
            @click="onItemClick(item.mapCode, item)"
            :class="{ active: activeCuringBaseStruct === item.code }"
            v-waves
            @mouseenter="upDataSurplusData = childrenData[item.key]"
          >
            <div class="item-icon">
              <img
                v-if="activeCuringBaseStruct === 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" /> -->
            <span class="item-title">{{ item.name }}</span>
            <span class="item-value">{{ arr ? arr[item.key] || 0 : "-" }}</span>
          </div>
        </div>
      </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, nextTick, toRefs } from "vue";
import { useStore } from "vuex";
import { key } from "@/store";
import { curingManageBaseStructInfo } from "@/store/state";
import section from "@/assets/images/baseStruct/stat.png";
import sectionAct from "@/assets/images/baseStruct/stat-active.png";
import roadSide from "@/assets/images/baseStruct/route.png";
import roadSideAct from "@/assets/images/baseStruct/route-active.png";
import sideslope from "@/assets/images/baseStruct/bp.png";
import sideslopeAct from "@/assets/images/baseStruct/bp-active.png";
import bridge from "@/assets/images/baseStruct/brg.png";
import bridgeAct 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 culvert from "@/assets/images/baseStruct/hd.png";
import culvertAct from "@/assets/images/baseStruct/hd-active.png";
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 { ref } from "vue";
import { getTunnelCount, getBridgeCount } from "@/api/businessOverview";
import {
  getCulvertCount,
  getSideslopeCount,
  getSectionNum
} from "@/api/curingManage";
import * as businessApi from "@/api/businessOverview";

const imgslist = reactive({
  value: {
    section,
    sectionAct,
    roadSide,
    roadSideAct,
    sideslope,
    sideslopeAct,
    bridge,
    bridgeAct,
    culvert,
    culvertAct,
    tunnel,
    tunnelAct,
    stat,
    statAct,
    area,
    areaAct,
    huTong,
    huTongAct
  }
});
const store = useStore(key);
const activeCom = computed(() => store.state.activeCom);
const bsMeta = computed(() => store.getters.bsMeta);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const selectLevel = computed(() => store.state.road?.selectLevel);
let surplusData = ref([]);

const map = computed(() => store.state.map?.map);
const selectedLayers = computed(() => store.state.map?.selectedLayers);
const activeCuringBaseStruct = computed({
  get: () => store.state.activeCuringBaseStruct,
  set(val: string) {
    store.commit("changeCuringBaseStruct", val);
  }
});
let isfirstClk = true;
let lastClick = null;

const upDataSurplusData = computed({
  get: () => surplusData,
  set(val: any) {
    surplusData.value = val;
  }
});

const getValue = (value: any, key: any) => {
  const result =
    value && (value as Array<any>)[0] && (value as Array<any>)[0][key];
  return result;
};

// 收费站
const { data: stationCount, refresh: stationCountRefresh } = useRequest<any>(
  () =>
    businessApi.getStationCount(
      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],
    0
  )
);

// 路段
const { data: sectionLenApiData, refresh: sectionLenApiRefresh } = useRequest<
  any
>(() =>
  getSectionNum({
    level: selectLevel.value,
    dimension: selectRoadId.value[selectLevel.value - 1]
  })
);
// 隧道
const { data: tunnelApiData, refresh: tunnelApiRefresh } = useRequest<any>(() =>
  getTunnelCount(
    selectLevel.value,
    0,
    selectRoadId.value[selectLevel.value - 1]
  )
);
// 桥梁
const { data: bridgeApiData, refresh: bridgeApiRefresh } = useRequest<any>(() =>
  getBridgeCount(
    selectLevel.value,
    0,
    selectRoadId.value[selectLevel.value - 1]
  )
);
// 涵洞
const { data: culvertApiData, refresh: culvertApiRefresh } = useRequest<any>(
  () =>
    getCulvertCount(
      selectLevel.value,
      0,
      selectRoadId.value[selectLevel.value - 1]
    )
);

// 边坡
const { data: sideslopeApiData, refresh: sideslopeApiRefresh } = useRequest<
  any
>(() =>
  getSideslopeCount(
    selectLevel.value,
    0,
    selectRoadId.value[selectLevel.value - 1]
  )
);

const arr = computed(() => {
  const sectionLenData = sectionLenApiData.value?.msgContent;
  const tunnelCountData = tunnelApiData.value?.msgContent;
  const bridgeData = bridgeApiData.value?.msgContent;
  const culvertData = culvertApiData.value?.msgContent;
  const sideslopeData = sideslopeApiData.value?.msgContent;

  const stationCountData = stationCount.value?.msgContent;
  const serviceAreaCountData = serviceAreaCount.value?.msgContent;
  const hutongCountData = hutongCount.value?.msgContent;

  const result = {
    mngSectionLen: getValue(sectionLenData, "sectionCount"),
    tunnelCount: getValue(tunnelCountData, "tunnelCount"),
    culvertCount: getValue(culvertData, "culvertCount"),
    bridgeCount: getValue(bridgeData, "bridgeCount"),
    slopeCount: getValue(sideslopeData, "slopeCount"),

    stationCount: getValue(stationCountData, "stationCount"),
    serviceAreaCount: getValue(serviceAreaCountData, "areaCount"),
    hutongCount: getValue(hutongCountData, "hutongCount")
  };
  return result;
});
const { data: tunnelTypeData, refresh: tunnelTypeRefresh } = useRequest<any>(
  () =>
    getTunnelCount(
      selectLevel.value,
      1,
      selectRoadId.value[selectLevel.value - 1]
    )
);
const { data: bridgeTypeData, refresh: bridgeTypeRefresh } = useRequest<any>(
  () =>
    getBridgeCount(
      selectLevel.value,
      1,
      selectRoadId.value[selectLevel.value - 1]
    )
);
const { data: culvertTypeData, refresh: culvertTypeRefresh } = useRequest<any>(
  () =>
    getCulvertCount(
      selectLevel.value,
      1,
      selectRoadId.value[selectLevel.value - 1]
    )
);
const { data: sideslopeTypeData, refresh: sideslopeTypeRefresh } = useRequest<
  any
>(() => getSideslopeCount(selectLevel.value, 1, selectRoadId.value));

// 服务区子查询
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 childrenData = computed(() => {
  const tunnelTypeDataValue = tunnelTypeData.value?.msgContent;
  const bridgeTypeDataValue = bridgeTypeData.value?.msgContent;
  const culvertTypeDataValue = culvertTypeData.value?.msgContent;
  const sideslopeTypeDataValue = sideslopeTypeData.value?.msgContent;
  const serviceAreaTypeDataValue = serviceAreaTypeData.value?.msgContent;
  const hutongCountTypeDataValue = hutongCountTypeData.value?.msgContent;





  const bridgeCount = new Array();
  const tunnelCount = new Array();
  const culvertCount = new Array();
  const slopeCount = new Array();
  const serviceAreaCount = new Array();
  const hutongCount = new Array();

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

  serviceAreaTypeDataValue &&
    (serviceAreaTypeDataValue as Array<any>).forEach((item: any) => {
      serviceAreaCount.push({ count: item.areaCount, type: item.areaType });
    });

  hutongCountTypeDataValue &&
    (hutongCountTypeDataValue as Array<any>).forEach((item: any) => {
      hutongCount.push({ count: item.hutongCount, type: item.hutongType });
    });

  return {
    tunnelCount,
    bridgeCount,
    culvertCount,
    slopeCount,
    serviceAreaCount,
    hutongCount
  };
});

// 根据路段变化请求接口
watch(selectRoadId, selectRoadId => {
  sectionLenApiRefresh();
  tunnelApiRefresh();
  bridgeApiRefresh();
  tunnelTypeRefresh();
  bridgeTypeRefresh();
  culvertApiRefresh();
  culvertTypeRefresh();
  sideslopeApiRefresh();
  sideslopeTypeRefresh();
  serviceAreaTypeDataRefresh();

  stationCountRefresh();
  serviceAreaCountRefresh();
  huTongRefrese();
  hutongCountTypeDataRefresh();
});

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

// 点击切换地图
const onItemClick = (code: any, layer: Object) => {
  // 切换明细
  console.log(367, code, layer.code);
  store.commit("changeCuringBaseStruct", layer.code);
  // 地图指示物
  // 清除上次点击
  // if (lastClick) {
  //   const idx2 = selectedLayers.value.findIndex(
  //     (item) => item === lastClick.mapCode
  //   );
  //   selectedLayers.value.splice(idx2, 1);
  //   map.value?.setLayoutProperty(lastClick.layerId, "visibility", "none");
  //   let obj2 = {
  //     key: "selectedLayers",
  //     value: selectedLayers.value,
  //   };
  //   store.commit("map/SET_STATE", obj2);
  //   lastClick = null;
  // }

  // if (!code) return;
  // lastClick = layer;
  // // return;
  // let list = code.split("&");
  // list.map((code) => {
  //   selectedLayers.value.push(code);
  //   if (
  //     code == "BP" ||
  //     code == "YLSS" ||
  //     code == "YHGQ" ||
  //     code == "YJWZ" ||
  //     code == "JYD"
  //   ) {
  //     map.value.setLayoutProperty(layer.layerId, "visibility", "visible");
  //   }

  // });
  // let obj = {
  //   key: "selectedLayers",
  //   value: selectedLayers.value,
  // };
  // store.commit("map/SET_STATE", obj);
  // if (isfirstClk) {
  //   map.value.flyTo({
  //     center: [105.8239515869493, 30.262943891582296],
  //     zoom: 8,
  //   });
  //   isfirstClk = false;
  // }
};
</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: 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>
