<template>
  <a-col v-bind="actionColOpt" :style="{ textAlign: 'right' }" v-if="showActionButtonGroup">
    <FormItem>
      <slot name="resetBefore" />
      <Button
        type="default"
        class="mr-2"
        v-bind="getResetBtnOptions"
        @click="resetAction"
        v-if="showResetButton"
      >
        {{ getResetBtnOptions.text }}
      </Button>
      <slot name="submitBefore" />

      <Button
        type="primary"
        class="mr-2"
        v-bind="getSubmitBtnOptions"
        @click="submitAction"
        v-if="showSubmitButton"
      >
        {{ getSubmitBtnOptions.text }}
      </Button>

      <slot name="advanceBefore" />
      <Button
        type="link"
        size="small"
        @click="toggleAdvanced"
        v-if="showAdvancedButton && !hideAdvanceBtn"
      >
        {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
        <BasicArrow class="ml-1" :expand="!isAdvanced" top />
      </Button>
      <slot name="advanceAfter" />
    </FormItem>
  </a-col>
</template>
<script lang="ts">
  import type { ColEx } from '../types/index';
  import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';

  import { defineComponent, computed, PropType } from 'vue';
  import { Form } from 'ant-design-vue';
  import { Button } from '/@/components/Button';
  import { BasicArrow } from '/@/components/Basic/index';
  import { useFormContext } from '../hooks/useFormContext';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { propTypes } from '/@/utils/propTypes';

  type ButtonOptions = Partial<ButtonProps> & { text: string };

  export default defineComponent({
    name: 'BasicFormAction',
    components: {
      FormItem: Form.Item,
      Button,
      BasicArrow,
    },
    props: {
      showActionButtonGroup: propTypes.bool.def(true),
      showResetButton: propTypes.bool.def(true),
      showSubmitButton: propTypes.bool.def(true),
      showAdvancedButton: propTypes.bool.def(true),
      resetButtonOptions: {
        type: Object as PropType<ButtonOptions>,
        default: {},
      },
      submitButtonOptions: {
        type: Object as PropType<ButtonOptions>,
        default: {},
      },
      actionColOptions: {
        type: Object as PropType<Partial<ColEx>>,
        default: {},
      },
      actionSpan: propTypes.number.def(6),
      isAdvanced: propTypes.bool,
      hideAdvanceBtn: propTypes.bool,
    },
    setup(props, { emit }) {
      const { t } = useI18n();

      const actionColOpt = computed(() => {
        const { showAdvancedButton, actionSpan: span, actionColOptions } = props;
        const actionSpan = 24 - span;
        const advancedSpanObj = showAdvancedButton
          ? { span: actionSpan < 6 ? 24 : actionSpan }
          : {};
        const actionColOpt: Partial<ColEx> = {
          span: showAdvancedButton ? 6 : 4,
          ...advancedSpanObj,
          ...actionColOptions,
        };
        return actionColOpt;
      });

      const getResetBtnOptions = computed(
        (): ButtonOptions => {
          return Object.assign(
            {
              text: t('component.form.resetButton'),
            },
            props.resetButtonOptions
          );
        }
      );

      const getSubmitBtnOptions = computed(() => {
        return Object.assign(
          {
            text: t('component.form.submitButton'),
          },
          props.submitButtonOptions
        );
      });

      function toggleAdvanced() {
        emit('toggle-advanced');
      }

      return {
        t,
        actionColOpt,
        getResetBtnOptions,
        getSubmitBtnOptions,
        toggleAdvanced,
        ...useFormContext(),
      };
    },
  });
</script>
