<template>
    <div v-if="column && column.length > 0">
        <el-form :inline="true" ref="searchRef" :model="formInline" class="demo-form-inline">
            <template v-for="item in column" :key="item.prop">
                <!-- 输入框 -->
                <el-form-item :label="item.label" v-if="item.type === 'input'" :prop="item.prop">
                    <el-input v-model="formInline[item.prop]" :placeholder="'请输入' + item.label" clearable />
                </el-form-item>

                <!-- 时间选择 -->
                <el-form-item :label="item.queryLabel||item.label" v-if="item.type === 'date'" :prop="item.prop">
                    <el-date-picker v-model="formInline[item.prop]" value-format="YYYY-MM-DD" type="daterange"
                        range-separator="-" start-placeholder="开始日期" clearable end-placeholder="结束日期"></el-date-picker>
                </el-form-item>

                <!-- 下拉框选择 -->
                <el-form-item :label="item.label" v-if="item.type === 'select'" :prop="item.prop">
                    <el-select v-model="formInline[item.prop]" :placeholder="'请选择' + item.label" clearable>
                        <el-option v-for="dict in dictionaryOptions[item.dictionary]" :key="dict.value"
                            :label="dict.label" :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.label" v-if="item.type === 'dict'" :prop="item.prop">
                    <el-select v-model="formInline[item.prop]" :placeholder="'请选择' + item.label" clearable>
                        <el-option v-for="dict in item.dict" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <!-- 联动选择框 -->
                <el-form-item :label="item.label" v-if="item.type === 'cascader'" :prop="item.prop">
                    <el-cascader v-model="formInline[item.prop]" :options="item.options || []" style="width: 100%;"
                        :props="item.props" />
                </el-form-item>


            </template>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" v-for="item in searchBtns" :key="item.key">
                <!-- <el-button :type="item.type || 'primary'" plain :icon="item.icon" @click="() => item.func(formInline)"
                    v-if="item.show ? item.show() : true">{{ item.label }}</el-button> -->


                    <template v-if="item.show">
                                <template v-if="item.hasPermi">
                                    <el-button  :type="item.type || 'primary'" :icon="item.icon"
                                    @click="() => item.func({...formInline,tabsValue})" plain v-if="item.show(tabsValue)"> {{ item.label }}</el-button>
                                </template>
                                <template v-else>
                                    <el-button   :type="item.type || 'primary'" :icon="item.icon"
                                    @click="() => item.func({...formInline,tabsValue})" plain v-if="item.show(tabsValue)"> {{ item.label }}</el-button>
                                </template>
                           </template>
                           <template v-else-if="item.hasPermi">
                                <el-button   :type="item.type || 'primary'" :icon="item.icon"
                                @click="() => item.func({...formInline,tabsValue})" plain v-hasPermi="item.hasPermi"> {{ item.label }}</el-button>
                           </template>
                           <template v-else>
                                <el-button  :type="item.type || 'primary'" :icon="item.icon"
                                @click="() => item.func({...formInline,tabsValue})"  plain> {{ item.label }}</el-button>
                           </template>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
const { proxy } = getCurrentInstance();

const props = defineProps({
    column: {
        type: Object,
        default: [],
        required: true
    },
    searchBtns: {
        type: Array,
        default: [],
    },
    tabsValue:{
        type: String,
        default: '',
    }

})

const emit = defineEmits(['submit', 'reset'])

const formInline = reactive({
    user: '',
    region: '',
    date: '',
})

const searchRef = ref(null);

const dictionaryOptions = reactive({})

const handlerFormData = () => {
    try {
        const array = props.column;
        const parmas = {}
        for (let i = 0; i < array.length; i++) {
            const element = array[i];
            if (element.type === 'date' && formInline[element.prop]&&formInline[element.prop].length > 0) {
                parmas[element.keys[0]] = formInline[element.prop][0];
                parmas[element.keys[1]] = formInline[element.prop][1];
            } else if (formInline[element.prop]) {
                if (element.prop === 'businessManagementId') {
                    console.log('formInline[element.prop]', formInline[element.prop]);
                    parmas[element.prop] = formInline[element.prop][formInline[element.prop].length - 1];
                } else {
                    parmas[element.prop] = formInline[element.prop];
                }

            }
        }
        return parmas
    } catch (error) {
        console.log("TCL: handlerFormData -> error", error)

    }
}
const handleQuery = () => {
    const parmas = handlerFormData();
    console.log('parmas', parmas);
    emit('submit', parmas)
}
const resetForm = () => {
    if (!searchRef.value) return
    searchRef.value.resetFields();
    const parmas = handlerFormData();
    emit('reset', parmas)
}

const handleInit = () => {
    try {
        const keys = props.column.map(item => {
            if (item.type === 'select' && item.dictionary) {
                return item.dictionary;
            }
        }).filter(Boolean);


        if (keys && keys.length > 0) {
            const res = proxy.useDict(keys);
            Object.assign(dictionaryOptions, res)
        }

    } catch (error) {
        console.log('error', error);

    }
}




onMounted(() => {
    handleInit();
})


</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>