<template>
  <div class="app-stepper">
    <a-input-number v-model:value="result" :min="min" :max="max" :step="step" :precision="precision" :disabled="disabled || readOnly" :controls="false">
      <template #addonBefore>
        <a-button type="text" :disabled="disabled || readOnly || result <= min" @click="btnReduce">-</a-button>
      </template>
      <template #addonAfter>
        <a-button type="text" :disabled="disabled || readOnly || result >= max" @click="btnIcrease">+</a-button>
      </template>
    </a-input-number>
  </div>
</template>
<script setup lang="ts">
import { IContext, IParam, IActionParam } from '@core';
interface IStepProps {

  /**
   * 传入值
   * @type {number}
   * @memberof AppStepper
   */
  value: number;

  /**
   * 是否禁用
   * @type {Boolean}
   * @memberof AppStepper
   */
  disabled?: Boolean;
  /**
   * 属性项名称
   *
   * @type {string}
   * @memberof AppPicker
   */
  name: string;

  /**
   * 数值精度
   * @type {number}
   * @memberof AppStepper
   */
  precision?: number;

  /**
   * 步长
   * @type {number}
   * @memberof AppStepper
   */
  step?: number;

  /**
   * 最小值
   * @type {number}
   * @memberof AppStepper
   */
  min?: number;

  /**
   * 最大值
   * @type {number}
   * @memberof AppStepper
   */
  max?: number;

  /**
   * 应用上下文
   * @type {IContext}
   * @memberof AppStepper
   */
  context: IContext;

  /**
   * 视图导航参数
   * @type {IParam}
   * @memberof AppStepper
   */
  viewParams: IParam;
}
const props = withDefaults(defineProps<IStepProps>(), {
  step: 1,
  min: 0,
  max: 100,
});
interface EditorEmit {
  (name: 'editorEvent', value: IActionParam): void;
}
const emit = defineEmits<EditorEmit>();

const onChange = (value: number) => {
  emit('editorEvent', {
    tag: props.name,
    action: 'valueChange',
    data: value,
  });
};
const result = computed({
  get: () => (props.value ? props.value : 0),
  set: val => {
    if (val > props.max) {
      onChange(props.max);
    } else if (val < props.min) {
      onChange(props.min);
    } else {
      onChange(val);
    }
  },
});

// 减少
const btnReduce = () => {
  result.value -= props.step;
};
// 增加
const btnIcrease = () => {
  result.value += props.step;
};
</script>

<style lang="scss">
.app-stepper {
  .ant-btn {
    width: 30px;
    height: 28px;
    padding: 0;
    &:hover,
    &:focus {
      background: transparent;
    }
  }
  .ant-input-number-group-addon {
    padding: 0;
  }
  .ant-input-number-input {
    text-align: center;
  }
}
</style>