<template>
  <div class="com-panel2" :class="(hasTitle ? '' : 'no-title') + ' ' + color">
    <div v-if="hasTitle" class="panel-header2">
      <div class="panel-title2">
        <i v-if="hasIcon" class="panel-icon2" :class="icon"></i>
        {{ title }}
      </div>
      <div class="panel-tools2">{{ subTitle }}</div>
    </div>
    <div class="panel-body2">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ComPanel",
  componentName: "ComPanel",
  props: {
    title: String,
    icon: String,
    subTitle: String,
    color: String,
  },
  computed: {
    hasTitle() {
      if (this.title) return true;
      return false;
    },
    hasIcon() {
      if (this.icon) return true;
      return false;
    },
  },
};
</script>
<style lang="less">
.com-panel2 {
  border-left: 0.185vh solid rgba(255, 255, 255, 50%);
  padding-left: 1.185vh;
  position: relative;

  &:before,
  &:after {
    content: " ";
    width: 0.37vh;
    height: 0.37vh;
    background: @write;
    position: absolute;
    left: 0.185vh;
  }

  &:before {
    top: 0.185vh;
  }

  &:after {
    bottom: 0.185vh;
  }

  &.no-title {
    border-left: 0vh;
  }

  &.no-title::before {
    display: none;
  }

  &.green {
    .panel-header2 {
      &::after {
        background-image: @greenLinearRight;
        width: 10%;
      }
      .panel-title2 {
        .panel-icon2 {
          color: @green;
        }
      }
    }
  }

  &.red {
    .panel-header2 {
      &::after {
        background-image: @redLinearRight;
        width: 10%;
      }
      .panel-title2 {
        .panel-icon2 {
          color: @red;
        }
      }
    }
  }

  .panel-header2 {
    display: flex;
    font-size: @fontsize;
    padding-left: 1.185vh;
    background: fade(@gray, 20);
    line-height: 2.963vh;
    margin-bottom: 1.111vh;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 40vh;
      height: 100%;
    }

    .panel-title2 {
      color: @write;

      .panel-icon2 {
        margin-right: 0.741vh;
      }
    }

    .panel-tools2 {
      color: #fff;
      opacity: 0.3;
      padding: 0 0.741vh;
    }
  }

  .panel-body2 {
    color: rgba(255, 255, 255, 0.8);
  }

  &.no-title .panel-body2 {
    padding-left: 0vh;
  }
}
</style>
