<template>
  <div class="es-form--action">
    <slot name="queryBefore"></slot>
    <el-button v-if="showQueryBtn" icon="el-icon-search" v-bind="btnAttrs" @click="clickFunc('query')">查询</el-button>
    <slot name="resetBefore"></slot>
    <el-button v-if="showResetBtn" icon="el-icon-refresh" type="primary" v-bind="btnAttrs" @click="clickFunc('reset')">
      重置
    </el-button>
    <slot name="exportBefore"></slot>
    <el-button v-if="showExportBtn" icon="el-icon-download" type="primary" v-bind="btnAttrs"
               @click="clickFunc('export')">导出
    </el-button>
    <slot name="addBefore"></slot>
    <el-button v-if="showAddBtn" icon="el-icon-plus" plain type="primary" v-bind="btnAttrs" @click="clickFunc('add')">
      新增
    </el-button>
    <slot name="extra"></slot>
    <el-button v-show="isOperate" :size="btnAttrs.size" type="text" @click="toggleAdvanced">
      {{ status === 'retract' ? "展开" : "收起" }}
      <i :class="status ==='retract' ? 'el-icon-arrow-down ': 'el-icon-arrow-up'"></i>
    </el-button>
  </div>
</template>

<script>
export default {
  name: "FormAction",
  props: {
    isOperate: {type: Boolean, default: false},
    // 展开or收起 状态  expand | retract
    status: {type: String},
    // 按钮属性
    btnAttrs: {
      type: Object,
      default: () => {
        return {
          size: "mini",
          type: "primary"
        }
      }
    },
    showExportBtn: {type: Boolean, default: true},
    showAddBtn: {type: Boolean, default: true},
    showQueryBtn: {type: Boolean, default: true},
    showResetBtn: {type: Boolean, default: true},
  },
  model: {
    prop: 'status',
    event: "input"
  },
  methods: {
    clickFunc(e) {
      setTimeout(() => {
        const fun = Object.keys(this.$listeners).find(i => i === e);
        this.$emit(fun)
      }, 100)
    },
    toggleAdvanced() {
      this.$emit('input', this.status === 'retract' ? 'expand' : 'retract')
    }
  }
}
</script>
