<template>
    <div class="querybar list-details-v3-panel">
        <Card :padding="0" style="padding: 14px 16px" dis-hover>
            <Row type="flex" :gutter="0">
                <Col span="16">
                    <!-- 列表快捷查询 -->
                    <FormBox
                        v-if="searchFormListShowType"
                        ref="searchFormListVM"
                        :config="searchFormList"
                        :dictData="dictData"
                    />
                    <!-- 列表快捷查询 -->
                </Col>
                <Col span="8">
                    <Row type="flex" justify="end" :gutter="0">
                        <Col style="margin-right: 10px">
                            <Button
                                customIcon="iconfont icon-custom-search"
                                type="primary"
                                @click="search"
                                >查询</Button
                            >
                        </Col>
                        <Col>
                            <Button
                                customIcon="iconfont icon-custom-reset"
                                @click="clear"
                                >重置</Button
                            >
                        </Col>
                        <Col>
                            <Divider type="vertical" class="dividercommon" />
                        </Col>
                        <Col style="padding-right: 20px">
                            <Dropdown
                                trigger="custom"
                                :visible="filterSceneFlag"
                                @on-click="filterAction"
                                placement="bottom-start"
                                @on-clickoutside="closeFilterScene"
                            >
                                <Badge
                                    class-name="badgeclass"
                                    :count="sceneNum"
                                >
                                    <ButtonGroup>
                                        <Button
                                            customIcon="iconfont icon-custom-filter"
                                            @click="updataFilterScene"
                                            >高级查询</Button
                                        >
                                        <Button
                                            v-if="!filterSceneFlag && sceneFlag"
                                            icon="ios-arrow-down"
                                            @click="openFilterScene"
                                        >
                                        </Button>
                                        <Button
                                            v-if="filterSceneFlag && sceneFlag"
                                            icon="ios-arrow-up"
                                            @click="closeFilterScene"
                                        >
                                        </Button>
                                    </ButtonGroup>
                                </Badge>
                                <template #list>
                                    <DropdownMenu>
                                        <DropdownItem
                                            v-for="(temp, index) in sceneData"
                                            :selected="
                                                temp.scenename == selectedScence
                                            "
                                            :name="temp.scenename"
                                            :key="'scene_' + index"
                                            >{{ temp.scenename }}</DropdownItem
                                        >
                                    </DropdownMenu>
                                </template>
                            </Dropdown>
                        </Col>
                        <Col style="padding-right: 10px">
                            <Dropdown
                                trigger="custom"
                                :visible="btnFlag"
                                @on-click="action"
                                placement="bottom-start"
                                @on-clickoutside="closeBtn"
                            >
                                <ButtonGroup>
                                    <Button
                                        customIcon="iconfont icon-custom-add"
                                        v-if="addDataBtnFlag"
                                        @click="addData"
                                        >新增</Button
                                    >
                                    <Button
                                        v-if="
                                            !addDataBtnFlag &&
                                            btnData.length > 0
                                        "
                                        :icon="btnData[0].icon"
                                        :customIcon="btnData[0].customIcon"
                                        @click="action(btnData[0].name)"
                                        >{{ btnData[0].text }}</Button
                                    >
                                    <Button
                                        v-if="!btnFlag && moreBtnFlag"
                                        icon="ios-arrow-down"
                                        @click="openBtn"
                                    >
                                    </Button>
                                    <Button
                                        v-if="btnFlag && moreBtnFlag"
                                        icon="ios-arrow-up"
                                        @click="closeBtn"
                                    >
                                    </Button>
                                </ButtonGroup>
                                <template #list>
                                    <DropdownMenu>
                                        <DropdownItem
                                            v-for="(item, index) in btnData"
                                            style="padding-left: 0px"
                                            :key="'btn_' + index"
                                        >
                                            <Button
                                                :icon="item.icon"
                                                type="text"
                                                :customIcon="item.customIcon"
                                                @click="action(item.name)"
                                                >{{ item.text }}</Button
                                            >
                                        </DropdownItem>
                                    </DropdownMenu>
                                </template>
                            </Dropdown>
                        </Col>
                        <Col>
                            <PromptMessages style="height: 100%" />
                        </Col>
                    </Row>
                </Col>
            </Row>
        </Card>
        <div v-show="filterFlag" style="margin-top: 14px">
            <BillConditionsBox
                ref="filter"
                @doAction="doAction"
                @conditionAction="conditionAction"
                :config="config"
                :dictData="dictData"
            />
        </div>
    </div>
</template>
<script>
import querybar from "../querybar.vue";

export default {
    name: "BillListPanelV3QueryBar",
    extends: querybar,
    data() {
        return {
            searchFormListShowType: false,
            searchFormList: {},
            searchFormItemHashMap: {},
        };
    },
    methods: {
        /**
         * 快捷查询参数整理复写
         */
        customGetQuerySearchParam() {
            let searchParam = {};
            // let obj = {};
            // let el = {};
            // el.field = this.$refs.field.getValue();
            // el.editors = this.$refs.editors.getValue();
            // el.calculator = "==";
            // if (el.field && el.editors) {
            //     if (this.dataType[el.field].calculator) {
            //         el.calculator = this.dataType[el.field].calculator;
            //     }
            //     obj = this.getConditionValue(
            //         el.field,
            //         el.editors,
            //         el.calculator,
            //         this.dataType[el.field]
            //     );
            // }
            // searchParam = obj;
            // ==============================================
            if (this.$refs.searchFormListVM) {
                const searchFormData = this.$refs.searchFormListVM.getData();
                this.$utils.objectEach(searchFormData, (value, key) => {
                    const itemConfig = this.$utils.get(
                        this.searchFormItemHashMap,
                        key,
                        {}
                    );
                    const valueStr = this.$utils.toValueString(value);
                    if (
                        !this.$utils.isEmpty(itemConfig) &&
                        !this.$utils.isEmpty(valueStr)
                    ) {
                        const fieldKey = this.$utils.get(
                            itemConfig,
                            "field",
                            key
                        );
                        const calculator = this.$utils.get(
                            itemConfig,
                            "calculator",
                            "=="
                        );
                        const transformObj = this.getConditionValue(
                            fieldKey,
                            value,
                            calculator,
                            itemConfig
                        );
                        searchParam = { ...searchParam, ...transformObj };
                    }
                });
            }
            // ==============================================
            return searchParam;
        },
        /**
         * 重置事件复写
         */
        clear() {
            // this.customClear();
            let temp = {};
            temp.name = "condition_clear";
            this.$emit("conditionAction", temp);
            // ==============================================
            this.clearSearchParams();
            // ==============================================
        },
        clearSearchParams() {
            if (this.$refs.searchFormListVM) {
                this.$refs.searchFormListVM.clearData();
            }
        },
        conditionAction(obj) {
            // this.filterFlag = false;
            let data = this.$refs.filter.getData();
            this.updateScene(data.scenename, data);
            this.$emit("conditionAction", obj);
        },
    },
    computed: {},
    mounted() {},
    created() {
        this.searchFormList = this.$utils.get(
            this.config,
            "searchFormList",
            {}
        );
        const items = this.$utils.get(this.searchFormList, "items", []);
        this.searchFormListShowType = items.length > 0;
        this.searchFormItemHashMap = this.$utils.reduce(
            items,
            (previous, item) => {
                previous[item.name] = {
                    ...item,
                    field: this.$utils.get(item, "field", item.name),
                };
                return previous;
            },
            {}
        );
    },
};
</script>

<style lang="less">
.list-details-v3-panel {
    .ivu-form-item {
        margin-top: 0px;
    }
}
</style>
