<template>
  <a-layout style="height: 100%;">

    <a-layout-header class="header" style="padding: 0;">
      <div style="float: left; padding: 0 20px 0 20px;"><img src="@assets/vue.svg" alt=""/></div>
      <a-menu
          theme="dark"
          mode="horizontal"
          style="line-height: 64px;"
      >
        <a-menu-item key="curd" @click="pageName='curd'">Curd</a-menu-item>
        <a-menu-item key="cameraCenter" @click="pageName='cameraCenter'">CameraCenter</a-menu-item>
      </a-menu>
    </a-layout-header>

    <a-layout>
      <div class="page-wrapper">
        <div class="page-tab" v-if="pageName==='curd'">
          <Curd/>
        </div>
        <div class="page-tab" v-else-if="pageName==='cameraCenter'">
          <CameraCenter/>
        </div>
      </div>
    </a-layout>

  </a-layout>
</template>

<script>
import Curd from '@views/page/curd.vue';
import CameraCenter from '@views/page/cameraCenter.vue';

export default {
  name: 'Index',
  components: {Curd, CameraCenter},
  props: {
    pageName: {type: String, default: 'curd'}
  },
}

</script>

<style scoped>
</style>