<template>
  <div id="FHPL">
    <div
      :class="[
        'LeftBox',
        'animate__animated',
        showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
      ]"
      v-if="!curType"
    >
      <FhplLeftBox />
    </div>
    <div
      :class="[
        'RightBox',
        'animate__animated',
        showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
      ]"
      v-if="!curType"
    >
      <FholRightBox />
    </div>

    <!-- 顶部内容 -->
    <div class="top_content">
      <div
        class="hujiao_button flex flex-justcontent-center flex-align-center"
        :class="[showPanel ? 'TuChengImgTrue' : 'TuChengImgFalse']"
        @click="openUserDialog"
        v-if="!curType"
      >
        汛情回顾
      </div>
    </div>

    <!-- 降雨日历 -->
    <!-- <div class="monitorCalenderBox">
      <monitorCalender v-show="isShowMonitorCalender" :hasClose="true" @change="change" @close="closeMonitorCalender" />
    </div> -->
  </div>

  <!-- <FXHG v-if="curType == true" :checkTime="checkTime"/> -->
  <FXHG v-if="curType" :showPanel="showPanel" />
</template>

<script setup name="FHPL">
import { ref, reactive, toRefs, onMounted } from "vue";
import FhplLeftBox from "@/views/oneMap/floodPrevention/FhplLeftBox.vue";
import FholRightBox from "@/views/oneMap/floodPrevention/FholRightBox.vue";
import FXHG from "@/views/oneMap/components/FXHG.vue";
import monitorCalender from "@/views/oneMap/FloodStuationReview/monitorCalender.vue";
import bus from "@/bus";
const emits = defineEmits(["closeMonitorCalender"]);
const AllData = reactive({});
const curType = ref(false);
const isShowMonitorCalender = ref(false);
const showPanel = ref(true); //面板展开收起
const checkTime = ref("");
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
function openUserDialog(params) {
  // isShowMonitorCalender.value = true;
  bus.emit("clearAllLayer");
  isShowMonitorCalender.value = false;
  curType.value = true;
  bus.emit("changeShowPanel", false);
}
// const change = (date) => {
//   checkTime.value = date;

//   isShowMonitorCalender.value = false;
//   Showtop.value = false;
//   showPanel.value = true;
//   curType.value = true;
// };
const closeMonitorCalender = () => {
  isShowMonitorCalender.value = false;
  emits("closeMonitorCalender");
};
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
onMounted(() => {
  bus.on("HideFXHG", (params) => {
    curType.value = false;
  });
  bus.on("openUserDialog", (params) => {
    openUserDialog();
  });

  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 13,
  });
  bus.emit("setLayerVisible", { layername: "pipeline_info_flow_ys", isCheck: true });
});
onBeforeUnmount(() => {
  bus.off("HideFXHG");
  bus.off("openUserDialog");
  bus.emit("setLayerVisible", { layername: "pipeline_info_flow_ys", isCheck: false });
});
</script>

<style lang="scss" scoped>
#FHPL {
  .LeftBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    left: 10px;
    top: 70px;
    z-index: 111;
    background: linear-gradient(0deg, rgba(4, 34, 84, 0.8) 0%, rgba(4, 34, 84, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #4aa4ff;
    box-shadow: inset 0 0 5px 5px #4aa4ff8a;
  }
  .RightBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    right: 10px;
    top: 70px;
    z-index: 111;
    background: linear-gradient(0deg, rgba(4, 34, 84, 0.8) 0%, rgba(4, 34, 84, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #4aa4ff;
    box-shadow: inset 0 0 5px 5px #4aa4ff8a;
  }
  .top_content {
    position: absolute;
    top: 110px;
    left: 480px;
    height: 35px;
    width: 90px;
    z-index: 10000;
    // background: rgb(221, 216, 216);
    .hujiao_button {
      width: 90px;
      height: 30px;
      cursor: pointer;
      position: relative;
      top: 3px;
      background: #003756;
      border-radius: 15px;
      border: 1px solid #0041f5;
      // border-image: linear-gradient(0deg, #00fff0, #0091ff) 10 10;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      box-shadow: inset 0 0 5px 2px #47eef38a;
    }
    .TuChengImgTrue {
      transform: translateX(-460px);
      transition: all 1s ease;
    }
    .TuChengImgFalse {
      transform: translateX(0px);
      transition: all 1s ease;
    }
  }
  .monitorCalenderBox {
    position: absolute;
    left: 513px;
    top: 150px;
    width: 500px;
    pointer-events: all;
  }
}
</style>