<template>
  <div id="ShowAndHidden" ref="ShowAndHiddenRef" @click="BoxShow()">
    显示/隐藏
  </div>
  <transition name="fade1">
    <div id="oneMapBoxs_Left1" v-show="isShow">
      <div class="oneMapBoxs_Title">天气信息</div>
      <div class="oneMapBoxs_Content">
        <LeftBox1 />
      </div></div
  ></transition>
  <transition name="fade1">
    <div id="oneMapBoxs_Left2" v-show="isShow">
      <div class="oneMapBoxs_Title">实时抽排量</div>
      <div class="oneMapBoxs_Content">
        <LeftBox2 />
      </div></div
  ></transition>
  <transition name="fade1">
    <div id="oneMapBoxs_Left3" v-show="isShow">
      <div class="oneMapBoxs_Title">事件及报警看板</div>
      <div class="oneMapBoxs_Content">
        <LeftBox3 />
        <!-- <div class="BaoJingHeader">
        <span class="BaoJingHeaderList_span1">泵站名称</span>
        <span class="BaoJingHeaderList_span2">警情类型</span>
        <span class="BaoJingHeaderList_span3">警情描述</span>
      </div>
      <div class="BaoJingBody">
        <div
          class="BaoJingBodyList"
          v-for="(item, index) in BaoJingData"
          :key="index"
        >
          <span class="BaoJingBodyList_span1">
            <n-ellipsis style="max-width: 120px">
              {{ item.pumpName }}
            </n-ellipsis></span
          >
          <span class="BaoJingBodyList_span2">
            <n-ellipsis style="max-width: 100px">
              {{ item.alarmType }}
            </n-ellipsis></span
          >
          <span class="BaoJingBodyList_span3">
            <n-ellipsis style="max-width: 140px">
              {{ item.remarks }}
            </n-ellipsis></span
          >
        </div>
      </div> -->
      </div>
    </div>
  </transition>
  <transition name="fade2">
    <div id="oneMapBoxs_Right1" v-show="isShow">
      <div class="oneMapBoxs_Title">
        泵闸抽排信息
        <div id="BengZhaChangeBox">
          <div
            class="BengZhaChangeList"
            v-for="(item, index) in BengZhaChangeData"
            :key="item.id"
            @click="BengZaChange(item, index)"
            :class="{
              BengZhaChangeList_check: BengZhaChangeList_checkID == item.id,
            }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="oneMapBoxs_Content">
        <RightBox1 />
      </div></div
  ></transition>
  <transition name="fade2">
    <div id="oneMapBoxs_Right2" v-show="isShow">
      <div class="oneMapBoxs_Title">泵闸流域关联</div>
      <div class="oneMapBoxs_Content"><RightBox2 /></div>
    </div>
  </transition>
  <transition name="fade3">
    <div id="oneMapBoxs_Bottom1" v-show="isShow">
      <div class="oneMapBoxs_Title">未来七天雨量预报(mm)</div>
      <div class="oneMapBoxs_Content">
        <!-- <BottomBox1 /> -->

        <LineChart :data="chartData2"></LineChart>
      </div></div
  ></transition>
  <transition name="fade3">
    <div id="oneMapBoxs_Bottom2" v-show="isShow">
      <div class="oneMapBoxs_Title">排班情况</div>
      <div class="oneMapBoxs_Content">
        <BottomBox2 />
      </div>
    </div>
  </transition>
