<template>
  <div class="x-multi-partlet">
    <div
      class="x-multi-partlet__title"
      :title="options.title"
      v-text="options.title"
    />
    <div class="x-multi-partlet__body">
      <iframe
        v-for="url in src"
        :key="url"
        :src="url"
        class="x-multi-partlet__iframe"
        :style="iframeStyle"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class XMultiPartlet extends Vue {
  @Prop({ default: () => [] }) protected src!: any;
  @Prop({ default: () => ({}) }) protected options!: any;

  protected get iframeStyle() {
    return `height: ${Math.min(100 / this.src.length, 20)}%`;
  }
}
</script>

<style lang="sass">
.x-multi-partlet
  position: relative
  &__iframe
    border: none
    display: block
    padding: 0 20px
    margin: 0
    width: 100%
  &__title
    position: absolute
    top: 0
    left: 0
    right: 0
    box-sizing: border-box
    z-index: 2
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
    padding: 5px 20px
    text-align: center
    font: normal normal 20px sans-serif
    color: #333
  &__body
    position: absolute
    top: 30px
    left: 0
    right: 0
    bottom: 0
    display: flex
    justify-content: space-evenly
    flex-direction: column
</style>
