<template>
  <div class="components flex">
    <div class="flex-none">
      <Menu theme="light" :active-name="active" @on-select="onselect">
        <menu-item name="pageField">
          数据选择 ici-Field
        </menu-item>
        <menu-item name="pageImagePreview">
          图片查看器 ici-image-preview
        </menu-item>
        <menu-item name="pageButton">
          按钮 ici-button
        </menu-item>
        <menu-item name="pageInput">
          输入 ici-input
        </menu-item>
        <menu-item name="pageTour">
          操作导航 ici-tour
        </menu-item>
      </Menu>
    </div>
    <div class="flex-auto" style="overflow-y: scroll;overflow-x: visible">
      <component v-bind:is="currentView"/>
    </div>
  </div>
</template>

<script>

  import pageButton from '../examples/page-button.vue';
  import pageInput from '../examples/page-input.vue';
  import pageImagePreview from '../examples/page-image-preview.vue'
  import pageField from '../examples/page-field'

  import pageTour from '../examples/page-tour'
  let components = {
    pageButton,
    pageInput,
    pageImagePreview,
    pageField,
    pageTour
  };
  export default {
    name: 'app',
    data() {
      return {
        active: 'pageTour'
      };
    },
    computed: {
      currentView() {
        return components[this.active];
      }
    },
    props: {
      open: Boolean,
    },

    methods: {
      onselect(e) {
        this.active = e;
      }
    },
    components: components
  };
</script>

<style scoped lang="less">
  .components {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: #fff;
    > div:first-child {
      width: 240px;
    }
    > div:last-child {
      padding: 20px;
    }
  }

  .close {
    position: absolute;
    top: 10px;
    right: 30px;
  }
</style>