</template>
<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import LeftBox1 from "./boxsCompontents/leftBox1.vue";
import LeftBox2 from "./boxsCompontents/leftBox2.vue";
import LeftBox3 from "./boxsCompontents/leftBox3.vue";
import RightBox1 from "./boxsCompontents/rightBox1.vue";
import RightBox2 from "./boxsCompontents/rightBox2.vue";
import BottomBox1 from "./boxsCompontents/BottomBox1.vue";
import BottomBox2 from "./boxsCompontents/BottomBox2.vue";
import LineChart from "./../../prevention/components/LineChart.vue";
export default {
  name: "oneMapBoxs",
  components: {
    LeftBox1,
    LeftBox2,
    LeftBox3,
    RightBox1,
    RightBox2,
    BottomBox1,
    BottomBox2,
    LineChart,
  },
  setup(props, context) {
    const AllData = reactive({
      isShow: true,
      //   泵闸抽排信息
      BengZhaChangeData: [
        {
          name: "水位",
          id: "0",
        },
        {
          name: "泵机数",
          id: "1",
        },
        {
          name: "日处理量",
          id: "2",
        },
      ],
      BengZhaChangeList_checkID: null,
      chartData2: {
        xData: [
          "11月11日",
          "11月12日",
          "11月13日",
          "11月14日",
          "11月15日",
          "11月16日",
          "11月17日",
        ],
        info: [
          {
            y: [15, 30, 24, 28, 35, 14, 26],
            color: "rgba(255, 69, 69, 1)",
            bgColor: [
              { offset: 0.1, color: "rgba(255, 69, 69, .8)" },
              { offset: 1, color: "rgba(255, 69, 69, .1)" },
            ],
          },
        ],
        legendShow: false,
        yAxisShow: true,
        yLineShow: true,
        yAxisColor: ["rgba(97, 96, 96, .1)"],
        yName: "%",
        smooth: true,
      },
    });
    let ShowAndHiddenRef = ref(null);
    // 泵闸抽排信息
    function BengZaChange(item, index) {
      AllData.BengZhaChangeList_checkID = item.id;
    }
    function BoxShow() {
      AllData.isShow = !AllData.isShow;
      context.emit("BoxisShow", AllData.isShow);
      if (AllData.isShow) {
        ShowAndHiddenRef.value.className = "Button1";
        ShowAndHiddenRef.value.style = "left: 436px;";
      } else {
        ShowAndHiddenRef.value.className = "Button2";
        ShowAndHiddenRef.value.style = "left: 10px;";
      }
    }
    onMounted(() => {
      AllData.BengZhaChangeList_checkID = AllData.BengZhaChangeData[0].id;
    });
    return {
      ...toRefs(AllData),
      BengZaChange,
      BoxShow,
      ShowAndHiddenRef,
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#oneMapBoxs_Left1 {
  position: absolute;
  left: 0px;
  top: 0;
  width: 400px;
  height: 225px;
  background: var(--OneMap-Left1BackgroundImg);
  background-size: 100% 100%;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
}
#oneMapBoxs_Left2 {
  position: absolute;
  left: 0px;
  top: 240px;
  width: 400px;
  height: 307px;
  background: var(--OneMap-Left2BackgroundImg);
  background-size: 100% 100%;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
}
#oneMapBoxs_Left3 {
  position: absolute;
  left: 0px;
  top: 560px;
  width: 400px;
  // height: 298px;

  height: calc(100% - 560px);
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  background: var(--OneMap-Left3BackgroundImg);
  background-size: 100% 100%;
}
#oneMapBoxs_Right1 {
  position: absolute;
  right: 0px;
  top: 0;
  width: 402px;
  height: 311px;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  background: var(--OneMap-Right1BackgroundImg);
  background-size: 100% 100%;

  #BengZhaChangeBox {
    position: absolute;
    width: 200px;
    height: 35px;
    top: 0;
    right: 0;
    box-sizing: border-box;
    padding-top: 8px;

    .BengZhaChangeList {
      float: left;
      height: 26px;
      box-sizing: border-box;
      border: 1px solid #989797;
      font-size: 12px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      line-height: 26px;
      padding: 0 10px;
      margin-right: 5px;
      cursor: pointer;
    }
    .BengZhaChangeList_check {
      background: #1f78f7;
      color: white;
    }
  }
}
#oneMapBoxs_Right2 {
  position: absolute;
  right: 0px;
  top: 325px;
  width: 400px;
  // height: 532px;
  height: calc(100% - 325px);
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  background: var(--OneMap-Right2BackgroundImg);
  background-size: 100% 100%;
}
#oneMapBoxs_Bottom1 {
  position: absolute;
  bottom: 0px;
  left: 419px;
  width: 480px;
  height: 216px;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  background: var(--OneMap-BottomBackgroundImg);
  background-size: 100% 100%;
}
#oneMapBoxs_Bottom2 {
  position: absolute;
  bottom: 0px;
  left: 920px;
  width: 480px;
  height: 216px;
  padding: 15px 15px 10px 15px;
  box-sizing: border-box;
  background: var(--OneMap-BottomBackgroundImg);
  background-size: 100% 100%;
}
.oneMapBoxs_Title {
  width: 100%;
  height: 28px;
  font-size: 18px;
  font-family: Alibaba PuHuiTi;
  font-weight: bold;
  color: var(--OneMap-Box_Title);
  line-height: 28px;
  margin-bottom: 14px;
  position: relative;
}
.oneMapBoxs_Content {
  //   background: cadetblue;
  width: 100%;
  height: calc(100% - 42px);
}

#ShowAndHidden {
  position: absolute;
  left: 436px;
  top: 0px;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: yellowgreen;
  cursor: pointer;
}

/* 设置持续时间和动画函数 */
.fade1-enter-active {
  animation: test1 0.6s linear;
}
.fade1-leave-active {
  animation: test1 0.6s linear reverse;
}
.fade2-enter-active {
  animation: test2 0.6s linear;
}
.fade2-leave-active {
  animation: test2 0.6s linear reverse;
}
.fade3-enter-active {
  animation: test3 0.6s linear;
}
.fade3-leave-active {
  animation: test3 0.6s linear reverse;
}
// 左边
@keyframes test1 {
  0% {
    left: -400px;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}
// 右边
@keyframes test2 {
  0% {
    right: -400px;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}
// 底部
@keyframes test3 {
  0% {
    bottom: -220px;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}
.Button1 {
  animation: Button1 0.6s linear;
}
.Button2 {
  animation: Button2 0.6s linear;
}
// 按钮
@keyframes Button1 {
  0% {
    left: 10px;
  }
  100% {
    left: 436px;
  }
}
@keyframes Button2 {
  0% {
    left: 436px;
  }
  100% {
    left: 10px;
  }
}
</style>