<template>
  <div class="page-wrapper">
    <IxSpace align="center" class="fun-bar">
      <IxSpace align="center" class="fun-bar-left">
        <IxIcon name="double-right"/>
        <template v-for="(item, index) in left">
          <template v-if="item.permission==null||hasPermission(item.permission)">
            <IxButton v-bind="item">{{ item.title }}</IxButton>
            <IxDivider v-if="index < left.length-1" class="item-divider" vertical/>
          </template>
        </template>
      </IxSpace>
      <IxSpace align="center" class="fun-bar-right">
        <template v-for="(item, index) in right">
          <template v-if="item.permission==null||hasPermission(item.permission)">
            <IxButton v-bind="item">{{ item.title }}</IxButton>
            <IxDivider v-if="index < left.length-1" class="item-divider" vertical/>
          </template>
        </template>
        <IxIcon name="double-left"/>
      </IxSpace>
    </IxSpace>
    <div class="page-content">
      <slot/>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { hasPermission } from '@/common/app'

defineOptions({name: 'Page'})

defineEmits([ 'onClick' ])

withDefaults(defineProps<{
  left?: PageTypes.Fun[]
  right?: PageTypes.Fun[]
}>(), {
  left: () => [] as PageTypes.Fun[],
  right: () => [] as PageTypes.Fun[],
})

</script>

<style lang="stylus" scoped>
.page-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .page-content {
    height calc(100% - 3rem)
    box-sizing: border-box;
    width: 100%;
    display flex
    flex-direction column
    padding 1rem
  }
}

.fun-bar {
  justify-content space-between;
  width: 100%;
  height 3rem
  border-bottom 1px solid var(--ix-color-border-secondary);
}

.fun-bar-left i,
.fun-bar-right i {
  font-size: 2rem;
  margin 0 1rem
  color: var(--ix-reset-scrollbar-thumb-bg-hover);
}

.item-divider {
  height 100%
}

</style>
