<template>
  <Module
    class="h-1/3"
    style="height:240px"
    :loading="loading"
    :error="error"
    :info="bsMeta && bsMeta['utilities']"
  >
    <template #title>基础设施明细 - {{ activeBaseStructModel?.name }}</template>
    <div style="width: 100%; overflow: auto;height:200px" v-if="dataList?.length > 0">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="jcsstj-outline flex justify-between items-center"
      >
        <div :class="index > 2 ? 'jcsstj-num' : 'jcsstj-num-top'">{{ index + 1 }}</div>
        <div class="jcsstj-text">{{ item.orgName ? item.orgName : item.orgname }}</div>
        <div :class="index > 2 ? 'jcsstj-blout' : 'jcsstj-blout-top'">
          <div
            :class="index > 2 ? 'jcsstj-bl' : 'jcsstj-bl-top'"
            :style="{
              width:
                (item[activeBaseStructModel.countKey] / totalCount) * 100 + '%',
            }"
          ></div>
        </div>
        <div class="jcsstj-cont">{{ item[activeBaseStructModel.countKey] || 0 }}</div>
      </div>
    </div>
    <Empty v-else />
  </Module>
</template>

<script lang="ts" setup>
import { computed, defineProps, watch } from "vue";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import { useStore } from "vuex";
import { key } from "@/store";
import { useRequest } from "vue-request";
import { curingManageBaseStructInfo } from "@/store/state";
import * as businessApi from "@/api/businessOverview";
import {
  getSideslopeCount,
  sideslopeCountChild,
  getSectionNum,
  sectionCountlevelChild,
  getCulvertCount,
  culvertCountChild
} from "@/api/curingManage";

const store = useStore(key);

const activeCuringBaseStruct = computed(
  () => store.state.activeCuringBaseStruct
);

const activeBaseStructModel = computed(() => {
  const data = curingManageBaseStructInfo.find(
    e => e.code === activeCuringBaseStruct.value
  );
  return data;
});

const compare = (properties: any) => {
  return function(m: any, n: any) {
    var a = m[properties];
    var b = n[properties];
    return b - a; //降序
  };
};

const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const params = computed(() => selectLevel.value + "&" + selectRoadId.value);

// 路段
const { data: sectionCount, refresh: sectionCountRefresh } = useRequest<any>(
  () =>
    selectLevel.value > 2
      ? getSectionNum({
          level: selectLevel.value,
          dimension: selectRoadId.value[selectLevel.value - 1]
        })
      : sectionCountlevelChild({
          level: selectLevel.value,
          dimension: selectRoadId.value[selectLevel.value - 1]
        })
);

// 涵洞
const { data: culvertCount, refresh: culvertCountRefresh } = useRequest<any>(
  () =>
    selectLevel.value > 2
      ? getCulvertCount(
          selectLevel.value,
          0,
          selectRoadId.value[selectLevel.value - 1]
        )
      : culvertCountChild(
          selectLevel.value,
          0,
          selectRoadId.value[selectLevel.value - 1]
        )
);

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

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

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

// 隧道
const { data: tunnelCount, refresh: tunnelCountRefresh } = useRequest<any>(() =>
  selectLevel.value > 2
    ? businessApi.getTunnelCount(
        selectLevel.value,
        0,
        selectRoadId.value[selectLevel.value - 1]
      )
    : businessApi.tunnelCountQueryChild(
        selectLevel.value,
        selectRoadId.value[selectLevel.value - 1]
      )
);
// 桥梁
const { data: bridgeCount, refresh: bridgeCountRefresh } = useRequest<any>(() =>
  selectLevel.value > 2
    ? businessApi.getBridgeCount(
        selectLevel.value,
        0,
        selectRoadId.value[selectLevel.value - 1]
      )
    : businessApi.bridgeCountQueryChild(
        selectLevel.value,
        selectRoadId.value[selectLevel.value - 1]
      )
);
// 边坡
const { data: sideslopeApiData, refresh: sideslopeApiRefresh } = useRequest<
  any
