<template>
  <component
    :is="componentName"
    :default-path="defaultPath"
    :menus="menus"
  ></component>
</template>

<script>
import { prefix } from "@/libs/config";

import wContent from "./content";
import wNavWrapper from "@/components/nav-wrapper";

import { replace } from "@/utils/module/util";

export default {
  components: { wContent, wNavWrapper },
  name: `${prefix}Layout`,
  props: {
    defaultPath: {
      type: String,
      default: ""
    },
    menus: {
      type: Array,
      default: () => []
    },
    env: {
      type: String,
      default: "production",
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ["production", "development"].indexOf(value) !== -1;
      }
    }
  },
  watch: {
    $route(to) {
      let { name, query, params, fullPath, hash, path } = to;
      replace({ name, query, params, fullPath, hash, path });
    }
  },
  computed: {
    componentName() {
      return this.env === "production" ? "wContent" : "wNavWrapper";
    }
  }
};
</script>
