<template>
  <div class="cl-hy">
    <div class="menus">
      <Menus :activeI="0" @changeIndex="changeIndex" :menus="menus"/>
    </div>
    <div class="content">
       <Index v-if="index === 0"/>
      <Liquid v-else-if="index === 1"/>
      <Flow v-else-if="index === 2"/>
      <Quality v-else-if="index === 3"/>
    </div>
  </div>
</template>

<script>
import Menus from "@/components/Menus.vue";
import Index from "@/components/Index.vue";
import Liquid from "@/components/Liquid.vue";
import Quality from "@/components/Quality.vue";
import Flow from "@/components/Flow.vue";
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
export default {
  name: 'cl-hy',
  components: {
    Menus,
    Index,
    Quality,
    Flow,
    Liquid
  },
  setup(props, ctx) {
    const state = reactive({
      index: 0,
      menus:[
          {
            name: '首页',
          },
          {
            name: '液位',
          },
          {
            name: '流量',
          },
          {
            name: '水质',
          }
        ],
    })
    const changeIndex = (index) => {
      state.index = index;
    }
    return {
      ...toRefs(state),
      changeIndex
    }
  }
}
</script>
<style lang="scss" scoped>
.mt10 {
    margin-top: 10px;
  }
  .cl-hy {
    width: 100%;
    height:100%;
    display: flex;
    justify-content: space-between;
    // border: 1px solid red;
      .menus {
        width: 4%;
        height: 700px;
        // border: 1px solid red;
      }
      .content {
        width: 96%;
        height: 99%;
        // border: 1px solid red;
      }
    
    
  }
</style>