import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, message, Row, Col, Descriptions, Cascader, Select } from 'antd';
import { getDictList } from '@/servers/api/dicts';
import {  bankView, bankAdd, bankEdit } from '../services';
import { getRegionTree } from '@/servers/api/register';
import type { DictItem } from '@/servers/api/dicts';

// 地区字段转换
function convertToCascaderOptions(data: any[]): any[] {
    return data.map(item => ({
        label: item.name,
        value: item.id,
        children: item.children && item.children.length > 0 ? convertToCascaderOptions(item.children) : undefined,
    }));
}
interface props {
    visible: boolean;
    onOk: () => void;
    onCancel: () => void;
    initialValues?: any;
    readOnly?: boolean;
}
interface viewDataData {
    id?: string | null;
    account?: string;
    accountName?: string;
    bank?: string;
    city?: string;
    currency?: string;
    interbankNumber?: string;
    nation?: string;
    province?: string;
    supplierId?: string;
    swiftCode?: null;
    attachment?: {
        uid: string;
        name: string;
        url: string;
        status: string;
    }[];
}
const InvoiceFormModal: React.FC<props> = ({
    visible,
    onOk,
    onCancel,
    initialValues,
    readOnly = false,
}) => {
    const userId = sessionStorage.getItem('userId') || '';
    // 新增与修改
    const [form] = Form.useForm();
    //查看
    const [viewData, setViewData] = useState<viewDataData>({});
    // 地区
    const [addressOptions, setAddressOptions] = useState<API.RegionOption[]>([]);

    const [currency, setCurrency] = useState<DictItem[]>([]);

    useEffect(() => {
        if (visible) {
            if (initialValues) {
                bankView(initialValues.id).then((res) => {
                    const { code, data } = res;
                    if (code === 200) {
                        const fields = {
                            ...data,
                            id: data.id ? data.id : null,
                            address: [
                                Number(data.nation),
                                Number(data.province),
                                Number(data.city),
                              ]
                        };
                        console.log(fields);

                        form.setFieldsValue(fields);
                        setViewData(fields);
                    }
                });
            } else {
                form.resetFields(); // ✅ 只有无 initialValues 才重置
            }
            getRegionTree().then(res => {
                if (res.code === 200) {
                    setAddressOptions(convertToCascaderOptions(res.data));
                }
            });


            getDictList('currency').then((res) => {
                if (res.code === 200) {
                    setCurrency(res.data);
                }
            });


        }
    }, [visible, initialValues]);

    // 提交
    const handleFinish = async () => {
        try {
            const values = await form.validateFields();
            const payload = {
                ...values,
                supplierId: userId,
            };
            payload.province = payload.address[1];
            payload.city = payload.address[2];
            payload.nation = payload.address[0];

            if (!values.id) {
                bankAdd(payload).then((res) => {
                    if (res.code == 200) {
                        message.success('新增成功');
                        onOk();
                    }
                })
            } else {
                bankEdit(payload).then((res) => {
                    if (res.code == 200) {
                        message.success('修改成功');
                        onOk();
                    }
                })
            }

        } catch (error) {
            console.error('表单校验失败:', error);
        }
    };

    return (
        <Modal
            title={readOnly ? '查看' : initialValues ? '修改' : '新增'}
            visible={visible}
            onCancel={onCancel}
            onOk={readOnly ? onCancel : handleFinish}
            footer={readOnly ? null : undefined}
            destroyOnClose
            width={600}
        >
            {readOnly ? (
                <Descriptions
                    column={1}
                    bordered
                    size="middle"
                    labelStyle={{ width: 160 }}
                >
                    <Descriptions.Item label="开户账号">{viewData.account}</Descriptions.Item>
                    <Descriptions.Item label="账户名称">{viewData.accountName}</Descriptions.Item>
                    <Descriptions.Item label="开户银行">{viewData.bank}</Descriptions.Item>
                    <Descriptions.Item label="联行号">{viewData.interbankNumber}</Descriptions.Item>
                    <Descriptions.Item label="省份">{viewData.province}</Descriptions.Item>
                    <Descriptions.Item label="城市">{viewData.city}</Descriptions.Item>
                    <Descriptions.Item label="国家/地区">{viewData.nation}</Descriptions.Item>
                    <Descriptions.Item label="币种">{viewData.currency}</Descriptions.Item>
                </Descriptions>
            ) : (
                <Form form={form} labelCol={{ flex: '120px' }} wrapperCol={{ flex: 1 }}>
                    <Row gutter={24}>
                        <Col span={24}>
                            <Form.Item name="account" label="开户账号" rules={[{ required: true }]}>
                                <Input  placeholder='请输入开户账号' />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item name="accountName" label="账户名称" rules={[{ required: true }]}>
                                <Input placeholder='请输入账户名称' />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item name="bank" label="开户银行" rules={[{ required: true }]}>
                                <Input placeholder='请输入开户银行' />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item name="interbankNumber" label="联行号" rules={[{ required: true }]}>
                                <Input placeholder='请输入联行号' />
                            </Form.Item>
                        </Col>

                        <Col span={24}>
                            <Form.Item name="address" label="地址" rules={[{ required: true }]}>
                                <Cascader
                                    options={addressOptions}
                                    placeholder="请选择地址"
                                    showSearch={{
                                        filter: (inputValue, path) => {
                                            return path.some((option) => {
                                                if (typeof option.label === 'string') {
                                                    return (
                                                        option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
                                                    );
                                                }
                                                return false;
                                            });
                                        },
                                    }}
                                />
                            </Form.Item>
                        </Col>
                        {/* <Col span={24}>
                            <Form.Item name="province" label="省份" rules={[{ required: true }]}>
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item name="city" label="城市" rules={[{ required: true }]}>
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={24}>
                            <Form.Item name="nation" label="国家/地区" rules={[{ required: true }]}>
                                <Input />
                            </Form.Item>
                        </Col> */}
                        <Col span={24}>
                            <Form.Item name="currency" label="币种" rules={[{ required: true }]}>
                                <Select placeholder="请选择币种">
                                    {currency.map((item) => (
                                        <Select.Option key={item.code} value={item.code}>
                                            {item.dicName}
                                        </Select.Option>
                                    ))}
                                </Select>
                            </Form.Item>
                        </Col>
                        <Form.Item name="id" noStyle>
                            <Input type="hidden" />
                        </Form.Item>
                    </Row>
                </Form>
            )}
        </Modal>
    );
};

export default InvoiceFormModal;
