import React, { useEffect } 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]);

    const goodsList = controller.useMemo(s => s.goodsListState.goodsList, []);
    const indexRef = React.useRef<any>([]);
    useEffect(() => {
        const dd = goodsList?.reduce((acc: any, cur: any) => {
            if (cur.lineAttribute !== 1) {
                acc.push(cur.$index)
            }
            return acc
        }, [])
        indexRef.current = dd;
    }, [goodsList, indexRef])
    // 注册 form

    controller.useForm('realEstateSales', form);
    const getList = () => {
        const decrease = indexRef.current.length > goodsList.length
        if (decrease) {
            //已删行列表
            const diff = indexRef.current.filter((item: any) => !goodsList.find(i => i.$index === item));

            const formData: any[] = form.getFieldValue('realEstateDataDto');
            if (Array.isArray(formData) && diff.length > 0) {

                const newForm = formData?.filter(item => !diff.find((i: any) => i === item.$index));

                form.setFieldsValue({
                    realEstateDataDto: newForm
                });
            } else {
                form.setFieldsValue({
                    realEstateDataDto: undefined
                });
            }
        }
        return goodsList.filter(item=>item.lineAttribute !== 1).map((item, index) => {
            if (item.lineAttribute !== 1) {
                return <Row gutter={[17, 0]} >
                    <Col span={6} >
                        <Form.Item label='不动产单元代码' >
                            {getFieldDecorator(`realEstateDataDto[${index}].unitCode`, {
                                rules: readOnly ? [] : []
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={6} >
                        <Form.Item label='网签合同备案编号' >
                            {getFieldDecorator(`realEstateDataDto[${index}].contractNumber`, {
                                rules: readOnly ? [] : []
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={6} >
                        <Form.Item style={{ display: 'none' }}>
                            {getFieldDecorator(`realEstateDataDto[${index}].$index`, {
                                initialValue: item.$index,
                            })(
                                <Input />
                            )}
                        </Form.Item>
                        {/* <Col span={6} >
                            <Form.Item label='不动产单元代码/网签合同备案编号' >
                                {getFieldDecorator(`realEstateDataDto[${index}].type`, {
                                    rules: readOnly ? [] : []
                                })(
                                    readOnly
                                        ? <MyNY />
                                        : <Select placeholder='请选择' style={{ width: '100%' }} >
                                            <Select.Option value='unitCode'>不动产单元代码</Select.Option>
                                            <Select.Option value='contractNumber'>网签合同备案编号</Select.Option>
                                        </Select>
                                )}
                            </Form.Item>
                        </Col> */}

                        <Form.Item label='不动产地址'>
                            {getFieldDecorator(`realEstateDataDto[${index}].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(`realEstateDataDto[${index}].realEstateDetailedAddress`, {
                                rules: readOnly ? [] : [
                                    { required: true, message: '请输入详细地址' },
                                    { max: 60, message: '详细地址最多60个字符' },
                                    {
                                        validator: async (_, value, callback) => {
                                            const pattern = /街|路|村|乡|镇|道|巷|号/;
                                            if (pattern.test(value)) {
                                                callback()
                                            } else {
                                                callback('地址必须包含“街”、“路”、“村”、“乡”、“镇”、“道”、“巷”、“号”等任意一个关键词')
                                            }
                                        }
                                    }
                                ]
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' placeholder="请输入详细地址" />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={6} >
                        <Form.Item label='跨地（市）标志' >
                            {getFieldDecorator(`realEstateDataDto[${index}].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(`realEstateDataDto[${index}].landTaxProjNo`, {
                                rules: readOnly ? [] : []
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={6} >
                        <Form.Item label='核定计税价格' >
                            {getFieldDecorator(`realEstateDataDto[${index}].approvedTaxableAmount`, {
                                rules: readOnly ? [] : []
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' type="number" />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={6} >
                        <Form.Item label='实际成交含税金额' >
                            {getFieldDecorator(`realEstateDataDto[${index}].tradedIncludeAmount`, {
                                rules: readOnly ? [] : []
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' type="number" />
                            )}
                        </Form.Item>
                    </Col>

                    <Col span={6} >
                        <Form.Item label='房屋产权证书/不动产权证号' >
                            {getFieldDecorator(`realEstateDataDto[${index}].realEstateNumber`, {
                                rules: readOnly ? [] : [

                                    { max: 40, message: '证书编号最多40个字符' },
                                ]
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={6} >
                        <Form.Item label='面积单位' >
                            {getFieldDecorator(`realEstateDataDto[${index}].unit`, {
                                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="h㎡">h㎡</Select.Option>
                                        <Select.Option value="k㎡">k㎡</Select.Option>
                                        <Select.Option value="㎡">㎡</Select.Option>
                                    </Select>
                            )}
                        </Form.Item>
                    </Col>
                </Row>
            }
        })
    }
    return (
        <div className="kts-invoice-operate-real-estate-info-digtal">
            <div className='real-estate-info-digtal-label' >特定信息-不动产销售</div>
            {getList()}

        </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>
        )
    }
}