<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;
  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;
  });

  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.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;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-shadow: inset 0 0 5px 5px #47eef38a;
    z-index: 111;
  }
  .RightBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    right: 10px;
    top: 70px;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-shadow: inset 0 0 5px 5px #47eef38a;
  }
  .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 #53c6c9;
      // 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>