<template>
  <div class="base-border-box" :style="[styles]">
    <div class="base-border-box-wrapper">
      <div class="base-border-box-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';

  const props = defineProps({
    /** 圆角 */
    radius: { type: String, default: '16px' },
    /** 边框宽度 */
    borderWidth: { type: String, default: '2px' },
    /** 边框颜色 */
    borderColor: { type: String, default: 'linear-gradient(45deg, #29cfff, #a3e9fd, #197bf8, #0951c5)' },
    /** 背景颜色 */
    backgroundColor: { type: String, default: 'rgba(255, 255, 255, 0.5)' },
  });

  defineSlots<{
    /** 主体内容 */
    default: () => any;
  }>();

  const styles = computed(() => {
    return {
      '--base-border-box-radius': `${props.radius}`,
      '--base-border-box-border-width': `${props.borderWidth}`,
      '--base-border-box-border-color': props.borderColor,
      '--base-border-box-background-color': props.backgroundColor,
    };
  });
</script>

<style lang="scss" scoped>
  .base-border-box {
    --base-border-box-radius: 16px;
    --base-border-box-border-width: 2px;
    --base-border-box-border-color: linear-gradient(45deg, #29cfff, #a3e9fd, #197bf8, #0951c5);
    --base-border-box-background-color: rgba(255, 255, 255, 0.5);
    position: relative;
    background: var(--base-border-box-background-color);
    border-radius: var(--base-border-box-radius);

    &:before {
      position: absolute;
      inset: 0;
      z-index: 2;
      padding: var(--base-border-box-border-width);
      content: '';
      background: var(--base-border-box-border-color);
      border-radius: var(--base-border-box-radius);
      mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);
      mask-composite: exclude;
    }

    .base-border-box-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 16px;
    }

    .base-border-box-content {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 100%;
      padding: var(--base-border-box-border-width);
    }
  }
</style>
