<template>
    <div>
        <Card
            :padding="0"
            dis-hover
            :bordered="false"
            style="background: #fff; padding: 14px 16px 14px 16px"
        >
            <div ref="toolbar" style="padding-bottom: 14px">
                <QueryBar
                    :config="myConfig.queryConfig"
                    :dictData="dictData"
                    :moduleMethod="moduleMethod"
                    @conditionAction="conditionAction"
                    @doAction="doAction"
                />
            </div>
            <Card
                class="billquerygrid"
                :padding="0"
                :bordered="false"
                dis-hover
            >
                <Dropdown
                    trigger="custom"
                    :visible="colsetFlag"
                    style="
                        position: absolute;
                        z-index: 99;
                        right: 15px;
                        top: 1px;
                        padding: 7.5px;
                        background-color: #f5f7fa;
                    "
                    placement="bottom-end"
                    :transfer="transferFlag"
                    @on-clickoutside="closeColset"
                >
                    <Tooltip placement="top">
                        <template #content>
                            <div>
                                <span style="font-size: 12px"> 表头设计 </span>
                            </div>
                        </template>
                        <p style="cursor: pointer" @click.stop="openColSet">
                            <Icon
                                custom="iconfont icon-custom-colset"
                                style="margin-top: 4px"
                                size="16"
                                color="#515a6e"
                            />
                        </p>
                    </Tooltip>
                    <template #list>
                        <DropdownMenu>
                            <GridColSet
                                ref="gridcol"
                                :config="myConfig.gridConfig"
                                @doAction="doAction"
                            />
                        </DropdownMenu>
                    </template>
                </Dropdown>
                <SimpleViewGrid
                    v-if="reset"
                    ref="grid"
                    :config="changeGridConfig"
                    :dictData="dictData"
                    @dbclick="dbclick"
                />
            </Card>
        </Card>
    </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";