>(() =>
  selectLevel.value > 2
    ? getSideslopeCount(
        selectLevel.value,
        0,
        selectRoadId.value[selectLevel.value - 1]
      )
    : sideslopeCountChild(
        selectLevel.value,
        0,
        selectRoadId.value[selectLevel.value - 1]
      )
);
watch(params, () => {
  stationCountRefresh();
  serviceAreaCountRefresh();
  tunnelCountRefresh();
  bridgeCountRefresh();
  sideslopeApiRefresh();
  huTongRefrese();

  sectionCountRefresh();
  culvertCountRefresh();
});

const dataList = computed(() => {
  let list = new Array();
  switch (activeBaseStructModel.value?.name) {
    case "路段":
      list = sectionCount.value?.msgContent;
      break;
    case "涵洞":
      list = culvertCount.value?.msgContent;
      break;
    case "收费站":
      list = stationCount.value?.msgContent;
      break;
    case "服务区":
      list = serviceAreaCount.value?.msgContent;
      break;
    case "隧道":
      list = tunnelCount.value?.msgContent;
      break;
    case "桥梁":
      list = bridgeCount.value?.msgContent;
      break;
    case "边坡":
      list = sideslopeApiData.value?.msgContent;
      break;
    case "互通":
      list = hutongCount.value?.msgContent;
      break;
    default:
      break;
  }
  const countKey = activeBaseStructModel.value?.countKey;
  list && (list as Array<any>).sort(compare(countKey));
  return list;
});

const totalCount = computed(() => {
  let total = dataList.value
    .map((e: any) => Number(e[activeBaseStructModel.value?.countKey]))
    ?.reduce((a: number, b: number) => a + b);
  // console.log(total);
  return total;
});
</script>

<style lang="postcss" scoped>
.com-data-list {
  @apply absolute inset-0 overflow-x-hidden overscroll-y-auto flex flex-col p-0.5;
}

.com-data-item {
  @apply p-0.5;
}

.item {
  background: linear-gradient(
    to left top,
    rgba(0, 59, 88, 0.3),
    rgba(0, 70, 105, 1)
  );
  border: 1px solid rgba(7, 133, 196, 0.4);

  @apply w-full rounded-sm flex items-center px-2 py-2;

  & .svg-icon {
    font-size: 25px;
    color: rgba(255, 255, 255, 0.5);
  }
}

.dataWarp {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-shadow: none;
  margin-left: auto;
  font-size: 14px;
}

.prop + .prop {
  margin-top: 5px;
}

.prop:nth-child(2) {
  color: rgb(0, 180, 224);
}
.jcsstj-outline {
  margin-top: 10px;
  margin-bottom: 8px;
}
.jcsstj-num-top {
  width: 20px;
  height: 24px;
  font-size: 13px;
  font-weight: bold;
  color: #ff9a00;
  background: url("@/assets/images/jcsstj-top-num.png");
  background-size: 100% 100%;
  text-align: center;
  line-height: 24px;
  font-style: oblique;
  margin-right: 10px;
  padding-right: 2px;
}
.jcsstj-num {
  width: 20px;
  height: 24px;
  font-size: 13px;
  font-weight: bold;
  color: #badeff;
  width: 20px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-style: oblique;
  margin-right: 10px;
  padding-right: 2px;
}
.jcsstj-text {
  font-size: 14px;
  color: #909fac;
  width: 90px;
}
.jcsstj-blout-top {
  width: calc(100% - 170px);
  height: 12px;
  padding: 3px;
  /* border: 1px solid red; */
  border: 1px solid rgba(255, 154, 0, 0.15);
  background: rgba(255, 154, 0, 0.1);
}
.jcsstj-blout {
  width: calc(100% - 180px);
  height: 12px;
  padding: 3px;
  border: 1px solid rgba(0, 132, 251, 0.25);
  background: rgba(0, 132, 251, 0.1);
}
.jcsstj-bl-top {
  height: 4px;
  background: #ff9a00;
}
.jcsstj-bl {
  height: 4px;
  background: #0084fb;
}
.jcsstj-cont {
  font-size: 16px;
  color: #ffdaa5;
  width: 50px;
  margin-left: 10px;
}
</style>
