<template>
  <div class="ecp-form-actions">
    <slot name="submitBefore" />
    <el-button v-if="showSubmitButton" type="primary" :icon="submitButtonIcon" :loading="submitLoading"
      @click="$emit('submit')">
      {{ submitButtonText }}
    </el-button>
    <slot name="resetBefore" />
    <el-button v-if="showResetButton" :icon="resetButtonIcon" @click="$emit('reset')">
      {{ resetButtonText }}
    </el-button>
    <slot name="actions" />
    <!-- <el-button v-if="showAdvancedButton && hasMoreFields" type="text" class="ecp-form-actions__advance"
      @click="$emit('toggle')">
      <i class="el-icon-d-arrow-left" :class="collapsed ? 'down' : 'up'" />
      {{ collapsed ? '展开' : '收起' }}
    </el-button> -->
  </div>
</template>

<script setup lang="ts">
import type { ColEx } from '../types'

withDefaults(
  defineProps<{
    showActionButtonGroup?: boolean
    showSubmitButton?: boolean
    showResetButton?: boolean
    submitButtonText?: string
    resetButtonText?: string
    submitButtonIcon?: string
    resetButtonIcon?: string
    submitLoading?: boolean
    showAdvancedButton?: boolean
    hasMoreFields?: boolean
    collapsed?: boolean
    actionColOptions?: ColEx
  }>(),
  {
    showActionButtonGroup: true,
    showSubmitButton: true,
    showResetButton: true,
    submitButtonText: '提交',
    resetButtonText: '重置',
    submitButtonIcon: 'el-icon-search',
    resetButtonIcon: 'el-icon-refresh-left',
    submitLoading: false,
    showAdvancedButton: false,
    hasMoreFields: false,
    collapsed: true,
  }
)

defineEmits<{
  (e: 'submit'): void
  (e: 'reset'): void
  (e: 'toggle'): void
}>()
</script>

<style>
/* .ecp-form-actions {
} */
.ecp-form-actions {
  text-align: right;
}
.ecp-form-actions__advance {
  margin-right: 8px;
}
.el-icon-d-arrow-left.up {
  transform:rotate(90deg);
}
.el-icon-d-arrow-left.down {
  transform:rotate(-90deg);
}
</style>
