<template>
  <div class="widget-ComCardBox" ref="widget-ComCardBox">
    <div class="box">
      <slot />
    </div>
    <div class="box-close" @click="close()"></div>
    <div class="box-line"></div>
    <div class="box-point"></div>
    <div class="box-outline"></div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
//公共卡片样式
@Component({ name: 'ComCardBox' })
export default class ComCardBox extends Vue {
  @Prop({
    type: Object,
    default: () => {
      return {
        '--height': ' 1.109375rem ' /* 213/192 */, //高度
        '--width': '1.458333rem' /* 280/192 */, //宽度
        '--borderColor': 'rgba(25, 137, 252, 1)', //边框线颜色
        '--backgroundColor': 'rgba(2, 20, 37, 0.45)' //背景颜色
      }
    }
  })
  styleData!: Object
  mounted() {
    this.setStyle()
  }
  setStyle() {
    for (let i in this.styleData) {
      ;(this.$refs['widget-ComCardBox'] as any).style.setProperty(i, this.styleData[i]) // 给变量赋值
    }
  }
  close() {
    this.$emit('close')
  }
}
</script>

<style lang='scss' scoped>
.widget-ComCardBox {
  $borderColor: var(--borderColor);
  $backgroundColor: var(--backgroundColor);
  height: var(--height);
  width: var(--width);
  left: 0.260417rem /* 50/192 */;
  // top: -0.520833rem /* 100/192 */;
  top: -0.729167rem /* 140/192 */;
  position: absolute;
  color: #fff;
  .box {
    position: relative;
    width: 100%;
    height: 100%;
    clip-path: polygon(
      0 0,
      0 0,
      100% 0,
      100% calc(100% - 0.234375rem /* 45/192 */),
      calc(100% - 0.234375rem /* 45/192 */) 100%,
      0 100%,
      0 0,
      0 0
    );
    background: linear-gradient(-45deg, $borderColor 0.161458rem /* 31/192 */, $backgroundColor 0) bottom right,
      linear-gradient(45deg, $borderColor 0, $backgroundColor 0) bottom left,
      linear-gradient(135deg, $borderColor 0, $backgroundColor 0) top left,
      linear-gradient(-135deg, $borderColor 0, $backgroundColor 0) top right;
    border: solid 1px $borderColor;
    z-index: 2;
  }
  .box-line {
    position: absolute;
    top: 50%;
    left: -0.182292rem /* 35/192 */;
    width: 0.15625rem /* 30/192 */;
    height: 0.010417rem /* 2/192 */;
    margin: 0.010417rem /* 2/192 */ 0;
    background: $borderColor;
  }
  .box-point {
    position: absolute;
    left: -0.036458rem /* 7/192 */;
    top: 50%;
    border-radius: 50% 50%;
    background: $borderColor;
    height: 0.03125rem /* 6/192 */;
    width: 0.03125rem /* 6/192 */;
  }
  .box-outline {
    position: absolute;
    top: 0.520833rem /* 100/192 */;
    left: -0.026042rem /* 5/192 */;
    height: calc(var(--height) - 0.494792rem /* 95/192 */);
    width: calc(var(--width) - 0.052083rem /* 10/192 */);
    clip-path: polygon(10px 0, 0 0, 100% 0, 100% calc(100% - 31px), calc(100% - 28px) 100%, 0 100%, 0 0, 0 10px);
    background: linear-gradient(-45deg, $borderColor 20px, transparent 0) bottom right,
      linear-gradient(45deg, $borderColor 0, transparent 0) bottom left,
      linear-gradient(135deg, $borderColor 8px, transparent 0) top left,
      linear-gradient(-135deg, $borderColor 0, transparent 0) top right;
    border-bottom: 1px solid $borderColor;
    border-left: 1px solid $borderColor;
    z-index: 1;
  }
  .box-close {
    z-index: 2;
    position: absolute;
    top: 0.052083rem /* 10/192 */;
    right: 0.052083rem /* 10/192 */;
    color: #2ba7ff;
    cursor: pointer;
  }
  .box-close:after {
    content: '✖';
  }
}
</style>