<script setup>
import { Close } from '@vicons/ionicons5'
const props = defineProps({
  title: {
    type: String,
    default: '标题',
  },
  showClose: {
    type: Boolean,
    default: false,
  },
  closeClick: {
    type: Function,
    default: () => {},
  },
})
</script>

<template>
  <div class="border-warp">
    <div class="warp-bg box-size"></div>
    <svg class="left-top">
      <use xlink:href="#left-polygon" />
    </svg>
    <svg class="right-top">
      <use xlink:href="#left-polygon" />
    </svg>
    <svg class="left-bottom">
      <use xlink:href="#left-polygon" />
    </svg>
    <svg class="right-bottom">
      <use xlink:href="#left-polygon" />
    </svg>
    <svg width="150px" height="150px">
      <defs>
        <g id="left-polygon">
          <polygon
            id="polygon1"
            points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
            fill="#3F91C1"
          >
            <!-- #3f79b0#235fa7;#4fd2dd#4b5f87 -->
            <animate
              attributeName="fill"
              values="#4fd2dd;#3f79b0;#3F91C1;#3f79b0;#4fd2dd;"
              dur="3s"
              begin="0s"
              repeatCount="indefinite"
            ></animate>
          </polygon>
          <polygon
            id="polygon2"
            points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
            fill="#3F91C1"
          ></polygon>
          <!-- #235fa7 4fd2dd -->

          <polygon
            id="polygon3"
            points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
            fill="#3F91C1"
          ></polygon>
        </g>
      </defs>
    </svg>
    <div class="border-content box-size flex flex-col">
      <div class="content-title flex items-center justify-between">
        <div class="title-text">{{ title }}</div>
        <n-button
          class="h-4 w-4 p-3 text-[1rem]"
          v-if="showClose"
          secondary
          size="medium"
          @click="closeClick"
          ><template #icon><close /></template
        ></n-button>
      </div>
      <div class="h-0 flex-1 p-4">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$radius: 2rem;
.panel {
  padding: 1rem;
  border-radius: 0.5rem;
}

.border-warp {
  width: 100%;
  height: 100%;
  position: relative;
  .box-size {
    position: absolute;
    top: calc((100% - (100% - 1rem + 2px)) / 2);
    left: calc((100% - (100% - 1rem)) / 2);
    border-radius: $radius;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem + 2px);
  }
  .warp-bg {
    background-color: var(--color-bg);
    // background-color: #fff55;
    border-radius: $radius;
    // backdrop-filter: blur(10px);
  }
  .border-content {
    // z-index: 10;
    // position: absolute;
    // top: calc((100% - (100% - 1rem + 2px)) / 2);
    // left: calc((100% - (100% - 1rem)) / 2);
    // border-radius: $radius;
    // width: calc(100% - 1rem);
    // height: calc(100% - 1rem + 2px);

    box-shadow: inset 0 0 15px 2px #40c8ee77;
    .content-title {
      @apply h-9 px-5 leading-9 tracking-[5px];
      border-radius: $radius $radius 0 0;
      background: linear-gradient(to right, #4fd2dd55, #4b877400);
      .title-text {
        @apply font-bold italic;
        color: transparent;
        background: var(--gradient-bg);
        background-clip: text;
      }
    }
  }
  .left-top {
    position: absolute;
    top: 0;
    left: 0;
  }

  .right-top {
    position: absolute;
    top: 0;
    right: 0;
    transform: rotateY(180deg);
  }

  .left-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: rotateX(180deg);
  }

  .right-bottom {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: rotateX(180deg) rotateY(180deg);
  }
}
</style>
