<template>
  <div
    class="l-flex--col c-box"
    :class="{ fullscreen }"
  >
    <div class="l-flex__none c-box__top" />
    <div class="l-flex__fill l-flex--col c-box__main has-bg">
      <div class="l-flex__none c-box__header u-text-center">
        <div class="u-bold">{{ title }}</div>
        <i
          class="c-box__button has-bg u-pointer"
          @click.stop="onToggle"
        />
      </div>
      <div class="l-flex__fill l-flex--col">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Box',
  props: {
    title: {
      type: String,
      default: '标题'
    }
  },
  data () {
    return {
      fullscreen: false
    }
  },
  methods: {
    onToggle () {
      this.$emit('fullscreen', this.fullscreen = !this.fullscreen)
    }
  }
}
</script>

<style lang="scss" scoped>
.c-box {
  position: relative;
  height: 100%;
  width: 100%;
  color: #fff;
  border-bottom: 1px solid #2956f0;

  &.fullscreen {
    position: absolute;
    width: 1084px;
    height: 628px;
    top: 34px;
    left: 50%;
    border-bottom: none;
    transform: translateX(-50%);
    overflow: visible;
    z-index: 9;

    &::before {
      content: "";
      position: absolute;
      top: -34px;
      left: -98px;
      width: 1280px;
      height: 720px;
      background-color: rgba(#000, 0.85);
      z-index: -1;
    }

    .c-box {
      &__top {
        height: 0;
        background: none;
      }

      &__main {
        padding: 20px 16px 16px;
        background-color: transparent;
        background-image: url("~@/assets/bg_big.png");
      }

      &__header {
        font-size: 24px;
        line-height: 32px;
        height: 48px;
      }

      &__button {
        top: 6px;
        right: 10px;
        width: 20px;
        height: 20px;
        background-image: url("~@/assets/icon_narrow.png");
      }
    }
  }

  &__top {
    height: 9px;
    background: url("~@/assets/bg_top_s.png") center bottom / 172px 9px
      no-repeat;
  }

  &__main {
    padding: 0 8px 8px;
    background-color: #21283f;
    overflow: hidden;
  }

  &__header {
    position: relative;
    height: 26px;
    font-size: 14px;
    line-height: 18px;
  }

  &__button {
    position: absolute;
    top: 3px;
    right: 2px;
    width: 12px;
    height: 12px;
    transform: translateX(50%);
    background-image: url("~@/assets/icon_enlarge.png");
  }
}
</style>
