<template>
  <!-- 流域水管理网 -->
  <div class="liuYuWater">

    <!-- 展开收起 -->
    <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="河道巡查">
          <RiverXc />
        </n-tab-pane>
        <n-tab-pane name="厂站运维"
                    tab="厂站运维">
          <WaterOne />
        </n-tab-pane>
        <!-- <n-tab-pane name="公众参与"
                    tab="公众参与">
          <UserCy />
        </n-tab-pane> -->
      </n-tabs>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount, } from "vue";
import WaterOne from './changzhanYw.vue' //厂站运维
import UserCy from './userCy.vue' //公众参与
import RiverXc from './riverXc.vue' //河道巡查

export default {
  name: "liuYuWater",
  components: {
    WaterOne,
    UserCy,
    RiverXc
  },
  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">
.liuYuWater {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  .n-tabs-tab {
    font-size: 16px;
  }
  .n-tabs .n-tabs-tab-pad {
    width: 20px !important;
  }
}
</style>