<template>
  <!-- 全域感知 -->
  <div class="natureNet">

    <!-- 展开收起 -->
    <div :class="['rightBgPublic' ,'animate__animated', ifExpand?'animate__fadeInRight':'goRightPublic' ]"
         @click="changeExpand">
    </div>
    <div :class="['rightContentPublic' ,'animate__animated', ifExpand?'animate__fadeInRight':'animate__fadeOutRight' ]">
      <n-tabs type="bar"
              v-model:value="tabName"
              @update:value="changeTab"
              animated>
        <n-tab-pane name="降雨特征"
                    tab="降雨特征">
          <NatureOne v-if="tabName=='降雨特征'" />
        </n-tab-pane>
        <n-tab-pane name="明渠水质监测"
                    tab="明渠水质监测">
          <LiuYuOne v-if="tabName=='明渠水质监测'" />
        </n-tab-pane>
        <n-tab-pane name="临测水位流量"
                    tab="临测水位流量">
          <LiuYuTwo v-if="tabName=='临测水位流量'" />
        </n-tab-pane>
        <n-tab-pane name="厂站工情"
                    tab="厂站工情">
          <LiuYuThree v-if="tabName=='厂站工情'" />
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, } from "vue";
import NatureOne from './rainTz.vue'

import LiuYuOne from './mingquSz.vue' //明渠水质监测
import LiuYuTwo from './linceSw.vue' //临测水位流量
import LiuYuThree from './changzhanGq.vue' //厂站工情

export default {
  name: "natureNet",
  components: {
    NatureOne,
    LiuYuOne,
    LiuYuTwo,
    LiuYuThree,
  },
  setup() {
    const allData = reactive({
      ifExpand: true,
      tabName: "降雨特征"
    })
    // 展开收起
    const changeExpand = () => {
      allData.ifExpand = !allData.ifExpand;
    }
    const changeTab = (val) => {
      allData.tabName = val;
    }
    onMounted(() => { });
    return {
      ...toRefs(allData),
      changeExpand,
      changeTab,
    };
  },
};
</script>
<style lang="less">
.natureNet {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  .n-tabs-tab {
    font-size: 16px;
  }
}
</style>