<template>
  <!-- 规划引领 -->
  <div class="sheHuiNet animate__animated animate__InRight">
    <!-- 展开收起 -->
    <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="value" @update:value="changeTab" animated>
        <n-tab-pane name="阶段一靶向治理" tab="阶段一靶向治理">
          <div class="publicTitle">流域概况</div>
          <SHOne v-if="value == '阶段一靶向治理'" />
        </n-tab-pane>
        <n-tab-pane name="阶段二区域治理" tab="阶段二区域治理">
          <div class="publicTitle">区域治理阶段</div>
          <SHTwo v-if="value == '阶段二区域治理'" />
        </n-tab-pane>
        <n-tab-pane name="阶段三系统治理" tab="阶段三系统治理">
          <div class="publicTitle">系统治理阶段</div>
          <SHThree v-if="value == '阶段三系统治理'" />
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount } from 'vue';
import SHOne from './sheHuiOne.vue';
import SHTwo from './sheHuiTwo.vue';
import SHThree from './sheHuiThree.vue';

export default {
  name: 'sheHuiNet',
  components: {
    SHOne,
    SHTwo,
    SHThree,
  },
  setup() {
    const allData = reactive({
      ifExpand: true,
      value: '阶段一靶向治理',
    });
    // 展开收起
    const changeExpand = () => {
      allData.ifExpand = !allData.ifExpand;
    };
    // 切换tab
    const changeTab = (val) => {
      allData.value = val;
    };
    onMounted(() => {
      // if (mapbox._map.getLayer('kriging_layer')) {
      //   mapbox._map.removeLayer('kriging_layer');
      //   mapbox._map.removeLayer('marker_kriging_layer');
      //   mapbox._map.removeSource('kriging_source');
      //   mapbox._map.removeSource('marker_kriging_source');
      // }
    });
    onBeforeUnmount(() => {});
    return {
      ...toRefs(allData),
      changeExpand,
      changeTab,
    };
  },
};
</script>
<style lang="less">
.sheHuiNet {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;

  .n-tabs-nav-scroll-content {
    width: 377px;
    height: 60px;
    background: url('@/assets/newImgs/tabBg.png') no-repeat center;
    background-size: 100% 100%;
  }
  .n-tabs .n-tabs-tab-wrapper {
    width: 135px;
    justify-content: center;
    .n-tabs-tab {
      font-size: 16px;
    }
  }
  .n-tabs .n-tab-pane {
    height: 805px;
  }
}
</style>