<template>
  <div class="portal-container">
    <ht-portal
      ref="htPortal"
      :column-layout-alias="columnLayoutAlias"
      :current-user="currentUser"
      @click-process="handleClickProcess"
      @get-column-layout="getColumnLayout"
      @change-layout="changeLayout"
    ></ht-portal>
    <leader-dialog ref="leaderDialog" />
  </div>
</template>

<script>
  import portalAction from '@/mixins/portalAction'
  import { mapState } from 'vuex'

  const LeaderDialog = () => import('@/views/matter/components/LeaderDialog')
  export default {
    name: 'AppPortal',
    components: {
      LeaderDialog,
    },
    mixins: [portalAction],
    props: {
      id: {
        type: String,
        default: '',
      },
      columnLayoutAlias: {
        type: String,
        default: '',
      },
    },
    computed: {
      ...mapState({
        currentUser: function (state) {
          return { username: state.user.username || '' }
        },
      }),
    },
  }
</script>

<style lang="scss" scoped>
  .portal-container {
    height: 100%;
    overflow: auto;
  }
</style>
