<template>
  <div id="default-layout">
    <Header />
    <div class="cover none-events" style="margin: 0 auto;">
      <div id="amap-container" class="events"></div>
    </div>
    <div class="view-page">
      <router-view />
    </div>
    <div class="action-panel-wrapper">
      <ActionPanel />
    </div>
  </div>
</template>

<script>
import Header from './modules/Header.vue'
import ActionPanel from './modules/ActionPanel'
import { AMapService } from '@/service/AMapService'
import { createDisasterPointHTML, createDisasterInfoWindowHTML } from '@/service/HTMLContent'

export default {
  name: 'DefaultLayout',
  provide() {
    return {
      namespace: 'bei-data-v'
    }
  },
  data: () => ({
    mapService: null,
    pointsData: [
    {
      name: "北碚互通",
      position: [106.408468,29.812347],
      content: createDisasterPointHTML,
      data: {
        content: createDisasterInfoWindowHTML,
        data: {
          type: "火灾扑救",
          occurrenceTime: "2022年2月16日15:44:50",
          occurrenceAddress: "重庆市北碚互通",
          competentOrg: "渝中区北碚消防救援站",
          outOfResource: "3辆消防车、10人",
          outOfTime: "2022年2月16日15:57:15",
          waterTime: "2022年2月16日15:57:15",
        }
      }
    },
    {
      name: "重庆市北碚区中医院",
      position: [106.410013,29.801622],
      content: createDisasterPointHTML,
      data: {
        content: createDisasterInfoWindowHTML,
        data: {
          type: "火灾扑救",
          occurrenceTime: "2022年2月16日15:44:50",
          occurrenceAddress: "重庆市北碚区中医院",
          competentOrg: "渝中区北碚消防救援站",
          outOfResource: "3辆消防车、10人",
          outOfTime: "2022年2月16日15:57:15",
          waterTime: "2022年2月16日15:57:15",
        }
      }
    }]
  }),
  created() {
    this.mapService = new AMapService(this.$router,(instance) => {
      instance.addPoints(this.pointsData)
    })
    this.mapService.loadMap('amap-container')
  },
  components: {
    Header,
    ActionPanel
  }
}
</script>

<style lang="less">
#default-layout {
  width: 100vw;
  height: 100vh;
  background-color: #060e2b;
  background-image: url("@/assets/images/global-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  
 
  .cover {
      position: relative;
      width: 1600px;
    height: 80vh;
  }

  .cover:after {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      box-shadow:0 0 60px 60px #060e2b inset;
  }

  #amap-container {
    width: 1600px;
    height: 80vh;
  }

  .view-page {
    position: absolute;
    top: 145px;
    width: 100%;
  }

  .action-panel-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-48.8%, 0);
  }
}
</style>
