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

    <!-- 顶部内容 -->
    <div class="top_content flex flex-justcontent-center flex-justcontent-spacearound" v-if="showPanel == false">
      <div class="hujiao_button flex flex-justcontent-center flex-align-center" @click="openUserDialog">汛情回顾</div>
      <img :src="warn" class="img_box" />
    </div>
    <!-- 降雨日历 -->
    <div class="monitorCalenderBox">
      <monitorCalender v-show="isShowMonitorCalender" :hasClose="true" @change="change" @close="closeMonitorCalender" />
    </div>
  </div>

  <FXHG v-if="curType == true" />
</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 warn from '@/assets/images/fhpl/warn.png';
import monitorCalender from '@/views/oneMap/FloodStuationReview/monitorCalender.vue';
import bus from '@/bus';
const emits = defineEmits(['update:ActiveKey', 'closeMonitorCalender']);
const AllData = reactive({});
const curType = ref(false);
const isShowMonitorCalender = ref(false);
const Bottomshow = ref(false);
const control = ref('0');
const showPanel = ref(true); //面板展开收起
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
  BottomshowPanel: {
    type: Boolean,
  },
});
function openUserDialog(params) {
  isShowMonitorCalender.value = true;
}
const change = date => {
  isShowMonitorCalender.value = false;
  showPanel.value = true;
  curType.value = true;
  emits('update:ActiveKey', {
    curType: true,
    date,
  });
};
const closeMonitorCalender = () => {
  isShowMonitorCalender.value = false;
  emits('closeMonitorCalender');
};
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
    Bottomshow.value = props.BottomshowPanel;
  },
  { immediate: true }
);
onMounted(() => {
  bus.emit('checkBottom', control.value);
});
</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;
  }
  .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 {
    transition: all 0.5s;
    position: absolute;
    top: 110px;
    left: 480px;
    right: 480px;
    height: 35px;
    width: 950px;
    // 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;
      border-image: linear-gradient(0deg, #00fff0, #0091ff) 10 10;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
    }
    .img_box {
      position: relative;
      left: -50px;
    }
  }
  .monitorCalenderBox {
    position: absolute;
    left: 513px;
    top: 150px;
    width: 500px;
    pointer-events: all;
  }
}
</style>