<template>
  <div class="te-page">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "TePage",
  props: {
    page: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  full:{
    type: Boolean,
    default: true,
  },
  created: function () {
    this.goto();
  },
  watch: {
    page: function () {
      this.goto();
    },

  },
  data() {
    return {
    };
  },
  methods: {
    goto() {
      if (!this.page.path) {
        return;
      }
      this.$router.push({
        path: this.page.path,
        query: { q: this.page.params },
      });
    },
  },
};
</script>

<style>
.te-page {
  background-color: var(--page-bg-color);
  width: 100%;
  margin: 2px 2px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  overflow: auto;
  padding: 10px 10px;
  height: 100%;
}

</style>