<template>
  <div
    class="c-web"
    :style="styles"
  >
    <iframe
      class="c-web__iframe"
      :src="node.href"
    />
    <i class="c-web__icon iconfont iconchaolianjie" />
  </div>
</template>

<script>
import { WidgetType } from '../constant'

export default {
  name: WidgetType.WEB,
  props: {
    node: {
      type: Object,
      default: null
    }
  },
  computed: {
    styles () {
      const {
        width,
        height
      } = this.node
      return {
        width: `${width}px`,
        height: `${height}px`,
        'font-size': `${Math.min(width, height) / 3 | 0}px`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.c-web {
  position: relative;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.8);

  &__iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  &__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: inherit;
    z-index: 9;
  }
}
</style>
