<template>
    <!-- 查询表单 -->
    <div>
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            label-width="100px"
        >
            <el-form-item
                v-for="(item, v) in formLabel"
                :key="v"
                :label="item.f_label"
                :prop="item.f_model"
            >
                <el-input
                    v-if="item.f_type === 'ipt'"
                    v-model="queryParams[item.f_model]"
                    :placeholder="`请输入${item.f_label}`"
                    clearable
                    style="width: 240px"
                />
                <el-select
                    v-if="item.f_type === 'sel'"
                    v-model="queryParams[item.f_model]"
                    clearable
                    filterable
                    style="width: 240px"
                    :placeholder="`请选择${item.f_label}`"
                >
                    <el-option
                        v-for="(sel, v) in item.f_selList"
                        :key="v"
                        :label="sel.label"
                        :value="sel.value"
                    />
                </el-select>
                <el-cascader
                    v-if="item.f_type === 'selCas'"
                    :options="item.f_selList"
                    :props="item.optionProps"
                    :show-all-levels="false"
                    clearable
                    style="width: 240px"
                />
                <el-date-picker
                    v-if="item.f_type === 'date'"
                    v-model="queryParams[item.f_model]"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >查询</el-button
                >
                <el-button
                    type="warning"
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8" v-if="exportShow">
            <slot></slot>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    >导出数据</el-button
                >
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        props: {
            formLabel: {
                type: Array,
                default: () => {
                    return []
                },
            },
            /* 导出等按钮展示 */
            exportShow: {
                type: Boolean,
                default: () => {
                    return false
                },
            },
        },
        data() {
            return {
                queryParams: {},
            }
        },
        created() {
            this.formLabel.map((e) => {
                this.$set(this.queryParams, e.f_model, '')
            })
        },
        methods: {
            /* 查询按钮 */
            handleQuery() {
                console.log('查询')
                this.$emit('queryList', this.queryParams)
            },
            /* 重置按钮 */
            resetQuery() {
                this.$refs.queryForm.resetFields()
                this.$emit('queryList', this.queryParams, 'reset')
            },
        },
    }
</script>

<style></style>
