<template>
  <div class="search-div">
    <div class="search-left">
      <slot name="search"/>
      <el-button v-if="type=='default'" :size="size" class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button v-if="type=='default' && needClear" :size="size" class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
    </div>
    <div v-if="type=='seperate'" class="search-right">
      <el-button :size="size" class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button v-if="needClear" :size="size" class="filter-item" type="warning" icon="el-icon-delete" @click="clearInput">重置</el-button>
    </div>
    <div class="clearfloat"/>
  </div>
</template>

<script>
export default {
  name: 'SearchArea',
  props: {
    type: {
      type: String,
      default: 'default'
    }, // 显示类型，default表示正常连续显示，'seperate'表示两边分散显示
    needClear: {
      type: Boolean,
      default: false
    }, // 是否需要重置按钮
    needSearchMore: {
      type: Boolean,
      default: false
    }// 是否需要高级检索
  },
  methods: {
    search() {
      this.$emit('search')
    },
    clearInput() {
      this.$emit('clear')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .search-div{
    margin-bottom: 10px;
    .search-left{
      float:left;
      width: calc(100% - 160px);
    }
    .search-right{
      float:right;
      width: 160px;
    }
  }
</style>