import QueryBar from "./querybar.vue";
import GridColSet from "./gridcolset.vue";
import { resolveComponent } from "vue";
export default {
    name: "mbillquerygrid",
    components: { QueryBar, GridColSet },
    data() {
        return {
            myConfig: {},
            changeGridConfig: {},
            reset: true,
            rowBtnData: [],
            transferFlag: false,
            colsetFlag: false,
            operateFlag: false,
            enablePermissions: true,
            actionConfig: {},
            initRefresh: true,
            gridCol: [],
        };
    },
    props: {
        config: {
            type: Object,
            default: null,
        },
        dictData: {
            type: Object,
            default: null,
        },
        moduleMethod: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    created() {
        this.myConfig = Object.assign({}, this.myConfig, this.config);
        this.myConfig.gridConfig.headStyle = "";
        this.myConfig.gridConfig.showCondition = false;
        this.myConfig.gridConfig.overrideData = this.gridOverrideData;
        this.myConfig.gridConfig.onSelectionChange = this.gridOnSelectionChange;
        this.myConfig.gridConfig.height = 1;
        this.myConfig.gridConfig.adjustHeight = 5;
        this.myConfig.gridConfig.showBorder = true;
        this.myConfig.gridConfig.showStripe = true;
        this.myConfig.gridConfig.generalOrientation = true;
        this.myConfig.gridConfig.pageSize = "small";
        this.myConfig.gridConfig.items.forEach((el) => {
            if (el.type !== "CheckBox") {
                if (el.tooltip === undefined) {
                    el.tooltip = true;
                }
                if (el.resizable === undefined) {
                    el.resizable = true;
                }
            }
            // 新增：为 ComboBox 设置 codeWithName 默认值
            if (el.type === "ComboBox" && el.codeWithName === undefined) {
                el.codeWithName =
                    this.OmdUrl.billQueryComboBoxCodeWithName !== undefined
                        ? this.OmdUrl.billQueryComboBoxCodeWithName
                        : true; // 默认值为 true 表示有编码
            }
        });
        if (this.myConfig.gridConfig.initRefresh !== undefined) {
            this.initRefresh = this.myConfig.gridConfig.initRefresh;
        }
        if (!this.myConfig.gridConfig.method) {
            this.myConfig.gridConfig.method = this.myConfig.classPrefix + '.search';
        }
        if (!this.myConfig.gridConfig.resources) {
            this.myConfig.gridConfig.resources = this.config.resources;
        }
        if (!this.myConfig.gridConfig.response) {
            this.myConfig.gridConfig.response = this.config.response;
        }
        if (this.myConfig.enablePermissions !== undefined) {
            this.enablePermissions = this.myConfig.enablePermissions;
        }
        if (this.myConfig.rowBtnData) {
            this.rowBtnData = this.$Method.copy(this.myConfig.rowBtnData);
        }
        if (this.rowBtnData.length > 0) {
            this.initRowBtn();
        }

        this.myConfig.queryConfig = {};
        this.myConfig.queryConfig.curHelpUrl = this.config.curHelpUrl;
        this.myConfig.queryConfig.items = this.$Method.copy(
            this.myConfig.gridConfig.items,
        );
        this.myConfig.queryConfig.modulecode = this.config.modulecode;
        this.myConfig.queryConfig.enablePermissions = this.enablePermissions;
        if (this.myConfig.btnData) {
            this.myConfig.queryConfig.btnData = this.myConfig.btnData;
        }
        if (this.myConfig.addDataflag) {
            this.myConfig.queryConfig.addDataflag = this.myConfig.addDataflag;
        }
        if (this.myConfig.usercustominfo) {
            if (this.myConfig.usercustominfo.filterscene) {
                this.myConfig.queryConfig.sceneData = this.$Method.copy(
                    this.myConfig.usercustominfo.filterscene,
                );
            }
            if (this.myConfig.usercustominfo.colset) {
                this.gridCol = JSON.parse(
                    this.$Method.copy(this.myConfig.usercustominfo.colset),
                );
            }
        }

        this.setChangeGridConfig();
    },
    methods: {
        initRowBtn() {
            if (this.enablePermissions) {
                let btns = [];
                this.moduleMethod.forEach((el) => {
                    let btn = this.rowBtnData.find(
                        (el2) => el.name === el2.name,
                    );
                    if (btn) {
                        btns.push(btn);
                    }
                });
                this.rowBtnData = btns;
            }
            if (this.rowBtnData.length > 0) {
                this.actionConfig.label = "操作";
                this.actionConfig.key = "actionbtn";
                this.actionConfig.align = "center";
                this.actionConfig.render = this.actionRender;
                this.actionConfig.fixed = "right";
                if (this.rowBtnData.length > 3) {
                    this.actionConfig.width = 200;
                } else {
                    this.actionConfig.width = 68 * this.rowBtnData.length;
                }
                this.myConfig.gridConfig.items.push(this.actionConfig);
                this.operateFlag = true;
            }
        },
        actionRender(h, params) {
            return h("div", [
                h(resolveComponent("RowBtnToolbar"), {
                    config: { items: this.rowBtnData },
                    onDoAction: (val) => {
                        val.rowinfo = params;
                        this.$emit("doAction", val);
                    },
                }),
            ]);
        },
        doAction(obj) {
            if (obj.name === "saveGridCol") {
                this.gridCol = this.$Method.copy(obj.para);
                this.colsetFlag = false;
                this.setChangeGridConfig();
                this.reset = false;
                this.$nextTick(() => {
                    this.reset = true;
                    this.$nextTick(() => {
                        this.refurbish();
                    });
                });
            } else if (obj.name === "closeGridCol") {
                this.colsetFlag = false;
                return;
            } else {
                if (obj.name !== "saveScene") {
                    obj.para = this.$refs.grid.getSelection();
                }
            }
            this.$emit("doAction", obj);
        },
        gridOverrideData(data) {
            let self = this;
            if (data && data.length > 0) {
                this.$nextTick(() => {
                    let index = 0;
                    if (self.ph_key) {
                        let culIndex = data.findIndex(
                            (el) =>
                                el[self.myConfig.gridConfig.bindSearchParam] ===
                                self.ph_key,
                        );
                        if (culIndex > -1) {
                            index = culIndex;
                        }
                    }
                    if (this.$refs.grid) {
                        this.$refs.grid.setRowHighlight(index, true);
                    }
                });
            }
            return data;
        },
        gridOnSelectionChange(rows) {
            let obj = {};
            obj.name = "gridSelectionChange";
            obj.para = rows;
            this.$emit("doAction", obj);
        },
        clearData() {
            this.$refs.quick.clearData();
            this.refurbish();
        },
        refurbish(para) {
            if (!para) {
                para = {};
            }
            this.$refs.grid.clearSearchBeforeSearchParam();
            this.$refs.grid.setSearchBeforeSearchParam(para);
            this.$refs.grid.refurbish();
        },
        getGrid() {
            return this.$refs.grid;
        },
        getBtnToolbar() {
            return this.$refs.btn;
        },
        getQuick() {
            return this.$refs.quick;
        },
        dbclick(e) {
            let obj = {};
            obj.name = "gridDbClick";
            obj.para = e;
            this.ph_key = obj.para[this.myConfig.gridConfig.bindSearchParam];
            this.$emit("doAction", obj);
        },
        setPhkey(value) {
            this.ph_key = value;
        },
        quickChagne() {
            this.refurbish();
        },
        setOutsideHeight() {
            let height = this.$refs.toolbar.offsetHeight + 30;
            this.$refs.grid.setOutsideHeight(height);
        },
        openColSet() {
            this.colsetFlag = true;
        },
        closeColset() {
            this.colsetFlag = false;
        },
        setChangeGridConfig() {
            this.changeGridConfig = this.$Method.copy(this.myConfig.gridConfig);
            let isFixed = false;
            if (this.gridCol.length > 0) {
                let items = [];
                this.gridCol.forEach((el) => {
                    if (el.name && el.visible) {
                        let tmp = this.myConfig.gridConfig.items.find(
                            (el2) =>
                                el.name === el2.name || el.name === el2.sname,
                        );
                        if (tmp) {
                            let tmp2 = this.$Method.copy(tmp);
                            if (el.fixed) {
                                tmp2.fixed = "left";
                                if (!isFixed) {
                                    isFixed = true;
                                }
                            }
                            items.push(tmp2);
                        }
                    }
                });
                if (this.operateFlag) {
                    items.push(this.actionConfig);
                }
                this.changeGridConfig.fixedIndex = isFixed;
                this.changeGridConfig.items = items;
            }
        },
        conditionAction(action) {
            if (
                action.name === "condition_search" ||
                action.name === "condition_searchFilter"
            ) {
                this.refurbish(action.para);
            }
            if (action.name === "condition_clear") {
                this.refurbish();
            }
        },
    },
    mounted() {
        this.observer = elementResizeDetectorMaker();
        if (this.$refs.toolbar) {
            this.observer.listenTo(this.$refs.toolbar, this.setOutsideHeight);
        }
        if (this.initRefresh) {
            this.refurbish();
        }
        if (this.gridCol.length > 0) {
            this.$refs.gridcol.setData(this.gridCol);
        }
    },
    beforeUnmount() {
        if (this.$refs.toolbar) {
            this.observer.removeListener(
                this.$refs.toolbar,
                this.setOutsideHeight,
            );
        }
    },
};
</script>
