<template>
  <div id="cockpit">
    <div class="entiretyBox">
      <div class="line-l">
        <img :src="allData.LineR" />
      </div>
      <div class="line-R">
        <img :src="allData.LineL" />
      </div>

      <div class="line-bottom">
        <img :src="allData.LineBotom" />
      </div>

      <img src="@/assets/images/zhoukou/switchBtn.png"
           class="leftbtn"
           @click="BoxShow()"
           :class="[isShow ? 'clearbuttonleft' : 'buttonleft']" />

      <div class="btnbox"
           :class="[isShow ? 'clearboxleft' : 'boxleft']"></div>

      <div class="btnbox"
           :class="[isShow2 ? 'clearboxright' : 'boxright']"></div>

      <img src="@/assets/images/zhoukou/switchBtn.png"
           class="rightbtn"
           @click="BoxShow2()"
           :class="[isShow2 ? 'clearbuttonright' : 'buttonright']" />

      <transition name="fade1">
        <drainagefacilityOneLeft v-if="type == 1||type == 3"
                                 v-show="isShow"
                                 :Getfutre="Getfutre"></drainagefacilityOneLeft>
      </transition>

      <transition name="fade1">
        <drainagefacilityOneLeftWsc v-if="type == 2"
                                    v-show="isShow"
                                    :Getfutre="Getfutre"></drainagefacilityOneLeftWsc>
      </transition>

      <transition name="fade2">
        <drainagefacilityOneRight v-if="type == 1||type == 3"
                                  v-show="isShow2"
                                  :Getfutre="Getfutre"></drainagefacilityOneRight>
      </transition>

      <transition name="fade2">
        <drainagefacilityOneRightWsc v-if="type == 2"
                                     v-show="isShow2"
                                     :Getfutre="Getfutre"></drainagefacilityOneRightWsc>
      </transition>

      <!-- 预留的地图组件 -->
      <drainagefacilitymap :type="type"></drainagefacilitymap>
    </div>
  </div>
</template>

<script setup>
import { getImageUrl } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();
import drainagefacilityOneLeft from "./components/drainagefacility-one-left.vue";
import drainagefacilityOneLeftWsc from "./components/drainagefacility-one-left-wsc.vue";
import drainagefacilityOneRightWsc from "./components/drainagefacility-one-right-wsc.vue";
import drainagefacilityOneRight from "./components/drainagefacility-one-right.vue";
// import drainagefacilityOneTop from "./components/drainagefacility-one-top.vue";
// import drainagefacilityOneBottom from "./components/drainagefacility-one-bottom.vue";
// import drainagefacilitymap from "./components/drainagefacility-map.vue";
import bus from "@/utils";
import usemap from "@/hooks/drainagefacility-usermap.js";
const { isShow, isShow2, BoxShow, BoxShow2 } = usemap();

const allData = reactive({
  LineL: getImageUrl("line-L", "zhoukou"),
  LineR: getImageUrl("line-R", "zhoukou"),
  LineBotom: getImageUrl("home-bottom", "zhoukou"),
});

const type = ref(0)

const Getfutre = ref({})

onMounted(() => {
  bus.on("psssType", (e) => {
    // 1为泵站展示 2为污水厂展示
    Getfutre.value = e
    isShow.value = true
    isShow2.value = true
    type.value = e.type;

    console.log(type.value, "type");
  });
});

onUnmounted(() => {
  bus.off('psssType')
});

</script>
<style lang="scss" scoped>
//@import "@/assets/styles/floodControlDrainage.scss";
//@import "@/assets/styles/cockpit.scss";
</style>