<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="明渠水质监测">
          <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, onBeforeUnmount, } from "vue";
import LiuYuOne from './mingquSz.vue'
import LiuYuTwo from './linceSw.vue'
import LiuYuThree from './changzhanGq.vue'

export default {
  name: "natureNet",
  components: {
    LiuYuOne,
    LiuYuTwo,
    LiuYuThree,
  },
  setup() {
    const allData = reactive({
      ifExpand: true,
      tabName: "明渠水质监测",
    })
    // 展开收起
    const changeExpand = () => {
      allData.ifExpand = !allData.ifExpand;
    }
    const changeTab = (val) => {
      allData.tabName = val;
    }
    onMounted(() => { });
    onBeforeUnmount(() => {

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