import React from "react";
import { decorator } from 'grey-react-box';
import { Form } from 'kts-components-antd-x3';
import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
import Icon from '@ant-design/icons';
import Invoice from '../../..';
import './index.less';
import { Cascader, Col, Input, Row, Select, Button } from "kts-components-antd-x4";
import moment from "moment";
import { ReactComponent as I001 } from './svg/plus.svg'


export interface RealEstateInfoProps {
    /**
     * 建筑服务地址数据
     */
    addressOptions?: any[];

    /**
     * 建筑服务地址数据字段名
     */
    fieldNames?: any;

    /** 获取"跨区域涉税事项报验管理编号" */
    getCrossRegionTaxReportNo?: () => Promise<any>;

    /** 是否显示 【 获取"跨区域涉税事项报验管理编号"】按钮 */
    showGetCrossRegionTaxReportNoButton?: boolean;
}

/** 特殊信息-建筑服务 */
export default decorator<RealEstateInfoProps, FormComponentProps & RealEstateInfoProps>(Form.create())(props => {

    /** 控制器 */
    const controller = Invoice.useInvoiceController();

    const { form } = props;

    const { getFieldDecorator } = form;

    const model = controller.useMemo(s => s.model, []);

    const readOnly = React.useMemo(() => model === 'readOnly', [model]);

    // 注册 form
    controller.useForm('serviceDataDtoInfo', form);

    // 监听 crossCitiesSign 字段值变化
    const [crossCitiesSign, setCrossCitiesSign] = React.useState(form.getFieldValue('crossCitiesSign'));

    // 同步表单初始值和外部更新
    React.useEffect(() => {
        const currentValue = form.getFieldValue('crossCitiesSign');
        setCrossCitiesSign(currentValue);
    }, [form]);

    return (
        <div className="kts-invoice-operate-real-estate-info-digtal">
            <div className='real-estate-info-digtal-label' >特定信息-建筑服务</div>
            <Row gutter={[17, 0]}>
                <Col span={6} >
                    <Form.Item label='土地增值税项目编号' >
                        {getFieldDecorator('landNumber', {
                            rules: [
                                { max: 16, message: '最多16个字符' },
                            ]
                        })(
                            readOnly
                                ? <MyDiv />
                                : <Input maxLength={16} autoComplete='off' placeholder="请输入" />
                        )}
                    </Form.Item>
                </Col>


                <Col span={6} >
                    <Form.Item label='建筑服务发生地' >
                        {getFieldDecorator('constructAddress', {
                            rules: readOnly ? [] : [{ required: true, message: '请选择省市区县' }]
                        })(
                            readOnly
                                ? (<MyArrString />)
                                : (<Cascader
                                    style={{ width: '100%' }}
                                    options={props.addressOptions}
                                    fieldNames={props.fieldNames}
                                    placeholder="请选择省市区县"
                                />)
                        )}
                    </Form.Item>
                </Col>
                <Col span={6} >
                    <Form.Item label='详细地址' className="break-word">
                        {getFieldDecorator('constructDetailAddress', {
                            rules: readOnly ? [] : [
                                { required: true, message: '请输入详细地址' },
                                { max: 120, message: '详细地址最多120个字符' },
                                {
                                    validator: (_, value) => {
                                        const pattern = /街|路|村|乡|镇|道|巷|号/;
                                        return pattern.test(value) ? Promise.resolve() : Promise.reject('地址必须包含“街”、“路”、“村”、“乡”、“镇”、“道”、“巷”、“号”等任意一个关键词');
                                    }
                                }
                            ]
                        })(
                            readOnly
                                ? <MyDiv />
                                : <Input autoComplete='off' placeholder="请输入详细地址" />
                        )}
                    </Form.Item>
                </Col>
                <Col span={6} >
                    <Form.Item label='跨地（市）标志' >
                        {getFieldDecorator('crossCitiesSign', {
                            rules: readOnly ? [] : [
                                { required: true, message: '请选择跨地（市）标志' }
                            ]
                        })(
                            readOnly
                                ? <MyNY />
                                : <Select
                                    placeholder='请选择'
                                    style={{ width: '100%' }}
                                    onChange={(value) => {
                                        setCrossCitiesSign(value)
                                        if (value === 'N') {
                                            form.setFieldsValue({
                                                crossRegionTaxReportNo: '',
                                                constructAddress: [],
                                                constructDetailAddress: '',
                                                constructName: '',
                                            });
                                        }
                                    }}
                                >
                                    <Select.Option value='Y'>是</Select.Option>
                                    <Select.Option value='N'>否</Select.Option>
                                </Select>
                        )}
                    </Form.Item>
                </Col>

                <Col span={6} >
                    <Form.Item label='跨区域涉税事项报验管理编号' >
                        {getFieldDecorator('crossRegionTaxReportNo', {
                            rules: readOnly ? [] : [{ required: crossCitiesSign === 'Y', message: '请输入跨区域涉税事项报验管理编号' }]
                        })(
                            readOnly
                                ? <MyDiv />
                                : <Input readOnly autoComplete='off'
                                    addonAfter={props.showGetCrossRegionTaxReportNoButton && <Button style={{ height: 0, padding: 0, width: "auto" }} type="link" icon={<Icon component={I001} />} disabled={readOnly || crossCitiesSign !== 'Y'}
                                        onClick={async () => {
                                            const values = await props.getCrossRegionTaxReportNo?.();
                                            form.setFieldsValue(values);
                                        }}
                                    />}
                                />
                        )}
                    </Form.Item>
                </Col>

                <Col span={6} >
                    <Form.Item label='建筑项目名称' >
                        {getFieldDecorator('constructName', {
                            rules: readOnly ? [] : [
                                { required: true, message: '请输入建筑项目名称' },
                                { max: 200, message: '建筑项目名称最多200个字符' },
                            ]
                        })(
                            readOnly
                                ? <MyDiv />
                                : <Input autoComplete='off' placeholder="请输入" />
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </div>
    )
})

class MyDiv extends React.Component<{ value?: string, style?: React.CSSProperties }> {
    render(): React.ReactNode {
        return (
            <div style={this.props.style}>{this.props.value}</div>
        )
    }
}

class MyArrString extends React.Component<{ value?: string[], style?: React.CSSProperties }> {
    render(): React.ReactNode {
        return (
            <div style={this.props.style}>
                {
                    this.props.value?.filter(e => !!e)
                        .join(',')
                }
            </div>
        )
    }
}

class MyArrMoment extends React.Component<{ value?: moment.Moment[], style?: React.CSSProperties }> {
    render(): React.ReactNode {
        const { value = [] } = this.props
        return (
            <div style={this.props.style}>
                <span>{moment.isMoment(value[0]) && value[0].format('YYYY-MM-DD')}</span>
                <span style={{ color: '#9F603D', fontWeight: 600 }} > - </span>
                <span>{moment.isMoment(value[1]) && value[0].format('YYYY-MM-DD')}</span>
            </div>
        )
    }
}

class MyNY extends React.Component<{ value?: 'Y' | 'N', style?: React.CSSProperties }> {
    render(): React.ReactNode {
        return (
            <div style={this.props.style}>
                {
                    this.props.value === 'Y' ? '是' : '否'
                }
            </div>
        )
    }
}