<template>
    <div class="dialog-search">
        <el-form :inline="true" ref="ruleForm" label-position="right" :model="formInline" class="demo-form-inline top-screen" v-if="formInline">
            <div
                class="ruleForm_left"
                :style="
                    openBy
                        ? 'height:' + Math.ceil(formItemList.map((item) => item.span || 6).reduce((a, b) => a + b) / 24) * 62 + 'px;'
                        : 'height:62px;'
                "
            >
                <el-row :gutter="24">
                    <el-col :span="item.span || 6" v-for="(item, index) in props.formItemList" :key="index + '' + item">
                        <el-form-item :label-width="(item.labelWidth || 80) + 'px'" :label="isShowLabel ? item.label + ':' : ''">
                            <!-- 下拉选择框 -->
                            <el-select
                                v-if="item.type == 'select'"
                                v-model="formInline[item.param]"
                                :multiple="item.multiple"
                                :placeholder="item.placeholder || '请选择' + item.label"
                                clearable
                                @clear="() => clear(formInline[item.param], item.param)"
                                @change="() => change(formInline[item.param], item.param)"
                            >
                                <el-option
                                    v-for="(item2, index2) in item.selectOptions"
                                    :key="index2"
                                    :label="item2[item.labelKey || 'text']"
                                    :value="item2[item.valueKey || 'value']"
                                ></el-option>
                            </el-select>
                            <!-- 下拉选择框end -->
                            <!-- 输入框 -->
                            <el-input
                                v-if="item.type == 'input'"
                                v-model="formInline[item.param]"
                                :placeholder="item.placeholder || '请输入' + item.label"
                                @clear="() => clear(formInline[item.param], item.param)"
                                @change="() => change(formInline[item.param], item.param)"
                                clearable
                            ></el-input>
                            <!-- 输入框 -->
                            <!-- 日期范围选择框 -->
                            <el-date-picker
                                v-if="
                                    item.type == 'daterange' ||
                                    item.type == 'datetimerange' ||
                                    item.type == 'date' ||
                                    item.type == 'datetime' ||
                                    item.type == 'dates'
                                "
                                v-model="formInline[item.param]"
                                :value-format="item.valueFormat || 'MMM DD, YYYY'"
                                :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
                                clearable
                                :type="item.type || ''"
                                :range-separator="item.rangeSeparator || '至'"
                                :start-placeholder="item.startPlaceholder || '开始日期'"
                                :end-placeholder="item.endPlaceholder || '结束日期'"
                                :placeholder="item.placeholder || '请选择' + item.label"
                                @clear="() => clear(formInline[item.param], item.param)"
                                @change="() => change(formInline[item.param], item.param)"
                                style="width: 100%"
                            >
                            </el-date-picker>
                            <!-- 日期范围选择框end -->
                            <!-- 级联选择器 -->
                            <el-cascader
                                v-if="item.type == 'cascader'"
                                v-model="formInline[item.param]"
                                :options="item.options"
                                :props="item.props"
                                :placeholder="item.placeholder || '请选择' + item.label"
                                clearable
                                @clear="() => clear(formInline[item.param], item.param)"
                                @change="() => change(formInline[item.param], item.param)"
                            ></el-cascader>
                            <!-- 级联选择器end -->
                        </el-form-item>
                    </el-col>
                    <slot name="formItem"></slot>
                </el-row>
            </div>
            <div class="top-screen-right">
                <div v-if="isShowDefault">
                    <el-button @click="resetForm" class="top-right-bottom top-right-Reset-bottom top-right-bottom-I">重置</el-button>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button
                        type="primary"
                        style="margin-left: 0px"
                        text
                        @click="openBy = !openBy"
                        v-if="formItemList.map((item) => item.span || 6).reduce((a, b) => a + b) > 24"
                    >
                        {{ openBy ? '收起' : '展开' }}
                        <el-icon class="el-icon--right" :style="openBy ? '' : 'transform: rotate(180deg);'"><ArrowUpBold /></el-icon>
                    </el-button>
                </div>
                <!-- 可用于显示其他按钮 -->
                <slot name="formButton" :item="formInline"></slot>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';

