
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, DatePicker, Input, Row, Select } from "kts-components-antd-x4";
import moment from "moment";

const { RangePicker } = DatePicker;

export interface RealEstateInfoProps {
    /**
     * 不动产地址数据
     */
    realEstateAddressOptions?: any[];

    /**
     * 不动产地址数据字段名
     */
    realEstateAddressFieldNames?: 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('realEstateInfo', 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('realEstateAddress', {
                            rules: readOnly ? [] : [{ required: true, message: '请选择不动产地址' }]
                        })(
                            readOnly
                                ? (<MyArrString />)
                                : (
                                    <Cascader
                                        style={{ width: '100%' }}
                                        options={props.realEstateAddressOptions}
                                        fieldNames={props.realEstateAddressFieldNames}
                                        placeholder="请选择省市区县"
                                    />
                                )
                        )}
                    </Form.Item>
                </Col>
                <Col span={6} >
                    <Form.Item label='详细地址' >
                        {getFieldDecorator('realEstateDetailedAddress', {
                            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('leaseTerm', {
                            rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
                        })(
                            readOnly
                                ? <MyArrMoment />
                                : <RangePicker style={{ width: '100%' }} />
                        )}
                    </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('realEstateNumber', {
                            rules: readOnly ? [] : [
                                { required: true, message: '请输入证书编号，若没有证书填写“无”' },
                                { max: 40, message: '证书编号最多40个字符' },
                            ]
                        })(
                            readOnly
                                ? <MyDiv />
                                : <Input autoComplete='off' placeholder="请输入证书编号，若没有证书填写“无”" />
                        )}
                    </Form.Item>
                </Col>
                <Col span={6} >
                    <Form.Item label='面积单位' >
                        {getFieldDecorator('realEstateUnit', {
                            rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
                        })(
                            readOnly
                                ? <MyDiv />
                                : <Select placeholder='请选择' style={{ width: '100%' }} >
                                    <Select.Option value="平方千米">平方千米</Select.Option>
                                    <Select.Option value="平方米">平方米</Select.Option>
                                    <Select.Option value="公顷">公顷</Select.Option>
                                    <Select.Option value="亩">亩</Select.Option>
                                    <Select.Option value="Hm2">
                                        <span>
                                            <span>Hm</span>
                                            <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
                                        </span>
                                    </Select.Option>
                                    <Select.Option value="Km2">
                                        <span>
                                            <span>Km</span>
                                            <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
                                        </span>
                                    </Select.Option>
                                    <Select.Option value="m2">
                                        <span>
                                            <span>m</span>
                                            <span style={{ verticalAlign: 'super', fontSize: 'smaller' }} >2</span>
                                        </span>
                                    </Select.Option>
                                </Select>
                        )}
                    </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 {
        return (
            <div style={this.props.style}>
                {
                    this.props.value?.map(e => moment.isMoment(e) && e.format('YYYY-MM-DD'))
                        .filter(e => !!e)
                        .join(' - ')
                }
            </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>
        )
    }
}

