<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose title="派单" :width="500" @ok="handleSubmit" @visible-change="resetForm">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="区域">
            <JAreaLinkage v-model:value="formState.areaIds" :show-all="true" @change="formatArea" />
        </a-form-item>
        <a-form-item label="街道 ">
            <a-input v-model:value="formState.address" placeholder="请输入街道地址" />
        </a-form-item>
        <a-form-item label=" ">
            <a href="javascript:;" @click="loadDeliveryList">查询这个区域的送卡人</a>
        </a-form-item>
        <a-form-item label="送卡人">
            <a-select v-model:value="formData.cardDeliveryPerson" :options="deliveryList"
                  :fieldNames="{ label: 'name', value: 'id' }" style="width: 100%" placeholder="请选择送卡人">
            </a-select>
        </a-form-item>
    </a-form>
  </BasicModal>
</template>

<script lang="ts" setup>
    import {ref, computed, unref, reactive}  from 'vue';
    import type { UnwrapRef } from 'vue';
    import {BasicModal, useModalInner} from '/@/components/Modal';
    import {JAreaLinkage} from '/@/components/Form';
    import { getAreaCardDeliveryPersonList, dispatch } from '../CardApplicationCustomers.api';
    import { useMessage } from '/@/hooks/web/useMessage';

    const { createMessage } = useMessage();

    const labelCol = { style: { width: '150px' } };
    const wrapperCol = { span: 14 };

    // Emits声明
    const emit = defineEmits(['register','success']);

    interface FormState {
        areaIds?: string[];
        province: string;
        city: string;
        area: string;
        address: string;
    }
    const formState: UnwrapRef<FormState> = reactive({
        areaIds: [],
        province: '',
        city: '',
        area: '',
        address: '',
    });
    const deliveryList = ref<any[]>([]);

    function formatArea(value){
        if(value && value.length == 3){
            formState.province = value[0];
            formState.city = value[1];
            formState.area = value[2];
        }else{
            formState.province = '';
            formState.city = '';
            formState.area = '';
        }
    }

    function resetForm(visible: boolean){
        if(visible){
            formState.areaIds = [];
            formState.province = '';
            formState.city = '';
            formState.area = '';
            formState.address = '';
            deliveryList.value = [];
            formData.value.cardDeliveryPerson = '';
        }
    }

    //表单赋值
    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
        formData.value.id = data?.record?.id || '';
        setModalProps({confirmLoading: false,showCancelBtn:!!data?.showFooter,showOkBtn:!!data?.showFooter});
        
    });

    const formData = ref<any>({
        id: '',
        cardDeliveryPerson: ''
    });
    //表单提交事件
    async function handleSubmit(v) {
        try {
            if(!formData.value.id){
                createMessage.warning('无效的客户信息');
                return Promise.reject('无效的客户信息');
            } else if(!formData.value.cardDeliveryPerson){
                createMessage.warning('请选择送卡人');
                return Promise.reject('请选择送卡人');
            }
            setModalProps({confirmLoading: true});
            //提交表单
            await dispatch(formData.value);
            //关闭弹窗
            closeModal();
            //刷新列表
            emit('success');
        } catch (error) {
           return Promise.reject(error);
        } finally {
            setModalProps({confirmLoading: false});
        }
    }

    async function loadDeliveryList() {
        if(!formState.province || !formState.city){
            createMessage.warning('请先选择区域');
            return;
        }
        const res = await getAreaCardDeliveryPersonList(formState);
        if(Array.isArray(res)){
            deliveryList.value = res;
        } else {
            createMessage.error(res || '查询送卡人失败');
        }
    }

</script>

<style lang="less" scoped>
	/** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>