<template>
<el-input-number
    v-model="model"
    :min="row.min"
    :max="row.max"
    :step="row.step"
    :step-strictly="row.stepStrictly"
    :precision="row.precision"
    :controls="row.controls"
    :controls-position="row.position"
    :size="row.size"
    :disabled="row.disabled?.(modelData)"
    :placeholder="$t(row.placeholder?.() || 'pleaseInput')"
    :validate-event="row.validateEvent"
    @change="handleChange"
    @blur="row.blur?.()"
    @focus="row.focus?.()"
/>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import useModel from '../../../script/help/useModel'
import { InputNumberInterface } from './index'
export default defineComponent({
    props: {
        row: {
            type: Object as PropType<InputNumberInterface>,
            default: () => {
            }
        },
        modelData: {
            type: Object,
            default: () => {}
        },
        addIndex: {
            type: [Number, String],
            default: ''
        }
    },
    setup (props) {
        const { row, modelData } = props
        const model = useModel(modelData, row.model, row.deepData, props.addIndex, row)
        const handleChange = (val: number): void => {
            row.methods?.(val)
        }
        return {
            handleChange,
            model,
            row
        }
    }
})
</script>
<style lang="scss" scoped>
</style>
