<!-- 搜索表单 -->
<template>
    <simple-form-modal
        :title="title"
        :items="formItems"
        ref="editRef"
        :baseUrl="baseUrl"
        labelWidth="120px"
        width="700px"
        @success="(data) => emit('success', data)"
        :type="type"
    >
        <template #citySelect="{ item, model, updateValue }">
            <city-select
                :placeholder="'请选择' + item.label"
                v-bind="item.props || {}"
                :modelValue="model[item.prop]"
                @update:modelValue="updateValue"
            />
        </template>
    </simple-form-modal>
</template>

<script setup>
    import { reactive, ref, defineEmits, getCurrentInstance } from 'vue';
    import { useFormData } from '@/utils/use-form-data';
    import SimpleFormModal from '@/components/CommonPage/SimpleFormModal.vue';
    import CitySelect from '@/components/CommonPage/CitySelect.vue';
    const { proxy } = getCurrentInstance();

    //获取省市
    const provinceList = ref([]);
    const cityList = ref([]);
    const countyList = ref([]);
    const title = ref('新增仓库');
    const emit = defineEmits(['success']);

    const formItems = computed(() => {
        return [
            {
                type: 'input',
                label: '仓库名称',
                prop: 'godownName',
                required: true
            },
            {
                type: 'input',
                label: '联系人',
                prop: 'contactsName',
                required: true
            },
            {
                type: 'dictRadio',
                label: '状态',
                prop: 'useStatus',
                props: { code: 'use_status' },
                required: true
            },
            //   { type: 'citySelect', label: '省市区', prop: 'contactsPhone' },
            {
                type: 'select',
                label: '省份',
                prop: 'provinceId',
                required: true,
                options: provinceList.value.map((d) => {
                    return { label: d.district, value: d.id };
                }),
                props: {
                    filterable: true,
                    onChange: (val) => {
                        getProviceList(val).then((res) => {
                            cityList.value = res.data.data;
                        });
                    }
                }
            },
            {
                type: 'select',
                label: '所在市',
                prop: 'cityId',
                required: true,
                options: cityList.value.map((d) => {
                    return { label: d.district, value: d.id };
                }),
                props: {
                    filterable: true,
                    onChange: (val) => {
                        getProviceList(val).then((res) => {
                            countyList.value = res.data.data;
                        });
                    }
                }
            },
            {
                type: 'select',
                label: '所在区',
                prop: 'countyId',
                required: true,
                options: countyList.value.map((d) => {
                    return { label: d.district, value: d.id };
                }),
                props: {
                    filterable: true
                }
            },
            {
                type: 'input',
                label: '详细地址',
                prop: 'addressDetail',
                required: true
            },
            {
                type: 'input',
                label: '手机号',
                prop: 'phoneNum',
                required: true,
                itemProps: {
                    rules: [
                        {
                            pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
                            message: '请输入正确的手机号码'
                        }
                    ]
                }
            },
            {
                type: 'dictSelect',
                label: '默认快递',
                prop: 'finalExpress',
                props: { code: 'final_express' },
                required: true
            },
            {
                type: 'dictRadio',
                label: '图书审核提示',
                prop: 'checkTips',
                props: { code: 'is_open_close' },
                required: true
            },
            {
                type: 'dictRadio',
                label: '绑定审核员',
                prop: 'bindChecker',
                props: { code: 'is_open_close' },
                required: true
            },
            {
                type: 'dictRadio',
                label: '路由异常签收',
                prop: 'abnormalSign',
                props: { code: 'is_open_close' },
                required: true
            }
        ];
    });
    //默认值
    const baseUrl = reactive({
        add: '/baseinfo/godown/add',
        update: '/baseinfo/godown/update'
        // detail: '/baseinfo/godown/getInfo'
    });

    const initParams = {
        useStatus: '1',
        abnormalSign: '1',
        checkTips: '1',
        bindChecker: '1'
    };
    const formData = ref({});

    const editRef = ref(null);
    const type = ref('');
    function handleOpen(data = {}, optType) {
        type.value = optType;
        if (optType === 'detail') {
            title.value = '仓库详情';
        } else {
            title.value = data && data.id ? '编辑仓库' : '新增仓库';
        }
        data.finalExpress = data.defaultExpress;
        formData.value = data.id ? data : { ...initParams };
        getProviceList().then((res) => {
            provinceList.value = res.data.data;
        });
        if (data && data.provinceId) {
            getProviceList(data.provinceId).then((res) => {
                cityList.value = res.data.data;
            });
        }
        if (data && data.cityId) {
            getProviceList(data.cityId).then((res) => {
                countyList.value = res.data.data;
            });
        }
        editRef.value?.handleOpen(formData.value);
    }

    function getProviceList(id = 1) {
        return proxy.$http.get(`/baseinfo/districtInfo/findInfo/${id}`);
    }

    defineExpose({ handleOpen });
</script>
