<template>
  <div class="techy-container">
    <template v-if="showCorner">
      <div class="line top left vertical" />
      <div class="line top left horizontal" />
      <div class="line top right vertical" />
      <div class="line top right horizontal  " />
      <div class="line bottom right horizontal" />
      <div class="line bottom right vertical" />
      <div class="line bottom left vertical" />
      <div class="line bottom left horizontal" />
    </template>

    <div class="container-title-wrapper">
      <span class="container-icon" v-html="computeIcon" />
      <span class="container-title">{{ title }}</span>
    </div>

    <slot />
  </div>
</template>

<script>
import {
  IconMenuOnly,
  IconTriple,
  IconPCTriple,
  IconPCAlert,
  IconMenuSearch,
  IconSafetyHat,
  IconTrend,
  IconMenu1
} from './icons'

export default {
  name: 'TechyContainer',
  props: {
    title: { type: String, default: '默认标题' },
    icon: { type: String, default: 'defaultIcon' },
    showCorner: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    computeIcon() {
      switch (this.icon) {
        case '折角的菜单图标':
          return IconMenu1
        case '趋势放大镜图标':
          return IconTrend
        case '菜单放大镜图标':
          return IconMenuSearch
        case '安全帽图标':
          return IconSafetyHat
        case '电脑警告图标':
          return IconPCAlert
        case '电脑警告菜单图标':
          return IconPCTriple
        case '菱形叠加':
          return IconTriple
        default:
          return IconMenuOnly
        // more...
      }
    }
  },
  data() {
    return {}
  },
  mounted() {}
}
</script>

<style scoped>
.techy-container {
  border: calc(2px * var(--beilv)) solid #52fff1;
  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
  display: inline-block;
  position: relative;
  padding: calc(24px * var(--beilv));
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
  background: rgba(6, 16, 39, 0.3);
  backdrop-filter: blur(2px);
}

.line {
  position: absolute;
  background-color: #52fff1;
}

.horizontal {
  height: calc(4px * var(--beilv));
  width: calc(26px * var(--beilv));
}

.vertical {
  height: calc(26px * var(--beilv));
  width: calc(4px * var(--beilv));
}

.top {
  top: calc(-3px * var(--beilv));
}

.left {
  left: calc(-3px * var(--beilv));
}

.right {
  right: calc(-3px * var(--beilv));
}

.bottom {
  bottom: calc(-3px * var(--beilv));
}

.container-title-wrapper {
  color: #52fff1;
  display: flex;
  align-items: center;
  font-size: calc(18px * var(--beilv));
  line-height: 1;
  margin-bottom: calc(8px * var(--beilv));
}

.container-title {
  margin-left: calc(4px * var(--beilv));
}

.container-icon {
  position: relative;
  height: calc(24px * var(--beilv)) !important;
  width: calc(24px * var(--beilv)) !important;
}
</style>
