<template>
    <div id="toolsContainer">
        <Button
            class="tool-bar-btn"
            type="primary"
            size="small"
            ghost
            icon="md-refresh"
            @click="refreshFcn"
        ></Button>
        <Button
            class="tool-bar-btn"
            v-if="fastquery"
            type="primary"
            size="small"
            ghost
            icon="md-refresh"
            @click="showFastquery"
        ></Button>
        <Button
            class="tool-bar-btn"
            v-if="showPrint"
            type="primary"
            size="small"
            ghost
            icon="md-print"
            @click="printFcn"
        ></Button>
        <Button
            v-if="showExport"
            class="tool-bar-btn"
            type="primary"
            size="small"
            ghost
            icon="md-document"
            @click="exportFcn"
        ></Button>

        <Modal v-model="showModal" width="700">
            <p slot="header">
                <span>快速查询</span>
                <Button type="text" icon="more" size="small" @click="showMore = !showMore">更多选项</Button>
            </p>

            <Form label-position="right" ref="value" :model="value" :label-width="120">
                <FormItem
                    v-for="(column,idx) in columns"
                    :key="idx"
                    v-if="visiable(column,idx)"
                    :label="column.title"
                >
                    <!-- select -->
                    <Select
                        v-model="value[column.key]"
                        :placeholder="column.title"
                        v-if="column.dict"
                        clearable
                    >
                        <Option
                            v-for="(opts,optsIndex) in dictFormat(column.dict)"
                            :key="optsIndex"
                            :value="opts.id"
                        >{{ opts.text }}</Option>
                    </Select>

                    <!-- string -->
                    <Input
                        v-model="value[column.key]"
                        :placeholder="column.title"
                        v-else-if=" column.type === 'string'"
                    ></Input>

                    <!-- number range-->
                    <NumberRange
                        v-else-if="isNumberRange(column)"
                        v-model="value[column.key]"
                        :placeholder="column.title"
                    ></NumberRange>

                    <!-- number -->
                    <Input
                        number:true
                        v-model="value[column.key]"
                        :placeholder="column.title"
                        v-else-if=" column.type === 'number'"
                    ></Input>

                    <!-- boolean -->
                    <Select
                        v-model="value[column.key]"
                        :placeholder="column.title"
                        v-else-if=" column.type === 'boolean'"
                        clearable
                    >
                        <Option value="1">是</Option>
                        <Option value="0">否</Option>
                    </Select>

                    <!-- dateTime -->
                    <DatePicker
                        :type="column.fastqueryType"
                        :format="column.format"
                        placeholder="请选择时间"
                        v-model="value[column.key]"
                        v-else-if="column.type == 'date' "
                        style="width: 100%"
                    ></DatePicker>
                </FormItem>
            </Form>
            <div id="footer" slot="footer">
                <Button type="warning" @click="clean('value')">清空</Button>
                <Button type="primary" @click="doSearch">搜索</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import fastqueryFormat from "./fastqueryFormat";
import NumberRange from "./numberRange";
export default {
    name: "ToolBar",
    data() {
        return {
            size: 20,
            showRefresh: false,
            showSearch: false,
            showPrint: false,
            showExport: false,
            showModal: false,
            value: {},
            showMore: false
        };
    },
    components: {
        NumberRange
    },
    mounted: function () {
        if (this.onRefresh) {
            this.refreshFcn = this.onRefresh;
            this.showRefresh = true;
        }
        if (this.onPrint) {
            this.printFcn = this.onPrint;
            this.showPrint = true;
        }
        if (this.onExport && this.exportExcel) {
            this.exportFcn = this.onExport;
            this.showExport = true;
        }
    },
    methods: {
        visiable: function (column, index) {
            if (column.fastqueryType && (index <= 8 || this.showMore)) {
                return true;
            }
        },
        isNumberRange: function (column) {
            if (column.type == "number" && column.fastqueryType == "range") {
                return true;
            }
        },
        refreshFcn: function () { },
        showFastquery: function () {
            this.showModal = true;
        },
        printFcn: function () { },
        exportFcn: function () { },
        doSearch() {
            let fastqueryParams = [];
            for (let column of this.columns) {
                fastqueryFormat(
                    column,
                    this.value[column.key],
                    fastqueryParams
                );
            }
            this.showModal = false;
            this.$emit("fastquery", fastqueryParams);
        },
        clean(name) {
            this.value = {};
            this.showModal = false;
            this.$refs[name].resetFields();
            this.$emit("fastquery", []);
        },
        dictFormat: function (name) {
            if (!this.dicts) {
                return [];
            }
            return this.$tools.dictFormat(this.dicts[name]);
        },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$emit("input", this.value);
                }
            });
        }
    },
    props: {
        columns: {
            type: Array,
            default: () => {
                return [];
            }
        },
        dicts: {
            type: Object,
            default: () => {
                return {};
            }
        },
        onRefresh: {
            type: Function,
            default: () => {
                return {};
            }
        },
        onPrint: {
            type: Function,
            default: () => {
                return {};
            }
        },
        fastquery: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        onExport: {
            type: Function,
            default: () => {
                return {};
            }
        },
        exportExcel: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    }
};
</script>
<style lang="less" scoped>
#header {
    padding: 10px;
}
#toolsContainer {
    position: absolute;
    left: 0;
}
.tool-bar-btn {
    font-size: 16px !important;
}
</style>
