<template>
  <div class="box">
    <div class="box__topborder" />
    <div class="box-header l-flex--row center">
      <div class="title">{{ title }}</div>
      <div
        class="fullBox fullButton"
        @click="full"
      />
    </div>
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<script>
import Bus from './bus'
export default {
  name: 'Box',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    componentkey: {
      type: String,
      default: ''
    },
    bus: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    full () {
      Bus.$emit('click', this.componentkey, this.bus)
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  --mt: 8px;
  height: 100%;
  width: 100%;
  padding: 0 5px;
  border-top: 1px solid #2956f0;

  border-bottom: 1px solid #2956f0;
  clip-path: polygon(
    0 var(--mt),
    calc(50% - 80px) var(--mt),
    calc(50% - 50px) 0,
    calc(50% + 50px) 0,
    calc(50% + 80px) var(--mt),
    100% var(--mt),
    100% 100%,
    0 100%
  );
  background: linear-gradient(180deg, #233570 0, #21283f 100%);
  box-sizing: border-box;

  .box-header {
    padding-top: var(--mt);
    position: relative;
    height: 30px;
    line-height: 30px;
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #ffffff;
    }
    .fullBox {
      position: absolute;
      right: 4px;
    }
    .fullButton {
      width: 16px;
      height: 16px;
      cursor: pointer;
      background: url("~@/assets/icon_enlarge.png") 0 0 / 100% 100% no-repeat;
    }
  }
  .content {
    color: #ffffff;
    height: calc(100% - 30px);
  }
}
.box__topborder {
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  top: -1px;
  background: linear-gradient(
    270deg,
    rgb(41, 86, 238),
    rgb(33, 40, 63),
    transparent calc(50% - 80px),
    transparent calc(50% + 80px),
    rgb(33, 40, 63),
    rgb(41, 86, 238)
  );
  clip-path: polygon(
    0 8px,
    calc(50% - 80px) 8px,
    calc(50% - 50px) 0,
    calc(50% + 50px) 0,
    calc(50% + 80px) 8px,
    100% 8px,
    100% 100%,
    0 100%
  );
}
</style>