const props = defineProps({
    activeIcon: {
        type: String,
    },
    emitSearch: {
        // 是否立即执行搜索
        type: Boolean,
        default: false,
    },
    isShowDefault: {
        // 是否展示默认按钮
        default: true,
    },
    isShowLabel: {
        // 是否展示默认按钮
        default: true,
    },
    formItemList: {
        type: Array,
        default() {
            return [
                {
                    label: '下拉框',
                    type: 'select',
                    selectOptions: [{ text: 111, value: 111 }],
                    param: 'company',
                    defaultSelect: '', // 下拉框默认选中项
                    multiple: false,
                    labelKey: 'text', // 可选，自定义下拉框label字段
                    valueKey: 'value', // 可选，自定义下拉框value字段
                },
                {
                    label: '输入框',
                    type: 'input',
                    param: 'name',
                },
                {
                    label: '日期范围',
                    type: 'daterange',
                    param: 'createtime',
                },
                {
                    label: '级联选择器',
                    type: 'cascader',
                    param: 'cascader',
                    options: [],
                    props: { multiple: false },
                },
            ];
        },
    },
});
const emit = defineEmits(['change', 'search']);

const formInline = reactive({});
const openBy = ref(false);
const ruleForm = ref(null);
onMounted(() => {
    for (const obj of props.formItemList) {
        formInline[obj.param] = obj.defaultSelect || null;
    }
});
watch(
    () => props.emitSearch,
    (newVal, oldVal) => {
        if (newVal) {

            emit('search', formInline);
        }
    },
);

watch(
    () => props.formItemList,
    (newVal, oldVal) => {
        for (const obj of newVal) {
            if (obj.defaultSelect) {
                formInline[obj.param] = obj.defaultSelect;
            }
        }
    },
    { deep: true },
);

// input清除事件
const clear = (e, param) => {
    if (e === '') {
        formInline[param] = null;
    }
};
// 清除指定内容
const clearYou = (type) => {
    formInline[type] = null;
};
// input change事件
const change = (e, param) => {
    emit('change', { e, param });
};
const onSubmit = () => {
    emit('search', formInline);
};

const clearIn = (param) => {
    const formInlineItem = {};
    formInlineItem[param] = null; // 指定筛选条件清空
    // formInline = formInlineItem;
};
// 添加默认值
const setDefaultData = (param) => {
    for (const iterator in param) {
        formInline[iterator] = param[iterator];
    }
};

// 当导出不需要执行搜索事件时
const penetrateParams = (param) => {
    return formInline;
};
const resetForm = () => {
    ruleForm.value.resetFields();
    const formInlineItem = {};
    for (const obj of props.formItemList) {
        // formInline[obj.param] = obj.defaultSelect || "";  // 重置时下拉框的默认值如果要保留就选用这个
        formInline[obj.param] = null; // 所有筛选条件清空
    }

    emit('search', formInline);
};
// 暴露子组件方法
defineExpose({
    penetrateParams,
});
</script>
<style scoped lang="scss">
.dialog-search {
    margin-bottom: 10px;
}

el-form-item--large asterisk-left .top-title {
    font-size: 20px;
    font-family: RZRXNFHJ;
    font-weight: 500;
    color: #1f2329;
}

.top-screen {
    background-color: #fff;
    margin: 0px 0 0 0;
    padding: 12px 16px;
    padding-bottom: 0px;
    border-radius: 2px;
    display: flex;
    justify-content: space-between;

    .top-screen-left {
        flex: 1;
    }

    .ruleForm_left {
        flex: 1;
        overflow: hidden;
        transition: all 0.3s;
    }
}
.el-icon--right {
    transition: all 0.3s;
}
.top-screen-right {
    > div {
        width: 240px;
    }
}

.top-right-bottom {
    background: --el-color-primary;
    border-radius: 2px 2px 2px 2px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
    padding: 4px 16px;
    margin-left: 12px;
}

.top-right-Reset-bottom {
    color: #1f2329;
    background-color: #fff;
    border: 1px solid #c9cdd0;
}

::v-deep(.el-form) {
    width: 100%;
}

::v-deep(.el-form-item__content) {
    width: 100%;
}

::v-deep(.el-form-item) {
    width: 100%;
}

/* 修复标签与输入框的垂直居中与水平对齐问题 */
.top-screen :deep(.el-form-item) {
    display: flex;
    align-items: center;
}

.top-screen :deep(.el-form-item__label) {
    display: flex;
    align-items: center;
    height: 40px; /* 与 Element Plus large 尺寸一致 */
    line-height: 40px;
    padding-right: 8px;
    box-sizing: border-box;
    white-space: nowrap;
}

.top-screen :deep(.el-input),
.top-screen :deep(.el-select),
.top-screen :deep(.el-date-editor),
.top-screen :deep(.el-cascader) {
    height: 40px;
}

.top-screen :deep(.el-input__wrapper) {
    min-height: 40px;
}
</style>
