<template>
  <div class="w-full h-full flex bussinessbg">
    <div class="charglink" @click="toSf">养护工作台</div>
    <div class="flex flex-col" :style="{ width: '420px' }">
      <WayFilter class="selectBox" />
      <BaseStruct />
      <BaseStructinfo />
      <baseStructinfo2 />
    </div>
    <div class="flex flex-col" :style="{ width: 'calc(100% - 840px)' }">
      <div class="curingcenter">
        <layerpoint />

        <Map></Map>
        <!-- <MapView /> -->
        <!-- <PopupDialog /> -->
      </div>
    </div>
    <div class="flex flex-col" :style="{ width: '420px' }">
      <CuringStat />
      <Tollrevenue :data="roadData" />
      <PersonStat :data="MaintainStaffData" />
    </div>
    <div class="road">
      <RoadStatus />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Map from "./component/mapView.vue";

import WayFilter from "@/components/wayFilter/index.vue";
import BaseStruct from "./component/baseStruct.vue";
import BaseStructinfo from "./component/baseStructinfo.vue";
import baseStructinfo2 from "./component/baseStructinfo2.vue";
import layerpoint from "./component/layerpoint.vue";
import Tollrevenue from "./component/tollrevenue.vue";
// import MapView from "./component/mapView.vue";
import MapView from "@/components/MapView.vue";
import CuringStat from "./component/curingStat.vue";
import PersonStat from "./component/personstat.vue";
import PopupDialog from "@/components/PopupDialog.vue";

import RoadStatus from "../roadVisualizationCopy/component/NewLayerContrl/components/RoadStatus/index.vue";
import { useRequest } from "vue-request";
import { computed, onMounted, nextTick, reactive } from "vue";
import { getSectionInfo, getMaintainStaffInfo } from "@/api/curingManage";
import { useStore } from "vuex";
import { key } from "@/store";
import { getLinke } from "@/api/chargeInfo.js";
import { generateKey } from "@/api/operation";

const store = useStore(key);

// onMounted(async () => {
//   await nextTick();
//   store.dispatch("road/getAllRoads");
// });

const roadApiData = useRequest<any>(() => getSectionInfo());
const roadData = computed(() => {
  return roadApiData.data.value?.msgContent;
});
const MaintainStaffApiData = useRequest<any>(() => getMaintainStaffInfo());
const MaintainStaffData = computed(() => {
  console.log("MaintainStaffData", MaintainStaffApiData.data.value?.msgContent);
  return MaintainStaffApiData.data.value?.msgContent;
});
const toSf = async (val: any) => {
  generateKey().then(res => {
    window.open(`http://183.64.175.153:8888/fvue/login?tokenKey=${res.data}`);
  });
};
</script>
<style scoped>
.bussinessbg {
  background: url("@/assets/images/app-bg.jpg");
  background-size: 100% 100%;
  padding-top: 50px;
}
.curingcenter {
  width: 100%;
  height: 100%;
  position: relative;
}
.charglink {
  position: absolute;
  top: 10px;
  right: 300px;
  width: 96px;
  height: 34px;
  background: url("@/assets/images/ChargeInfo/sfgzttz.png");
  background-size: 100% 100%;
  font-size: 13px;
  text-align: center;
  line-height: 34px;
  z-index: 999;
  cursor: pointer;
}
.road {
  position: absolute;
  left: 470px;
  top: 200px;
  z-index: 1;
}
.selectBox {
  position: absolute;
  top: 10px;
  z-index: 99;
}
::v-deep(.minemap-popup-content) {
  max-width: 410px !important;
  border-image: none !important;
  background-image: url("@/assets/images/expressway/popbg.png");
  background-size: 100% 100%;
  border-width: 0 !important;
  background-color: transparent !important;
}
::v-deep(.minemap-popup-tip) {
  border-top-color: #0c233c;
}
</style>
