<template>
  <Module
    class="flex-grow baseStructinfo-yh"
    :loading="loading"
    :error="error"
    :info="bsMeta && bsMeta['utilities']"
  >
    <template #title class="chief-facility">
      主要设施明细
      <span class="detail-skip" @click="goDetail()">
        设施明细&nbsp;&nbsp;
        <i class="el-icon-caret-right"></i>
      </span>
    </template>

    <!-- <template> -->
    <div style="height: 300px; flex: 1">
      <!-- 路段 -->
      <div v-if="activeKey == 'section'" class="basetable">
        <div class="bt-head">
          <div>名称</div>
          <div>桩号</div>

          <div>起始点</div>
          <div>终点</div>
          <div>长度(km)</div>
        </div>
        <div class="list-out" v-if="dataList?.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <div>{{ item.sectionName }}</div>
              <div>{{ item.beginStake }}</div>
              <div>{{ item.startPoint }}</div>
              <div>{{ item.endPoint }}</div>
              <div>{{ item.sectionLength }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>
      <!-- 沿线 -->
      <div v-if="activeKey == 'roadSide'" class="basetable">
        <div class="bt-head">
          <div>名称</div>
          <div>桩号</div>
          <div>所属路段</div>
          <div>上下行</div>
        </div>
        <div class="list-out" v-if="dataList.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <div>{{ item.faciName }}</div>
              <div>{{ item.pegk }}</div>

              <div>{{ item.sectionName }}</div>
              <div>{{ item.direction }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>
      <!-- 边坡 -->
      <div v-if="activeKey == 'sideslope'" class="basetable">
        <div class="bt-head">
          <div>地质</div>
          <div>边坡类型</div>
          <!-- <div>管养单位</div> -->
          <div>所属路段</div>
          <div>上下行</div>
        </div>
        <div class="list-out" v-if="dataList.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <div>{{ item.geology }}</div>
              <div>{{ item.riskType }}</div>
              <!-- <div>{{ item.mmUnit }}</div> -->
              <div>{{ item.sectionName }}</div>
              <div>{{ item.direction }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>
      <!-- 桥梁 -->
      <div v-if="activeKey == 'bridge'" class="basetable">
        <div class="bt-head">
          <div>名称</div>
          <!-- <div>桩号</div> -->

          <div>所属路段</div>
          <div>上下行</div>
        </div>
        <div class="list-out" v-if="dataList.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <div>{{ item.bridgeName }}</div>
              <!-- <div>{{ item.bridgeCode }}</div> -->

              <div>{{ item.sectionName }}</div>
              <div>{{ item.direction }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>
      <!-- 隧道 -->
      <div v-if="activeKey == 'tunnel'" class="basetable">
        <div class="bt-head">
          <div>名称</div>
          <div>桩号</div>

          <div>所属路段</div>
          <div>上下行</div>
        </div>
        <div class="list-out" v-if="dataList.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <div>{{ item.tunnelName }}</div>
              <div>{{ item.centpegk }}</div>

              <div>{{ item.sectionName }}</div>
              <div>{{ item.direction }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>
      <!-- 涵洞 -->
      <div v-if="activeKey == 'culvert'" class="basetable">
        <div class="bt-head">
          <!-- <div>桩号</div> -->
          <!-- <div>名称</div> -->
          <div>所属路段</div>
          <div>上下行</div>
        </div>
        <div class="list-out" v-if="dataList.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <!-- <div>{{ item.centpegk }}</div> -->
              <!-- <div>{{ item.culvertName }}</div> -->
              <div>{{ item.sectionName }}</div>
              <div>{{ item.direction }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>

      <!-- 服务区 -->
      <div v-if="activeKey == 'area'" class="basetable">
        <div class="bt-head">
          <div>名称</div>
          <div>桩号</div>

          <div>所属路段</div>
          <div>类型</div>
        </div>
        <div class="list-out" v-if="dataList.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <div>{{ item.areaName }}</div>

              <div>{{ item.pegk }}</div>
              <div>{{ item.routeName }}</div>
              <div>{{ item.areaType }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>
      <!-- 互通 -->
      <div v-if="activeKey == 'huTong'" class="basetable">
        <div class="bt-head">
          <div>名称</div>

          <!-- <div>桩号</div> -->
          <div>所属路段</div>
          <div>上下行</div>
        </div>
        <div class="list-out" v-if="dataList.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <div>{{ item.faciName }}</div>

              <!-- <div>{{ item.faciCode }}</div> -->
              <div>{{ item.routeName }}</div>
              <div>{{ item.direction }}</div>
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>

      <!-- 收费站 -->
      <div v-if="activeKey == 'stat'" class="basetable">
        <div class="bt-head">
          <div>名称</div>
          <div>桩号</div>

          <div>所属路段</div>
          <!-- <div>上下行</div> -->
        </div>
        <div class="list-out" v-if="dataList.length">
          <vue-seamless-scroll :data="dataList">
            <div class="bt-item" v-for="item in dataList" :key="item">
              <div>{{ item.stationName }}</div>
              <div>{{ item.pegk }}</div>

              <div>{{ item.sectionName }}</div>
              <!-- <div>{{ item.direction }}</div> -->
            </div>
          </vue-seamless-scroll>
        </div>
        <empty v-else />
      </div>
    </div>
    <!-- </template> -->
  </Module>
</template>

<script lang="ts" setup>
import { computed, defineProps, reactive, watch } from "vue";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import { useStore } from "vuex";
import { key } from "@/store";
import {
  getSectionInfo,
  getRoadsideInfo,
  getSideslopeInfo,
  getBridgeInfo,
  getTunnelInfo,
  getCulvertInfo,
  getServiceareaInfo,
  getHutongInfo,
  getTollstationInfo
} from "@/api/curingManage";
import { useRequest } from "vue-request";
import { generateKey } from "@/api/operation";
import { getLinke } from "@/api/chargeInfo";
// import * as businessApi from '@/api/businessOverview'
const store = useStore(key);

const emit = defineEmits(["goDetail"]);

const tokenKey = reactive({
  value: ""
});
const goDetail = async () => {
  let routeName = store.state.activeCuringBaseStruct;

  // console.log("231行，暂时没有跳转");
  generateKey().then(res => {
    console.log(241, res.data);
    if (routeName === "section") {
      return window.open(
        ` http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=sectionManagement`
      );
    } //路段
    if (routeName === "bridge") {
      return window.open(
        `http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=bridgeManagement`
      );
    } //桥梁
    if (routeName === "tunnel") {
      return window.open(
        `http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=tunnelManagement`
      );
    } //隧道
    if (routeName === "sideslope") {
      return window.open(
        `http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=sideSlopeManagement`
      );
    } //边坡
    if (routeName === "culvert") {
      return window.open(
        `http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=culvertManagement`
      );
    } //涵洞
    if (routeName === "huTong" || "stat" || "area") {
      let roadId = "";
      let companylds = "";
      if (selectLevel.value == 1 || selectLevel.value == 2) {
        companylds = selectRoadId.value[selectLevel.value - 1];
      }
      if (selectLevel.value == 3) {
        roadId = selectRoadId.value[selectLevel.value - 1];
      }
      let type = 1;
      if (routeName === "huTong") {
        type = 1;
      } else if (routeName === "stat") {
        type = 3;
      } else {
        type = 4;
      }
      return window.open(
        `http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}&routerName=roadsideFacilitiesManagement&type=${type}&roadSegmentId=${roadId}&companylds=${companylds}`
      );
    } //沿路设施（收费站，服务区，互通）
  });

  //  window.open("//"+"192.168.10.240/ROUTE_STRUCT/manager-web-crcc/tree/master/src/components")
  //   emit("goDetail") // 发送事件
};

const activeCuringBaseStruct = computed(
  () => store.state.activeCuringBaseStruct
);
const activeKey = computed(() => activeCuringBaseStruct.value);
const selectLevel = computed(() => store.state.road?.selectLevel);
const selectRoadId = computed(() => store.state.road?.selectRoadId);
const query = {
  level: selectRoadId.value.length,
  dimension: selectRoadId.value[selectRoadId.value.length - 1] || ""
};
// 路段
const { data: sectionInfo, refresh: sectionInfoRefresh } = useRequest<any>(() =>
  getSectionInfo(query)
);
// 沿线设施
const { data: roadSideInfo, refresh: roadSideInfoRefresh } = useRequest<any>(
  () => getRoadsideInfo(query)
);
// 边坡
const { data: sideslopeInfo, refresh: sideslopeRefresh } = useRequest<any>(() =>
  getSideslopeInfo(query)
);
// 桥梁
const { data: bridgeInfo, refresh: bridgeRefresh } = useRequest<any>(() =>
  getBridgeInfo(query)
);
// 隧道
const { data: tunnelInfo, refresh: tunnelRefresh } = useRequest<any>(() =>
  getTunnelInfo(query)
);
// 涵洞
const { data: culvertInfo, refresh: culvertRefresh } = useRequest<any>(() =>
  getCulvertInfo(query)
);
// 服务区
const { data: serviceareaInfo, refresh: serviceareaInfoRefresh } = useRequest<
  any
>(() => getServiceareaInfo(query));

// 互通
const { data: hutongInfo, refresh: hutongInfoRefresh } = useRequest<any>(() =>
  getHutongInfo(query)
);

// 收费站
const {
  data: TollstationInfo,
  refresh: getTollstationInfoRefresh
} = useRequest<any>(() => getTollstationInfo(query));
const dataList = computed(() => {
  // console.log("activeCuringBaseStruct", activeCuringBaseStruct.value);
  const sectionLenData = sectionInfo.value?.msgContent;
  const roadSideData = roadSideInfo.value?.msgContent;
  const sideslopeData = sideslopeInfo.value?.msgContent;
  const bridgeData = bridgeInfo.value?.msgContent;
  const tunnelData = tunnelInfo.value?.msgContent;
  const culvertData = culvertInfo.value?.msgContent;
  const serviceareaInfoData = serviceareaInfo.value?.msgContent;
  const TollstationData = TollstationInfo.value?.msgContent;

  const hutongData = hutongInfo.value?.msgContent;
  let list = [];
  switch (activeCuringBaseStruct.value) {
    case "section":
      list = sectionLenData;
      break;
    case "roadSide":
      list = roadSideData;
      break;
    case "sideslope":
      list = sideslopeData;
      break;

    case "bridge":
      list = bridgeData;
      break;
    case "tunnel":
      list = tunnelData;
      break;
    case "culvert":
      list = culvertData;
      break;
    case "area":
      list = serviceareaInfoData;
      break;
    case "huTong":
      list = hutongData;
      break;
    case "stat":
      list = TollstationData;
      break;
  }
  return list;
});

watch(selectRoadId, v => {
  query.level = v.length;
  query.dimension = v[v.length - 1] || "";
  sectionInfoRefresh();
  roadSideInfoRefresh();
  sideslopeRefresh();
  bridgeRefresh();
  tunnelRefresh();
  culvertRefresh();
  serviceareaInfoRefresh();
  hutongInfoRefresh();
  getTollstationInfoRefresh();
});
</script>
<style scoped>
.default {
  height: 300px !important;
}
</style>
<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.module-box {
  overflow: hidden;
}
.chief-facility {
  position: relative;
}
.detail-skip {
  position: absolute;
  right: 20px;
  cursor: pointer;
}
.f1 {
  flex: 1;
}
.baseStructinfo-yh {
  height: vh(100);
}
.basetable {
  width: 100%;
  padding: 8px 12px;
}
.bt-head {
  padding: 3px;
  & div {
    /* width: 25%; */
    flex: 1;
    text-align: center;
    text-align: center;
    font-size: 12px;
    color: #badeff;
  }
  background: rgba(101, 161, 214, 0.4);
  height: vh(35);
  line-height: vh(35);
  display: flex;
  justify-content: space-between;
}
.list-out {
  height: vh(210);
  overflow: hidden;
}
.bt-item {
  margin-top: 5px;
  padding: 3px;
  column-gap: 5px;
  // height: vh(35);
  line-height: vh(30);
  & div {
    flex: 1;
    /* width: 20%; */
    text-align: center;
    font-size: 12px;
    color: #badeff;
    word-break: break-all;
  }
  border-bottom: 1px solid rgba(0, 132, 251, 0.4);
  display: flex;
  justify-content: space-between;
}
</style>
