<!--
 * @Author: gtz
 * @Date: 2022-01-19 15:58:17
 * @LastEditors: zhp
 * @LastEditTime: 2022-01-24 09:18:01
 * @Description: file content
 * @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->
<template>
  <div class="base-container" :style="{fontSize: 12 * beilv + 'px'}">
    <div class="line" />
    <div class="line line-vertical" />
    <div class="line line-right" />
    <div class="line line-right-vertical" />
    <div class="line line-bottom" />
    <div class="line line-bottom-vertical" />
    <div class="line line-bottom-right" />
    <div class="line line-bottom-right-vertical" />
    <div class="bar-item">
      <div v-if="title" class="bar-title">
        <span>
          <svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
          {{ title }}
        </span>
      </div>
      <div class="bar-content">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BaseContainer',
  props: {
    title: {
      type: String,
      default: ''
    },
    titleIcon: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 200
    },
    baseSize: {
      type: Number,
      default: 12
    },
    beilv: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      curIndex: 0
    }
  },
  mounted() {
  },
  methods: {
    changeTab(num) {
      this.curIndex = num
      this.$emit('tabSelect', num)
    }
  }
}
</script>

<style lang="scss" scoped>
.base-container {
  color: #fff;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #061027, $alpha: 0.15);
  position: relative;
  border: 2px solid;
  border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
  box-shadow: inset 0px 0px 20px 0px rgba(255,255,255,0.15);

  .line {
    position: absolute;
    border-top: 4px solid #52FFF1;
    width: 2em;
    top: -.25em;
    left: -.25em;
    &-vertical {
      top: calc(-5em / 12);
      left: calc(-1em / 12);
      transform: rotate(90deg);
      transform-origin: left;
    }
    &-right {
      top: -.25em;
      right: -.25em;
      left: inherit;
    }
    &-right-vertical {
      top: calc(-5em / 12);
      right: calc(-1em / 12);
      left: inherit;
      transform: rotate(-90deg);
      transform-origin: right;
    }
    &-bottom {
      top: inherit;
      left: -.25em;
      bottom: -.25em;
    }
    &-bottom-vertical {
      top: inherit;
      left: calc(-1em / 12);
      bottom: calc(-5em / 12);
      transform: rotate(-90deg);
      transform-origin: left;
    }
    &-bottom-right {
      top: inherit;
      left: inherit;
      right: -.25em;
      bottom: -.25em;
    }
    &-bottom-right-vertical {
      top: inherit;
      left: inherit;
      right: calc(-1em / 12);
      bottom: calc(-5em / 12);
      transform: rotate(90deg);
      transform-origin: right;
    }
  }
  .bar-title {
    width: 100%;
    color: #52FFF1;
    font-size: 1.5em;
    padding: .67em;
  }
  .bar-item {
    height: 100%;
  }
  .bar-content{
    height: calc(100% - 4em);
  }
}
</style>
