<script setup>
import {defineModel} from 'vue';
import XSelect from '../XSelect/index.vue';


const FROM_TYPE = {
    INPUT: 'input',
    SELECT: 'select',
    DATETIME: 'datetime',
    CUSTOM: 'custom',
}
const emits = defineEmits(['search']);
const {config, title, buttonCol, formBottom} = defineProps({
    config: {
        type: Array,
        default: [],
        required: true,
    },
    title: {
        type: String,
        default: '查询任务'
    },
    buttonCol: {
        type: Boolean,
        default: true,
    },
});
const from = defineModel('from');

const reset = () => {
    console.log(from.value)
    Object.keys(from.value).forEach(key => {
        from.value[key] = null;
    });
    emits('reset');
    emits('search');
}
</script>

<template>
    <div class="title">
        {{ title }}
    </div>

    <div class="flex mb-[16px]">
        <div class="flex-grow">
            <a-form
                :auto-label-width="true"
                class="AFORM">
                <a-row :gutter="24">
                    <template v-for="(item, index) in config" :key="index">
                        <a-col :span="item.span || 8">
                            <a-form-item :label="item.label"
                                         :class="Math.ceil((index+1) / 3) !== Math.ceil(config.length / 3) ? 'mb20' : ''">
                                <template v-if="item.type === FROM_TYPE.INPUT">
                                    <a-input
                                        class="w-full"
                                        v-model:model-value="from[item.key]"
                                        :placeholder="item.placeholder">
                                    </a-input>
                                </template>

                                <template v-if="item.type === FROM_TYPE.SELECT">
                                    <x-select
                                        class="w-full"
                                        v-model:model-value="from[item.key]"
                                        :placeholder="item.placeholder"
                                        :api="item.api">
                                    </x-select>
                                </template>

                                <template v-if="item.type === FROM_TYPE.DATETIME">
                                    <a-range-picker
                                        v-model:model-value="from[item.key]"
                                        class="w-full"
                                        @change="(v) => {
                                            from[item.start] = v[0];
                                            from[item.end] = v[1];
                                        }">
                                    </a-range-picker>
                                </template>

                                <template v-if="item.type === FROM_TYPE.CUSTOM">
                                    <slot :name="item.slotName" :scope="item"></slot>
                                </template>
                            </a-form-item>
                        </a-col>
                    </template>
                </a-row>
            </a-form>
        </div>

        <a-divider direction="vertical" margin="20px"></a-divider>

        <div class="flex gap-[16px]" :style="{flexDirection: buttonCol ? 'column' : 'row'}">
            <a-button @click="emits('search')" type="primary">
                <template #icon>
                    <icon-search/>
                </template>
                查询
            </a-button>
            <a-button @click="reset">
                <template #icon>
                    <icon-refresh/>
                </template>
                重置
            </a-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.title {
    color: rgb(29, 33, 41);
    font-family: PingFang SC, serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    text-align: left;
    margin-bottom: 16px;
}

.mb20 {
    margin-bottom: 20px !important;
}

.AFORM {
    :deep(.arco-form-item) {
        margin-bottom: 0;
    }

    :deep(.arco-form-item-label) {
        @apply whitespace-nowrap;
    }
}
</style>
