<template>
  <div class="template-search">
    <div class="search-container">
      <div class="template-search-title" style="display: none">
        <slot name="title">{{ title }}</slot>
      </div>
      <div class="template-search-content">
        <div class="template-search-content-input-group" style="width:calc( 100% - 80px )">
          <slot name="search-form"></slot>
        </div>
        <div class="template-search-content-button-group">
          <slot name="btn-group"></slot>
        </div>
      </div>
    </div>

    <div class="action-box">
      <slot name="action-box"></slot>
    </div>
  </div>
</template>

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

<style scoped lang="less">
.template-search {
  position: relative;
}
.search-container {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 5px #cccccc;
  padding: 15px;
  box-sizing: border-box;
}
.action-box {
  background: #ffffff;
  border-radius: 5px;
  box-shadow: 0 0 5px #cccccc;
  padding: 15px;
  box-sizing: border-box;
  margin-top: 5px;
  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;
  }
}
.template-search-content-button-group {
  text-align: right;
}
</style>
