<template>
  <div class="app-container home" >
              <div class="title_top" style="position:fixed">
                  <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            style="height:100%"
                            @select="handleSelect"
                            background-color="#164394"
                            text-color="#fff"
                            active-text-color="#fff">
                            <el-menu-item index="1">施工管理</el-menu-item>
                            <el-menu-item index="2">车辆管理</el-menu-item>
                            <el-menu-item index="3">库存管理</el-menu-item>
                            <el-menu-item index="4">档案管理</el-menu-item>
                            </el-menu>

                               <div class="avatar-wrapper" style="float:right;padding-top:10rem;position: absolute;right: 10px;display:inline-flex">
                                      <!-- <div> <img :src="user.photo" class="user-avatar">  </div> -->
                                      <div style="font-size: 16rem;
                                                  font-family: PingFangSC, PingFangSC-Regular;
                                                  font-weight: 400;
                                                  text-align: left;
                                                  color: #ffffff;
                                                  line-height: 40rem;
                                                  margin-left:15rem">{{user.nickName}}</div>
                                      <div style="margin-left:5rem" > <img src="@/assets/images/images/exit.png" @click="logout"/>  </div>
                                </div>
              </div>
              <div style="display:inline-flex;width:100%;height:93vh;top:7vh;position:fixed">
                   <div class='left_menu'>
                             <div style="text-align:center;margin-top:33rem" @click='handleMsg("/plan",1)'>
                                <!-- <router-link key="collapse" class="sidebar-logo-link" to="/system/plan"> -->
                                        <img src='@/assets/images/images/plan_entry.png' style="width:40rem;height:40rem"/>
                                        <div :class='divSelect == 1?"icon_fontSelect":"icon_font"'>
                                                计划录入
                                        </div>
                                <!-- </router-link> -->
                             </div>

                              <div style="text-align:center;margin-top:30rem" @click='handleMsg("/report",2)'>
                                   <img src='@/assets/images/images/construction_report.png' style="width:40rem;height:40rem"/>
                                   <div :class='divSelect == 2?"icon_fontSelect":"icon_font"'>
                                          施工报备
                                   </div>
                             </div>

                              <div style="text-align:center;margin-top:30rem">
                                   <img src='@/assets/images/images/statistical_analysis.png' style="width:40rem;height:40rem"/>
                                   <div :class='divSelect == 3?"icon_fontSelect":"icon_font"'>
                                          统计分析
                                   </div>
                             </div>
                   </div>
                   <div class='right_content'>
                         <div style="height:89vh">
                            <router-view style="width:100%;height:100%"></router-view>
                         </div>
                   </div>
              </div>
  </div>
</template>

<script>
import { getUserProfile } from "@/api/system/user";

export default {
  name: "Index",
  // components: {
  //   AppMain,
  // },
  data() {
    return {
      // 版本号
      version: "3.8.2",
      activeIndex:"1",
      divSelect:1,
      user:{}
    };
  },
  mounted:function(){
         this.getUserProfile()
  },
  methods: {
    handleSelect() {

    },

    goTarget(href) {
      window.open(href, "_blank");
    },
     handleMsg(src,no) {
       this.divSelect = no
      this.$router.push({path: src})
    },
    getUserProfile(){
       getUserProfile().then(response =>{
            console.log(response);
            this.user = response.data
            this.user.photo = process.env.VUE_APP_BASE_API+response.data.avatar;
       })
    },
      async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/home';
        })
      }).catch(() => {});
    }
  },
};

</script>

<style scoped lang="scss">
   .home{
       padding: 0 0 0 0;
       height:100vh;
       overflow: hidden
   }

   .title_top{
          background: url("~@/assets/images/images/img_top_full.png") no-repeat;
          background-size: 100% 100%;
          width:100%;
          height:7vh;
          padding-left:551rem;
          display: inline-flex
   }

  .user-avatar {
      cursor: pointer;
      width: 40rem;
      height: 40rem;
      border-radius: 50%;
    }

   .left_menu{
          background-color: #001529;
          width:7%;
          height:100%
   }

   .icon_font{
          font-size: 14rem;
          color:#ffffff
   }

   .icon_fontSelect{
          font-size: 14rem;
          color:#4E8BFB
   }

   .right_content{
          background-color: #F0F2F5;
          width:93%;
          height:100%;
          padding-top:2vh;
          padding-left:2vh
   }
</style>

