<template>
  <div class="view p-4" :class="{ 'view-inner': inner }" :style="styles">
    <template v-for="(node, index) in options.nodes">
      <component :key="index" :is="getComponent(node)" :options="node"></component>
    </template>
  </div>
</template>
<script>
import { mixinStyle } from './utils';

export default {
  name: 'v-view',
  props: {
    options: {
      type: Object,
      default: () => ({})
    },
    inner: Boolean,
  },
  computed: {
    styles(){
      const { background, style } = this.options;
      return mixinStyle(background ? {
        'background': 'center 0px no-repeat',
        'background-attachment': 'fixed',
        'background-image': `url(${background})`,
        'background-size': 'cover',
        } : {}, style);
    },
  },
  created(){
    this.init();
  },
  methods: {
    init(){
      const { title } = this.options;
      title && (document.title = title);
    },
    getComponent(node){
      return node.type ? `v-${node.type}` : 'div';
    }
  }
}
</script>
<style lang="less" scoped>
.view {
  min-height: 100vh;
  &.view-inner {
    min-height: 0;
  }
}
</style>
