<template>
    <div>
        <a-form ref="formRef" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off" :model="form"
            class="forms" :layout="layout">
            <template v-for="v in FormData" :key="v?.name">
                <a-form-item :field="v?.name" :label="v?.label" v-if="v?.type === 'data'">
                    <a-date-picker v-model:value="form[v.name]" />
                </a-form-item>
                <a-form-item :label="v.label" v-else-if="v?.type === 'checkbox'">
                    <a-checkbox-group v-model:value="form[v.name]" :options="v.data" />
                </a-form-item>
                <a-form-item :label="v.label" v-else-if="v?.type === 'range'">
                    <a-range-picker v-model:value="form[v.name]" show-time format="YYYY-MM-DD HH:mm" />
                </a-form-item>
                <a-form-item :label="v.label" v-else-if="v?.type === 'select'&&!v.show" >
                    <!-- :fieldNames="v.fieldName" 有空了捯饬-->
                    <a-select v-model:value="form[v.name]" :mode="v.tags"  :show-search="v.search"
                        :placeholder="`请选择${v.label}`" @search="v?.handleSearch" @select="v.select">
                        <a-select-option v-for="item in v.data" :key="item.value" :value="item.value" :label="item.label">{{
                            item.label
                        }}</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item :label="v.label" v-else-if="v?.type === 'cascader'">
                    <div class="catetory">
                        <div class="cateto-cont" @click="v.show = true">{{ categoryTtle || `请选择${v.label}` }}</div>
                        <div style="justify-content: end;" @click="del(v)">
                            <CloseOutlined />
                        </div>
                    </div>
                    <a-modal v-model:visible="v.show" :footer="false" title="选择行业类别">
                        <ModelCategory @getValue="getCategory" />
                    </a-modal>
                </a-form-item>
                <a-form-item :label="v.label" :auto-label-width="true" v-else-if="v?.type === 'input'">
                    <a-input v-model:value="form[v.name]" :placeholder="`请输入${v.label}`" />
                </a-form-item>
            </template>
            <a-form-item>
                <a-button type="primary" @click="handleSubmit" class="mr-6 ml-6">
                    <SearchOutlined />搜索
                </a-button>
                <a-button @click="reset">
                    <RollbackOutlined />重置
                </a-button>
            </a-form-item>
        </a-form>

    </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, watch } from 'vue';
import { SearchOutlined, CloseOutlined, RollbackOutlined } from '@ant-design/icons-vue';
import ModelCategory from './ModelCategory.vue';

const props = defineProps({
    FormData: Object,
    layout: {
        type: String,
        default: 'inline'
    }
})
const emit = defineEmits('submits')
const formRef = ref()
const form = ref({})


watch(
    () => props.FormData,
    (item: any) => {
        item.forEach((v: any) => {
            form.value[v.name] = v.value
        });

    }, { deep: true }
);
// 点击提交
function handleSubmit() {
    emit('submits', form.value)
}
function reset() {
    formRef.value.resetFields();
    // 不知道为啥不起作用
    for (let k in form.value) {
        form.value[k] = null
    }
    categoryTtle.value = ''
}
// 行业类编相关的
const categoryTtle = ref()
function getCategory(val: any) {
    props.FormData?.forEach(v => {
        if (v.name === 'hylb') {
            v.value = val.id;
            form.value[v.name] = val.id;
            categoryTtle.value = val.label
            v.show = false
        }

    })
}
function del(v: any) {
    v.value = null
    form.value[v.name] = null;
    categoryTtle.value = ""
}
</script>

<style lang="less">
.forms {
    width: 100%;
    padding: 35px 0;
    background-color: #fff;
    border-bottom: 1px solid #F0F0F0;


    .catetory {
        border: 1px solid #F0F0F0;
        height: 35px;
        line-height: 35px;
        text-indent: 12px;
        display: flex;
    }

    .cateto-cont {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ant-form-item {
        width: 16%;
        min-width: 16%;
    }

    .ant-col {
        margin-top: 15px;
    }
}
</style>