<template>
  <router-view :key="this.$route.fullPath"></router-view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({})
export default class ViewShell extends Vue {

  /**
   * 首页上下文
   *
   * @type {*}
   * @memberof ViewShell
   */
  public context: any = {};

  /**
   * 首页参数
   *
   * @type {*}
   * @memberof ViewShell
   */
  public viewparams: any = {};

  /**
   * vue 生命周期
   *
   * @memberof ViewShell
   */
  public created() {
    this.parseViewParam();
    this.$viewTool.setIndexViewParam(this.context);
  }

  /**
   * 解析参数
   *
   * @private
   * @memberof ViewShell
   */
  private parseViewParam(): void {
    const path = this.$route.matched[this.$route.matched.length - 1].path;
    const keys: Array<any> = [];
    const curReg = this.$pathToRegExp.pathToRegexp(path, keys);
    const matchArray = curReg.exec(this.$route.path);
    let tempValue: Object = {};
    keys.forEach((item: any, index: number) => {
      Object.defineProperty(tempValue, item.name, {
        enumerable: true,
        value: matchArray[index + 1],
      });
    });
    this.$viewTool.formatRouteParams(tempValue, this.$route, this.context, this.viewparams);
  }
}
</script>

<style scoped>
.fade-enter-active,
.fade-leave-avtive {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>