<template>
  <div id="app">
    <NavBar :activeType="type" @set-type="setType"></NavBar>
    <section class="section">
      <TimeWindows :activeWindow="window" @set-window="setWindow"></TimeWindows>
      <Chart :window="window" :type="type"></Chart>
    </section>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import TimeWindows from '@/components/TimeWindows'
import Chart from '@/components/Chart'
export default {
  components: {
    NavBar,
    TimeWindows,
    Chart
  },
  data() {
    return {
      type: null,
      window: {}
    }
  },
  created() {
    const { type, window } = this.$route.params
    if (type) this.type = type
    if (window) this.window = window
  },
  methods: {
    setType(type) {
      this.type = type
      this.updateRoute()
    },
    setWindow(window) {
      this.window = window
      this.updateRoute()
    },
    updateRoute() {
      if (this.type) {
        const route = {
          name: 'view',
          params: {
            type: this.type,
            window: this.window.label ? this.window.label.replace(' ', '-') : undefined
          }
        }
        this.$router.push(route)
      }
    }
  }
}
</script>
<style scoped>
#app {
  height: 100%;
}
#app,
.section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.section {
  padding-bottom: 0;
  padding-top: 0;
}
</style>
