<template>
    <div id="toolsContainer">
        <ButtonGroup>
            <Button
                class="tool-bar-btn"
                :class="buttonSize"
                type="primary"
                :size="buttonSize"
                ghost
                icon="md-refresh"
                @click="onRefresh"
                v-if="showObject['refresh']"
            ></Button>
            <Button
                class="tool-bar-btn"
                :class="buttonSize"
                v-if="showObject['fastquery']"
                type="primary"
                :size="buttonSize"
                ghost
                icon="md-search"
                @click="showModal = true"
            ></Button>
            <Button
                class="tool-bar-btn"
                :class="buttonSize"
                v-if="showObject['print']"
                type="primary"
                :size="buttonSize"
                ghost
                icon="md-print"
                @click="onPrint"
            ></Button>
            <Button
                v-if="showObject['export']"
                class="tool-bar-btn"
                :class="buttonSize"
                type="primary"
                :size="buttonSize"
                ghost
                icon="md-document"
                @click="onExport"
            ></Button>
        </ButtonGroup>
        <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";
import { tools } from 'hq-tools';
export default {
    name: "ToolBar",
    data() {
        return {
            showModal: false,
            value: {},
            showMore: false
        };
    },
    computed: {
        showObject() {
            let obj = {};
            let opts = this.option;
            if (typeof this.option === 'boolean') {
                opts = this.$HqComponents.hongqiTable.toolbar === true ? ['refresh', 'print', 'export', 'fastquery'] : this.$HqComponents.hongqiTable.toolbar;
            }
            for (let opt of opts) {
                obj[opt] = true;
            }
            return obj;
        }
    },
    components: {
        NumberRange
    },
    methods: {
        visiable(column, index) {
            if (column.fastqueryType && (index <= 8 || this.showMore)) {
                return true;
            }
        },
        isNumberRange(column) {
            if (column.type == "number" && column.fastqueryType == "range") {
                return true;
            }
        },
        onRefresh() {
            this.$emit('on-refresh', true)
        },
        onPrint() {
            this.$emit('on-print', true)
        },
        onExport() {
            this.$emit('on-export', true)
        },
        showFastquery() {
            this.showModal = true;
        },
        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 tools.dictFormat(this.dicts[name]);
        },
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$emit("input", this.value);
                }
            });
        }
    },
    props: {
        option: {
            type: Array | Boolean,
            default: () => {
                return [];
            }
        },
        columns: {
            type: Array,
            default: () => {
                return [];
            }
        },
        dicts: {
            type: Object,
            default: () => {
                return {};
            }
        },
        buttonSize: {
            type: 'small' | 'default' | 'large',
            default: () => {
                return 'default'
            }
        }
    }
};
</script>
<style lang="less" scoped>
#header {
    padding: 10px;
}
#toolsContainer {
    position: absolute;
    left: 0;
}
.tool-bar-btn {
    font-size: 18px !important;
    &.small {
        font-size: 16px !important;
    }

    &.default {
        font-size: 18px !important;
    }
    &.large {
        font-size: 20px !important;
    }
}
</style>
