<template>
  <div>
    <div class="btns-wrap">
      <div v-if="collectName" class="c999">
        当前搜索条件： <span class="c77FA">{{ collectName }}</span>
      </div>
      <div v-else><!-- 占位 --></div>
      <div style="display: flex;align-items: center;margin: 0 auto;">
        <el-button @click="handleQuery" type="warning" icon="el-icon-search" size="mini">查询</el-button>
        <el-button v-if="save" @click="handleSave" type="info" icon="el-icon-edit-outline" plain size="mini"
          >保存条件</el-button
        >
        <el-button @click="reSet" type="info" icon="el-icon-refresh-left" plain size="mini">重置</el-button>
        <el-button v-if="mannage" @click="conditionManaget" type="text" icon="el-icon-star-on" size="mini"
          >搜索条件管理</el-button
        >
      </div>
      <!-- v-show="searchData.length > 2" -->
      <div class="extend" v-show="showExtend">
        <el-button @click="handleExtend" type="text" size="mini">
          <span v-if="isExtend">收起</span>
          <span v-else>展开</span>条件
          <i :class="isExtend ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
        </el-button>
      </div>
    </div>
    <div>
      <template slot-scope="scope" v-if="btnslot">
        <slot :name="slotName" :data="scope" />
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: "btnGroup",
  props: {
    showExtend: {
      type: Boolean,
      default: false,
    },
    save: {
      type: Boolean,
      default: false,
    },
    mannage: {
      type: Boolean,
      default: false,
    },
    collectName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isExtend: false,
    }
  },
  methods: {
    //保存
    handleSave() {
      //   this.$emit("query", this.queryParam)
    },
    //重置
    reSet() {
      Object.keys(this.queryParam).forEach((key) => {
        this.queryParam[key] = this.queryParam[key].date ? [] : ""
      })
      this.handleQuery()
    },
    //查询
    handleQuery() {
      this.$emit("query")
    },
    handleExtend() {
      this.isExtend = !this.isExtend
      this.$emit("updateExtend")
    },
    conditionManaget() {},
  },
}
</script>

<style type="text/css" scoped></style>