<template>
  <div class="prevention_right">
    <ul class="tabs">
      <li
        v-for="(item, i) in tabList"
        :key="item.id"
        :class="currentIndex == i ? 'active' : ''"
        @click="changeTab(i)"
      >
        <n-dropdown
          trigger="hover"
          :show-arrow="true"
          @select="handleSelect"
          :options="item.option"
        >
          <span @click="handleClick">{{ item.name }}</span>
        </n-dropdown>
      </li>
    </ul>
    <div v-if="currentIndex == 0">
      <Meteorological></Meteorological>
    </div>
    <div v-if="currentIndex == 1">
      <Rainfall></Rainfall>
    </div>
    <div v-if="currentIndex == 2">
      <PumpGate></PumpGate>
    </div>
    <div v-if="currentIndex == 3">
      <RiverCourse></RiverCourse>
    </div>
    <div v-if="currentIndex == 4">
      <ControlInspection></ControlInspection>
    </div>
    <div v-if="currentIndex == 5">
      <GradeFlood v-if="key == '6-1'"></GradeFlood>
      <ForecastArea v-if="key == '6-2'"></ForecastArea>
      <WorkingAnalysis v-if="key == '6-3'"></WorkingAnalysis>
      <ExtractionAnalysis v-if="key == '6-4'"></ExtractionAnalysis>
      <Recommendations v-if="key == '6-5'"></Recommendations>
      <Issuewarning
        :keyIndex="key"
        v-if="key == '6-6' || key == '6-7'"
      ></Issuewarning>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, h, onMounted } from "vue";
import Meteorological from "./components/Meteorological.vue";
import Rainfall from "./components/Rainfall.vue";
import PumpGate from "./components/PumpGate.vue";
import RiverCourse from "./components/RiverCourse.vue";
import ControlInspection from "./components/ControlInspection.vue";
import GradeFlood from "./components/GradeFlood.vue";
import Issuewarning from "./components/Issuewarning.vue";
import Recommendations from "./components/Recommendations.vue";
import ExtractionAnalysis from "./components/ExtractionAnalysis.vue";
import WorkingAnalysis from "./components/WorkingAnalysis.vue";
import ForecastArea from "./components/ForecastArea.vue";
export default {
  components: {
    Meteorological,
    Rainfall,
    PumpGate,
    RiverCourse,
    ControlInspection,
    GradeFlood,
    Issuewarning,
    Recommendations,
    ExtractionAnalysis,
    WorkingAnalysis,
    ForecastArea,
  },
  setup() {
    const state = reactive({
      tabList: [
        {
          id: 0,
          name: "气象",
          option: [
            {
              label: "气象预报",
              key: "1-1",
            },
            {
              label: "数据分析",
              key: "1-2",
            },
          ],
        },
        {
          id: 1,
          name: "降雨",
          option: [
            {
              label: "基础信息",
              key: "2-1",
            },
            {
              label: "数据分析",
              key: "2-2",
            },
          ],
        },
        {
          id: 2,
          name: "闸泵",
          option: [
            {
              label: "基础信息",
              key: "3-1",
            },
            {
              label: "数据分析",
              key: "3-2",
            },
          ],
        },
        {
          id: 3,
          name: "河道",
          option: [
            {
              label: "河湖查询",
              key: "4-1",
            },
            {
              label: "堤防查询 ",
              key: "4-2",
            },
          ],
        },
        {
          id: 4,
          name: "防汛检查",
          option: [
            {
              label: "防大风检查",
              key: "5-1",
            },
            {
              label: "防暴雨检查 ",
              key: "5-2",
            },
            {
              label: "电缆沟进水 ",
              key: "5-3",
            },
            {
              label: "主控室进水 ",
              key: "5-4",
            },
            {
              label: "洪水进站抢险 ",
              key: "5-5",
            },
            {
              label: "停电逃生预案 ",
              key: "5-6",
            },
            {
              label: "防汛通讯 ",
              key: "5-7",
            },
          ],
        },
        {
          id: 5,
          name: "应急指挥",
          option: [
            {
              label: "防汛等级",
              key: "6-1",
            },
            {
              label: "预报区域 ",
              key: "6-2",
            },
            {
              label: "工况分析 ",
              key: "6-3",
            },
            {
              label: "抽析分析 ",
              key: "6-4",
            },
            {
              label: "泵站建议 ",
              key: "6-5",
            },
            {
              label: "发布预警 ",
              key: "6-6",
            },
            {
              label: "解除预警 ",
              key: "6-7",
            },
          ],
        },
      ],
      key: "",
      currentIndex: 0,
      show: true,
    });
    const changeTab = (i) => {
      // state.currentIndex = i;
    };
    const handleSelect = (key) => {
      state.currentIndex = key.split("-")[0] - 1;
      state.key = key;
    };
    const handleClick = () => {
      console.log(1);
    };
    const showRight = () => {
      state.show = false;
    };
    return {
      ...toRefs(state),
      handleClick,
      handleSelect,
      changeTab,
      showRight,
    };
  },
};
</script>

<style lang="less" scoped>
.prevention_right {
  padding: 20px;
  position: absolute;
  top: 0;
  right: 10px;
  width: 650px;
  height: calc(100% - 5px);
  border-top: 2px solid;
  border-color: var(--border-top);
  background: var(--bg-right);
  box-shadow: 0 0 5px 5px rgba(25, 40, 192, 0.35);
  .tabs {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid;
    border-color: #1f6273;

    li {
      flex: 1;
      display: flex;
      justify-content: center;
      cursor: pointer;
      span {
        padding: 3px;
      }
      &.active {
        span {
          border-bottom: 2px solid;
          border-color: #1b6aef;
        }
      }
    }
  }
}
</style>