const rootNav = {
  provide() {
    return {
      $routerView: this
    }
  },
  data() {
    return {
      routerViewName: undefined,
      drawerConfig: {
        width: '70%',
        direction: 'rtl',
        title: '',
        viewVisible: false
      },
    }
  },
  methods: {
    async openPage(viewName, params = {}, options = {}) {
      this.routerViewName = viewName;
      this.drawerConfig = Object.assign({ ...this.drawerConfig }, { ...options }, { viewVisible: true })
      await this.$router.replace({ ...params });
    },
    async toPage(viewName, params = {}, options = {}) {
      this.routerViewName = viewName;
      this.drawerConfig = Object.assign({ ...this.drawerConfig }, { ...options }, { viewVisible: true })
      await this.$router.push({
        name: viewName,
        ...params
      })
    },
    close() {
      this.drawerConfig.viewVisible = false;
    }
  },
  watch: {
    $route() {
      this.close();
    },
  }
}

const childNav = {
  inject: {
    $routerView: {
      default: ''
    }
  },
}

export { rootNav, childNav }
