<template>
  <div class="home">
    <div class="header">
      <img
        src="/static/images/header.png"
        alt="#"
        style="height: 50px; margin-top: 5px;margin-left:300px"
      />
      <i class="el-icon-user-solid userName" >
        <span>{{userName}}</span>
      </i>
    </div>
    <div id="cesium_container"></div>
    <TestProduct v-show="showRightcard"></TestProduct>
    <Parameter v-show="showLeftcard"></Parameter>
    <Iconbox></Iconbox>
  </div>
</template>

<script>
import cu from "@/lib/cesiumUtils";
import TestProduct from "../components/home/testProduct/index.vue";
import Parameter from '../components/home/parameter/index.vue';
import Iconbox from  '../components/home/iconbox/index.vue';
export default {
  name: "Home",
  data() {
    return {
      showRightcard:false,
      // sendToProParam:{
      //   proID:'1',
      //   ifShow:true,
      //   labelCla:'surfaceRoughness'
      // },
      isLabelCla:true,
      showLeftcard:true,
      currentUser: null,
    };
  },
  components: {
    TestProduct,
    Parameter,
    Iconbox,
  },
  created() {},

  mounted() {
    // 初始化地图
    cu.initCesium("cesium_container");
     // 监听事件
    this.bus.$on("openMenu", msg => {
      this.showRightcard=msg.ifShow;
      // this.sendToProParam = msg;
   });
   this.bus.$on('closeleftcard',msg=>{
     this.showLeftcard=msg
   })
  },
  computed:{
    userName:function(){
      return localStorage.getItem("userName")
    }
  },
  methods: {},
};
</script>
<style scoped lang="less">
.header {
  background: white;
  height: 60px;
}
#cesium_container{
  display: block;
  position: absolute;
  border: none;
  width: 100%;
  height: 100%;
}
.userName{
  font-size: 20px;
  color: #354595;
  float: right;
  margin-top: 30px;
  margin-right: 20px;
  span{
    color: #000;
    margin-left: 10px;
  }
}
</style>
