<!--用户主界面显示页面-->
<template>
<!--  页面头部-->
  <div>
    <Header/>
  </div>
  <div style="display: flex">
    <div>
      <!--  页面侧边栏-->
        <el-col>
          <h5 style="color: aquamarine">欢迎使用，祝您身体健康!</h5>
          <el-menu style="width: 200px;min-height: calc(100vh - 130px)" default-active="2" class="el-menu-vertical-demo">
            <el-menu-item index="1" @click="view_model='message'">
              <span><h3>我的消息</h3></span>
            </el-menu-item>
            <el-menu-item index="2">
              <span><h3 style="color: black" @click="view_model='postHealth'">健康上报</h3></span>
            </el-menu-item>
            <el-menu-item>
              <span style="height: 80px" ><h3 @click="view_model='contact'">查看医生</h3></span>
            </el-menu-item>
            <el-menu-item index="4">
              <span style="height: 80px" @click="view_model='case'"><h3>我的病例</h3></span>
            </el-menu-item>
          </el-menu>
        </el-col>
    </div>
<!--    页面主题（调用其他组件-->
        <postHealth v-if="view_model=='postHealth'" style="width: 800px;min-height: calc(100vh - 300px);flex: 1;padding: 100px;"/>
        <Contact v-if="view_model=='contact'" style="flex: 1;padding: 50px"/>
        <UserCase v-if="view_model=='case'" style="flex: 1;padding:50px"/>
        <message v-if="view_model=='message'" style="flex: 1;padding: 50px"/>
  </div>
</template>

<script>
// 需要用到组件导入集成
import Header from "@/components/Header";
import UserCase from "@/components/UserCase";
import Contact from "@/components/Contact";
import postHealth from "@/components/postHealth";
import message from "@/components/message";
export default {
  name: 'HomeView',
  components: {
    Header,
    UserCase,
    Contact,
    message,
    postHealth
  },
  created() {
    // 进入主界面是初始化显示为医生列表界面
    this.view_model='contact'
  },
  data(){
    return{
      view_model:"contact",
    }
  },
  methods:{
  }
}
</script>
<style>

</style>