import Vue from 'vue'
import Router from 'vue-router'
import Component from 'vue-class-component'

import WithRender from './Popup2.html'

@Component({
    template:
    `<div id="app">
        <router-link to="/">/home</router-link>
        <router-link to="/popup1">/popup1</router-link>
        <router-link to="/popup2">/popup2</router-link>
        <router-view></router-view>
    </div>`
})
class App extends Vue {
}

@Component({template: '<p>Home</p>'})
class Home extends Vue {
}

@Component({template: '<p>Popup</p>'})
class Popup1 extends Vue {
    mounted() {
        console.info('mounted popup1')
    }

    beforeDestroy() {
        console.info('beforeDestroy popup1')
    }
}

@WithRender
@Component
class Popup2 extends Vue {
    mounted() {
        console.info('mounted popup2')
    }

    beforeDestroy() {
        console.info('beforeDestroy popup2')
    }
}

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/popup1',
      component: Popup1
    },
    {
      path: '/popup2',
      component: Popup2
    }
  ]
})

Vue.config.productionTip = false

// tslint:disable-next-line:no-unused-new
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})