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

        <!-- 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: "ApTableInput",
        extends: ApTableColBase,
        data() {
            return {
                opts: {},
            }
        },
        created() {
            // 初始化组件前修改默认参数
            this.opts = handleDefaultParams(this.colOptions, {});
        },
        methods: {}
    }
</script>

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

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