<template>

</template>

<script>
    import schema from "async-validator";
    export default {
        name: "ApTableColBase",
        props: {
            // 其他属性
            attr: "",
            // 列组件数据
            colData: "",
            // 行数据
            rowData: {},
            // 列配置
            colOptions: {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                showRuleMsg: false,
                ruleMsg: "",
            }
        },
        watch: {
            opts: {
                handler(value) {
                    // 深度监听，opts有修改，对应修改父组件options参数
                    this.$emit('update:colOptions', this.opts);
                },
                deep: true
            }
        },
        methods: {
            // 修改事件
            changeEvent(row) {
                // 修改标识
                if (row.changeArr == null) {
                    row.changeArr = [];
                }
                row.changeArr.push(this.opts.prop)

                // change事件触发
                if (this.opts.change != undefined) {
                    this.opts.change(row)
                }

                // ------ rule校验 ------
                if (!this.opts.rules) {
                    return
                }
                let rules = {};
                rules[this.opts.prop] = this.opts.rules;
                let validator = new schema(rules);

                let rowData = {};
                rowData[this.opts.prop] = row[this.opts.prop];
                validator.validate(rowData, (errors, fields) => {
                    let msg = "";
                    if(errors) {
                        for (let i = 0; i < errors.length; i++) {
                            msg += errors[i].message;
                        }
                        this.ruleMsg = msg;
                        this.showRuleMsg = true;
                    } else {
                        this.showRuleMsg = false;
                    }
                });
                // ------ rule校验 ------

            },
            // 判断是否修改
            isChange(changeArr) {
                return changeArr != null && changeArr.indexOf(this.opts.prop) >= 0 ? true : false;
            },
        }
    }
</script>

<style>
    .ap-grid-column-change {
        background-image: url('./../../../assets/images/changed_flag.png');
        background-position: top right;
        background-repeat: no-repeat;
    }

    .ap-grid-column-error-msg {
        color: red;
        font-size: 12px;
        line-height: 12px;
        padding-top: 1px;
    }
</style>
