<template>
    <div v-bind:class="{'ap-grid-column-input': true,
                        'ap-grid-column-change': isChange(rowData.changeArr),
                        'ap-grid-column-error': showRuleMsg,}">
        <el-input-number v-model="rowData[opts.prop]"
                         controls-position="right"
                         :min="opts.inputNumberMin"
                         :max="opts.inputNumberMax"
                         @change="changeEvent(rowData)"></el-input-number>

        <!-- rule校验 -->
        <div v-html="ruleMsg" v-show="showRuleMsg" class="ap-grid-column-error-msg"></div>
    </div>
</template>

<script>
    import {handleDefaultParams} from 'ap-util/util/ObjectUtil'
    import ApTableColBase from './ApTableColBase'

    export default {
        name: "ApTableInputNumber",
        extends: ApTableColBase,
        data() {
            return {
                opts: {},
            }
        },
        created() {
            // 初始化组件前修改默认参数
            this.opts = handleDefaultParams(this.colOptions, {
                inputNumberMin: 0
            });
        },
        methods: {}
    }
</script>

<style scoped>
    .ap-grid-column-input /deep/ .el-input__inner {
        padding: 0px 5px;
        border-radius: 4px;
        text-align: left;
    }

    .ap-grid-column-input /deep/ .el-input-number {
        max-width: 100%;
    }

    .ap-grid-column-error /deep/ .el-input__inner {
        border: 1px solid red;
    }
</style>
