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 Invoice from '../../..';
import './index.less';
import { Cascader, Col, Input, Row, Select } from "kts-components-antd-x4";
import moment from "moment";


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

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

/** 特殊信息-建筑服务 */
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);

    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%' }} >
                                    <Select.Option value='Y'>是</Select.Option>
                                    <Select.Option value='N'>否</Select.Option>
                                </Select>
                        )}
                    </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>
        )
    }
}