<template>
  <div class="template-content">
    <div class="template-content-title">
      <slot name="title">{{ title }}</slot>
      <div class="template-content-title-extra">
        <slot name="extra-btn"></slot>
      </div>
    </div>
    <div class="template-content-main">
      <slot name="grid"></slot>
    </div>
    <div class="template-bottom-button" v-if="needBottomButton">
      <slot name="bottom-btn"></slot>
    </div>
  </div>
</template>

<script>
import { Vue, Component, Prop } from "vue-property-decorator";
@Component
export default class ContentWrapper extends Vue {
  @Prop(String) title;
  @Prop({ default: false }) needBottomButton;
}
</script>

<style scoped lang="less">
.template-content-title {
  padding: 15px;
  position: relative;
  background: #ffffff;
  border-radius: 5px;
  border-left: 2px solid #409eff;
  .template-content-title-extra {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: 35px;
  }
}
.template-content-main {
  margin-top: 5px;
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 10px #cccccc;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
  &::before {
    content: "";
    width: 7px;
    height: 26px;
    background: url("../assets/images/connect.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    top: -15px;
    left: 50px;
    z-index: 999;
  }

  &::after {
    content: "";
    width: 7px;
    height: 26px;
    background: url("../assets/images/connect.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    top: -15px;
    right: 50px;
    z-index: 999;
  }
}
</style>
