<template>
  <div class="mapbox">
    <!-- 顶部 -->
    <Header />
    <!-- 地图 -->
    <Map :location="roleInfo.btnVisible" :search="roleInfo.searchValue" :sessionId="roleInfo.sessionId" @handleEntityData="handleEntityData"  />
    <!-- 左侧图表 -->
    <LeftCharts @search="search" :id="roleInfo.entityId" />
    <!-- 右侧展示 -->
    <RightModals @rightVisible="rightVisible" @sendSessiondId="sendSessiondId" :id="roleInfo.entityId" />
  </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs } from "vue";
import Map from '../../components/map/index.vue';
import Header from './widget/header.vue';
import LeftCharts from './widget/leftChart.vue';
import RightModals from './widget/rightmodal.vue'
export default defineComponent({
  components: {
    Map,
    Header,
    LeftCharts,
    RightModals
  },
  setup(props, context) { 
    const data = reactive({
      roleInfo:{
        btnVisible: false,
        entityId: null,
        searchValue: null,
        sessionId: null
      }
    });
    const methods = {
      search(e){
        data.roleInfo.searchValue = e
      },
      rightVisible(e){
        data.roleInfo.btnVisible = e
      },
      handleEntityData(e){
        data.roleInfo.entityId = e
      },
      sendSessiondId(e){
        data.roleInfo.sessionId = e
      }
    };
    return {
      ...data,
      ...methods,
    };
  },
});
</script>
<style scoped>
.mapbox{
  width: 100%;
  height: 100%;
}
</style>
