<template>
    <div class="container" :style="toggle?{'height':'calc(100% - 70px)'}:{'height':'0'}">
        <transition name="fade">
            <div style="background-color:white;transform-origin: 0 0;" v-if="toggle">
                <Form label-position="right" ref="value" :model="fastqueryParams" :label-width="100" style="padding:20px">
                    <Row type="flex">
                        <Col :span="8" v-for="(column,idx) in columns" :key="idx" v-if="column.fastqueryType">
                        <FormItem :label="column.title" v-if="column.fastqueryType">
                            <!-- select -->
                            <Select v-model="fastqueryParams[column.key]" :placeholder="queryType(column)" 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="fastqueryParams[column.key]" :placeholder="queryType(column)" v-else-if=" column.type === 'string'">
                            </Input>

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

                            <!-- number -->
                            <Input number:true v-model="fastqueryParams[column.key]" :placeholder="queryType(column)" v-else-if=" column.type === 'number'">
                            </Input>

                            <!-- boolean -->
                            <Select v-model="fastqueryParams[column.key]" :placeholder="queryType(column)" 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="'请选择' + column.title + '范围' " v-model="fastqueryParams[column.key] " v-else-if="column.type=='date' " style="width: 100% ">
                            </DatePicker>
                        </FormItem>
                        </Col>
                    </Row>
                </Form>
                <div class="footer ">
                    <Button type="default" @click="close">关闭</Button>
                    <Button type="default" @click="clean( 'value')">清空</Button>
                    <Button type="success" @click="search">查询</Button>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import columnsFormat from "./../hongqiTable/columnsFormat";
import NumberRange from "./../hongqiTable/numberRange";
import fastqueryFormat from "./../hongqiTable/fastqueryFormat";
export default {
    name: "advanceSearch",
    components: {
        NumberRange
    },
    data() {
        return {
            show: false,
            fastqueryParams: {}
        };
    },
    mounted() {
        this.currentColumn = this.columns[0];
    },
    computed: {
        formatedColumns() {
            return columnsFormat(this.columns);
        }
    },
    watch: {
        toggle() {
            if (this.toggle) {
                //this.reset();
            }
        }
    },
    methods: {
        queryType(column) {
            let result;
            switch (column.fastqueryType) {
                case "eq":
                    result = "等于 ";
                    break;
                case "lk":
                    result = "包含 ";
                    break;
                case "ll":
                    result = "左匹配 ";
                    break;
                case "rl":
                    result = "右匹配 ";
                    break;
                case "ne":
                    result = "不等于 ";
                    break;
                case "gt":
                    result = "大于 ";
                    break;
                case "ge":
                    result = "大于等于 ";
                    break;
                case "lt":
                    result = "小于 ";
                    break;
                case "le":
                    result = "小于等于 ";
                    break;
                default:
                    result = "";
                    break;
            }
            return column.title + result;
        },
        isNumberRange(column) {
            if (
                column &&
                column.type == "number" &&
                column.fastqueryType == "range"
            ) {
                return true;
            }
        },
        dictFormat(dict) {
            return this.$tools.dictFormat(this.dicts[dict]);
        },
        clean(name) {
            this.reset();
            this.$emit("on-search", []);
        },
        reset() {
            this.fastqueryParams = {};
            if (this.$refs.value) {
                this.$refs.value.resetFields();
            }
        },
        search() {
            let params = [];
            for (let column of this.columns) {
                fastqueryFormat(
                    column,
                    this.fastqueryParams[column.key],
                    params
                );
            }
            this.$emit("on-search", params);
        },
        close() {
            this.$emit("on-search", null);
        }
    },
    props: ["columns", "dicts", "toggle"]
};
</script>
<style lang="less" scoped>
.container {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(~"100% - 76px");
    z-index: 999;
    background-color: rgba(70, 70, 70, 0.55);
}
.fade-enter-active,
.fade-leave-active {
    transition: transform 0.8s;
}
.fade-enter,
.fade-leave-to {
    transform: scale3d(1, 0, 1);
}
.search-btn {
    height: 33px;
    color: #3cc24c;
    background-color: white;
    border: 1px solid #ddd;
}
.fastqueryCard {
    position: absolute;
    width: 1000px;
    height: auto;
    background-color: white;
    z-index: 999;
    box-shadow: 0 0 15px #777;
}
.footer {
    text-align: center;
}
</style>
