<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 { IconBanshou, IconTrend, IconMenuChilun, IconSafetyHat, IconQuality, IconQuality2, IconQuality3 } from './icons'

export default {
  name: 'TechyContainer',
  props: {
    title: String,
    icon: String,
    showCorner: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  },
  computed: {
    computeIcon() {
      switch (this.icon) {
        case '扳手螺丝刀':
          return IconBanshou
        case '趋势搜索':
          return IconTrend
        case '清单齿轮':
          return IconMenuChilun
        case '安全帽':
          return IconSafetyHat
        case '质量1':
          return IconQuality
        case '质量2':
          return IconQuality2
        case '质量3':
          return IconQuality3
        // more...
      }
    }
  },
  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);
}

.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>
