<template>
    <div v-bind:class="{'ap-grid-column-search': true,
                        'ap-grid-column-change': isChange(rowData.changeArr),
                        'ap-grid-column-error': showRuleMsg,}">
        <el-input placeholder="请选择" v-model="rowData[opts.prop]" :disabled="true">
            <el-button slot="append" icon="el-icon-search" @click="dialogVisible = true"></el-button>
        </el-input>

        <el-dialog :title="opts.searchTitle"
                   :visible.sync="dialogVisible"
                   :width="opts.searchWidth"
                   :append-to-body="true">
            <slot :name="opts.searchSlot" :rowData="rowData"></slot>
            <span slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="warning" @click="searchClear">清 空</el-button>
                <el-button type="primary" @click="searchConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 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: "ApTableSearch",
        extends: ApTableColBase,
        data() {
            return {
                dialogVisible: false,
                opts: {},
            }
        },
        created() {
            // 初始化组件前修改默认参数
            this.opts = handleDefaultParams(this.colOptions, {
                searchTitle: '查找',
                searchWidth: '500px',
                searchConfirm() {
                    return true
                },
                searchClear() {
                    return true
                }
            });
        },
        methods: {
            searchClear() {
                let isOk = this.opts.searchClear(this.rowData);
                if (isOk) {
                    // 手动触发修改事件
                    this.changeEvent(this.rowData)
                    this.dialogVisible = false;
                }
            },
            searchConfirm() {
                let isOk = this.opts.searchConfirm(this.rowData);
                if (isOk) {
                    // 手动触发修改事件
                    this.changeEvent(this.rowData)
                    this.dialogVisible = false;
                }
            }
        }
    }
</script>

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

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

</style>
