<template>
  <div class="cl-hy">
    <div class="menus">
      <Menus :activeI="0" @changeIndex="changeIndex" :menus="menus"/>
    </div>
    <div class="content">
       <Gindex v-if="index === 0"/>
      <Zhibiao v-else-if="index === 1"/>
      <Ganalyse v-else-if="index === 2"/>
      <History v-else-if="index === 3"/>
    </div>
  </div>
</template>

<script>
import Menus from "@/components/Menus.vue";
import Gindex from "@/components/Gindex.vue";
import Zhibiao from "@/components/Zhibiao1.vue";
import Ganalyse from "@/components/Ganalyse1.vue";
import History from "@/components/History1.vue";
import { onMounted, reactive, ref, toRefs, nextTick } from "vue";
export default {
  name: 'weather',
  components: {
    Menus,
    Gindex,
    Zhibiao,
    Ganalyse,
    History
  },
  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:100%;
        // border: 1px solid red;
      }
    
    
  }
</style>