<!-- 搜索表单 -->
<template>
    <ele-card :body-style="{ paddingBottom: '8px' }">
        <ProSearch
            :items="formItems"
            ref="searchRef"
            @search="search"
            :initKeys="initKeys"
        />
    </ele-card>
</template>

<script setup>
    import { reactive, ref, defineEmits } from 'vue';
    import ProSearch from '@/components/CommonPage/ProSearch2.vue';

    let { proxy } = getCurrentInstance();
    const emit = defineEmits(['search']);
    const provinceList = ref([]);
    const cityList = ref([]);
    const formItems = computed(() => {
        return [
            { type: 'input', label: '学校名称', prop: 'schoolName' },
            {
                type: 'select',
                label: '省份',
                prop: 'provinceId',
                options: provinceList.value.map((d) => {
                    return { label: d.district, value: d.id };
                }),
                props: {
                    filterable: true,
                    onChange: (val) => {
                        searchRef.value?.setData({ cityId: '' });
                        getProviceList(val).then((res) => {
                            cityList.value = res.data.data;
                        });
                    }
                }
            },
            {
                type: 'select',
                label: '所在市',
                prop: 'cityId',
                options: cityList.value.map((d) => {
                    return { label: d.district, value: d.id };
                }),
                props: {
                    filterable: true
                }
            },
            {
                type: 'dictSelect',
                label: '办学层次',
                prop: 'schoolLevel',
                props: {
                    code: 'school_level'
                }
            },
            { type: 'input', label: '主管部门', prop: 'departmentName' },
            {
                type: 'dictSelect',
                label: '标记',
                prop: 'schoolTag',
                props: {
                    code: 'school_tag'
                }
            }
        ];
    });

    function getProviceList(id = 1) {
        return proxy.$http.get(`/baseinfo/districtInfo/findInfo/${id}`);
    }
    getProviceList().then((res) => {
        provinceList.value = res.data.data;
    });

    const initKeys = reactive({
        schoolName: '',
        provinceId: '',
        cityId: '',
        schoolLevel: '',
        departmentName: '',
        shcoolTag: ''
    });

    const searchRef = ref(null);
    /** 搜索 */
    const search = (data) => {
        emit('search', { ...data });
    };
</script>
