<template>
  <a-popover :placement="placement" trigger="click">
    <template slot="content">
      <a-button-group>
        <a-button :key="app.code" @click="onChangeApp(app)" v-for="app in apps">{{ app.name }}</a-button>
      </a-button-group>
    </template>
    <div class="yo-apps-selector">
      <span>{{ appActived.name }}</span>
    </div>
  </a-popover>
</template>
<script>
export default {
  props: {
    apps: {
      type: Array,
      require: true,
    },
  },

  computed: {
    placement() {
      const layout = this.$root.global.settings.layout;
      switch (layout) {
        case 'left-menu':
          return 'right';
        case 'right-menu':
          return 'left';
        default:
          return 'bottom';
      }
    },

    appActived() {
      return this.apps.find((p) => p.active) || {};
    },
  },

  created() {
    console.log(this.apps);
  },

  methods: {
    onChangeApp(app) {
      this.$emit('change-app', app);
    },
  },
};
</script>