<template>
  <div id="app">
    <app-layout>
      <template slot="nav">
        <sidebar-nav :routers="route" />
      </template>
      <router-view v-if="routerDone" />
      <div
        class="loading-container"
        v-else
        v-loading="!routerDone"
      ></div>
    </app-layout>
  </div>
</template>

<script>
export default {
  name: 'app',
  created() {
    console.log(this.route);
  },
  props: {
    route: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    let dataList = [];
    for (let index = 0; index < 20; index++) {
      dataList[index] = {
        id: index,
        name: 'asdad',
      };
    }
    return {
      routerDone: false,
      filters: {},
      dataList: dataList,
      selectVal: '',
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 123,
      },
    };
  },
  mounted() {
    this.showComponents();
  },
  watch: {
    $route(newVal) {
      this.routerDone = false;
      if (newVal.meta && newVal.meta.store) {
        newVal.meta.store.install(this.$store);
      }
      this.showComponents();
    },
  },
  methods: {
    showComponents() {
      this.$nextTick(vm => {
        this.routerDone = true;
      });
    },
  },
};
</script>

<style lang="scss">
.components-demo-wrap {
  width: 500px;
  margin: 50px auto;
}
</style>

