<template>
    <div class="main d-flex flex-column">
        <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
        <div v-if="isSplitscreen" class="profile d-flex flex-row">
            <FairwayProfile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></FairwayProfile>
        </div>
    </div>
</template>

<style lang="scss">
.profile {
  background-color: white;
  height: 50vh;
}
</style>

<script>
import Maplayer from "../map/Maplayer";
import FairwayProfile from "../fairway/Fairwayprofile";
import { mapGetters } from "vuex";

export default {
  name: "mainview",
  components: {
    Maplayer,
    FairwayProfile
  },
  computed: {
    ...mapGetters("application", ["isSplitscreen"])
  }
};
</script>