<template>
    <div v-bind:class="{'ap-grid-column-search-table': 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="searchTableClick"></el-button>
        </el-input>
        <el-dialog :title="opts.searchTableTitle"
                   :visible.sync="dialogVisible"
                   :width="opts.searchTableWidth"
                   :append-to-body="true">

            <div class="flex-justify-between" v-if="opts.searchTableShowParam">
                <div style="width: 200px">
                    <el-input :placeholder="opts.searchTableParamPlaceholder" v-model="gridFilterText"  @keyup.enter.native="freshTable"></el-input>
                </div>
            </div>

            <ap-table :options.sync="opts.searchTableOpt"
                      ref="tableRef"
                      v-bind:style="{height: opts.searchTableHeight}"></ap-table>

            <span slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="warning" @click="searchTableClear">清 空</el-button>
                <el-button type="primary" @click="searchTableConfirm">确 定</el-button>
            </span>
        </el-dialog>

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

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

export default {
    name: "ApTableSearchTable",
    extends: ApTableColBase,
    data() {
        return {
            opts: {},
            isFirstLoad: true,
            dialogVisible: false,
            gridFilterText: "",
            oldTableParams: null
        }
    },
    created() {
        // 初始化组件前修改默认参数
        this.opts = handleDefaultParams(this.colOptions, {
            searchTableHeight: '400px',
            searchTableWidth: '500px',
            searchTableTitle: '查找',
            searchTableShowParam: false,
            searchTableParamKey: 'likeStr',
            searchTableParamPlaceholder: '关键字过滤，回车搜索',
            searchTableLoadTime: "edit", // edit、click
            searchTableBeforeClick() {
                return true;
            },
            searchTableConfirm() {
                return true
            },
            searchTableClear() {
                return true
            },
        });
        let tableParams = this.opts.searchTableOpt.params;
        if (typeof tableParams === 'function') {
            tableParams = tableParams()
        }
        this.oldTableParams = tableParams != null ? deepClone(tableParams) : {};
    },
    methods: {
        searchTableClick() {
            if (!this.opts.searchTableBeforeClick(this.rowData)) {
                return;
            }
            this.dialogVisible = true;
            if (this.isFirstLoad) {
                this.isFirstLoad = false;
                return;
            }
            if (this.opts.searchTableLoadTime == "click") {
                this.$refs.tableRef.refresh();
            }
        },
        searchTableClear() {
            let isOk = this.opts.searchTableClear(this.rowData);
            if (isOk) {
                // 手动触发修改事件
                this.changeEvent(this.rowData)
                this.dialogVisible = false;
            }
        },
        searchTableConfirm() {
            let selectedRow = this.$refs.tableRef.getSelection();
            let isOk = this.opts.searchTableConfirm(this.rowData, selectedRow);
            if (isOk) {
                // 手动触发修改事件
                this.changeEvent(this.rowData)
                this.dialogVisible = false;
            }
        },
        getTableParams() {
            let params = {};
            params = this.oldTableParams || {};
            params[this.opts.searchTableParamKey] = this.gridFilterText;
            return params;
        },
        freshTable() {
            this.opts.searchTableOpt.params = this.getTableParams;
            this.$refs.tableRef.refresh();
        }
    }
}
</script>

<style scoped>
.ap-grid-column-search-table /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>
