import React, { useEffect } from "react";
import { decorator } from 'grey-react-box';
import { Form, message } from 'kts-components-antd-x3';
import { FormComponentProps } from 'kts-components-antd-x3/lib/form';
import Invoice from '../../..';
import './index.less';
import { Button, 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 editGood = controller.useMemo(s => s.goodsListState.editGood, []);
    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, []);
    //outcome-104 任务 https://wiki.dev.kingxunlian.com/pages/viewpage.action?pageId=180355189
    //商品和服务税收分类合并编码为“3040502020200000000”时，视为停车费业务，针对停车费业务，蓝字发票增加以下判断：
    // 单位必须为“平方米”；
    // 项目名称必须为“车辆停放服务”；
    // 车牌号必填，最多支持填写3个车牌号；除该场景车牌号必须为空；
    // 租赁期起止格式必须为“yyyy-MM-dd HH:mm（租赁期起）”+“空格”+“yyyy-MM-dd HH:mm（租赁期止）。
    const isParkFee = React.useCallback((taxClassificationCode?: string) => {
        if (taxClassificationCode === '3040502020200000000') {
            return true
        } else {
            return false;
        }
    }, [])

    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('realEstateInfo', 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) {
                const isParkFeeItem = editGood?.$index === item.$index ? isParkFee(editGood.taxClassificationCode) : isParkFee(item.taxClassificationCode)
                return <Row gutter={[17, 0]} >
                    <Col span={6} >
                        <Form.Item style={{ display: 'none' }}>
                            {getFieldDecorator(`realEstateDataDto[${index}].$index`, {
                                initialValue: item.$index,
                            })(
                                <Input />
                            )}
                        </Form.Item>
                        <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: 120, message: '详细地址最多120个字符' },
                                    {
                                        validator: async (_, value, callback) => {
                                            const pattern = /街|路|村|乡|镇|道|巷|号/;
                                            if (pattern.test(value)) {
                                                callback()
                                            } else {
                                                callback('地址必须包含“街”、“路”、“村”、“乡”、“镇”、“道”、“巷”、“号”等任意一个关键词')
                                            }
                                        }
                                    }
                                ]
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' placeholder="请输入详细地址" />
                            )}
                        </Form.Item>
                    </Col>
                    {!isParkFeeItem &&
                        <Col span={6} >
                            <Form.Item label='租赁期起止' >
                                {getFieldDecorator(`realEstateDataDto[${index}].leaseTerm`, {
                                    rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
                                })(
                                    readOnly
                                        ? <MyArrMoment />
                                        : <RangePicker style={{ width: '100%' }} />
                                )}
                            </Form.Item>
                        </Col>}
                    {isParkFeeItem &&
                        <Col span={6} >
                            <Form.Item label='租赁期起止' >
                                {getFieldDecorator(`realEstateDataDto[${index}].leaseTerm`, {
                                    rules: readOnly ? [] : [{ required: true, message: '请输入租赁期' }]
                                })(
                                    readOnly
                                        ? <MyArrMomentTime />
                                        : <RangePicker style={{ width: '100%' }} showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" />
                                )}
                            </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}].realEstateNumber`, {
                                rules: readOnly ? [] : [
                                    { required: true, message: '请输入证书编号，若没有证书填写“无”' },
                                    { max: 40, message: '证书编号最多40个字符' },
                                ]
                            })(
                                readOnly
                                    ? <MyDiv />
                                    : <Input autoComplete='off' placeholder="请输入证书编号，若没有证书填写“无”" />
                            )}
                        </Form.Item>
                    </Col>
                    {!isParkFeeItem &&
                        <Col span={6} >
                            <Form.Item label='面积单位' >
                                {getFieldDecorator(`realEstateDataDto[${index}].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="h㎡">h㎡</Select.Option>
                                            <Select.Option value="k㎡">k㎡</Select.Option>
                                            <Select.Option value="㎡">㎡</Select.Option>
                                        </Select>
                                )}
                            </Form.Item>
                        </Col>
                    }
                    {isParkFeeItem &&
                        <Col span={6} >
                            <Form.Item label='面积单位' >
                                {getFieldDecorator(`realEstateDataDto[${index}].realEstateUnit`, {
                                    rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
                                })(
                                    readOnly
                                        ? <MyDiv />
                                        : <Select placeholder='请选择' style={{ width: '100%' }} >
                                            <Select.Option value="平方米">平方米</Select.Option>
                                        </Select>
                                )}
                            </Form.Item>
                        </Col>
                    }
                    {isParkFeeItem &&
                        <LicensePlateNumber form={form} index={index} cd={item.cd} readOnly={readOnly} />
                        // <Col span={6} >
                        //     <Form.Item label='车牌号' >
                        //         {getFieldDecorator(`realEstateDataDto[${index}].licensePlateNumber`, {
                        //             rules: readOnly ? [] : [{ required: true, message: '请选择面积单位' }]
                        //         })(
                        //             readOnly
                        //                 ? <MyDiv />
                        //                 : <LicensePlateNumber form={form}/>
                        //         )}
                        //     </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[1].format('YYYY-MM-DD')}</span>
            </div>
        )
    }
}
class MyArrMomentTime 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 HH:mm')}</span>
                <span style={{ color: '#9F603D', fontWeight: 600 }} > - </span>
                <span>{moment.isMoment(value[1]) && value[1].format('YYYY-MM-DD HH:mm')}</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>
        )
    }
}
interface PriceInputProps {
    // value?: string[];
    // style?: React.CSSProperties
    // onChange?: (value: string[]) => void;
    form: any,
    index: number
    cd?: number
    readOnly: boolean
}
const LicensePlateNumber: React.FC<PriceInputProps> = (props) => {

    const { form, readOnly } = props;

    const { getFieldDecorator } = form;
    const licenceLimit = 3; // 最多支持填写3个车牌号
    const formData: any[] = form.getFieldValue('realEstateDataDto');
    const [value, setVal] = React.useState(new Array(props.cd || 1).fill(''));
    const cd = React.useMemo(() => formData[props.index]?.cd, [formData[props.index]?.cd])
    // useEffect(() => {
    //     if (cd) {
    //         const dd = value.concat(new Array(cd.length-1).fill(''))
    //         setVal(dd);
    //     }
    // }, [cd])
    const onAdd = () => {
        if (value.length < licenceLimit) {
            setVal([...value, '']);
        } else {
            message.warn('最多支持填写3个车牌号')
        }
    }
    // 删除车牌号
    const onDelete = () => {
        if (value.length > 0) {
            const dd = value.slice(0, -1)
            setVal(dd);
        }
    }

    return <>
        {
            value.length > 0 && value.map((item: string[], key: number) => {

                return <Col span={6} ><Form.Item label='车牌号' key={key}>
                    {getFieldDecorator(`realEstateDataDto[${props.index}].cphList[${key}]`, {
                        rules: readOnly ? [] : [{ required: true, message: '请输入车牌号,最多20位' }]
                    })(
                        readOnly
                            ? <MyDiv /> :
                            <Input style={{ width: '100%' }} maxLength={20} autoComplete='off' placeholder="请输入车牌号" />
                    )}
                </Form.Item>
                </Col>
            })


        }
        {/* <Col span={6} style={{ display: 'none' }}><Form.Item label='长度' >
            {getFieldDecorator(`realEstateDataDto[${props.index}].cd`, {

            })(
                <Select />
            )}
        </Form.Item>
        </Col> */}
        {!readOnly &&
            <Col span={6} >
                <Form.Item >
                    <div style={{ color: 'white' }}>1</div>
                    <a style={{ marginRight: 10 }} onClick={onAdd}>添加车牌号</a>
                    {value.length > 1 && <a onClick={onDelete}>删除</a>}
                </Form.Item>
            </Col>
        }
    </>
}


// const LicensePlateNumber: React.FC<PriceInputProps> = (props) => {

//     const { form } = props;

//     const { getFieldDecorator } = form;
//     const licenceLimit = 3; // 最多支持填写3个车牌号
//     // const { value = [] } = this.props;
//     const [value, setVal] = React.useState(props.value || ['']);
//     // const newArr = value.filter(e => !!e);
//     const newArrLength = value.length;
//     console.log(value, newArrLength)
//     // 新增车牌号
//     const onAdd = () => {
//         if (newArrLength < licenceLimit) {
//             setVal([...value, '']);
//             props.onChange?.([...value, ''])
//         }
//     }
//     // 删除车牌号
//     const onDelete = () => {
//         if (newArrLength > 0) {
//             const dd = value.slice(0, -1)
//             setVal(dd);
//             props.onChange?.(dd)
//         }
//     }
//     const onInputChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
//         console.log(e.target.value);
//         const dd = value.map((item, i) => {
//             if (i === index) {
//                 return e.target.value
//             }
//             return item
//         })
//         setVal(dd);
//         props.onChange?.(dd)


//     }
//     return (

//         <>
//             {newArrLength > 0 && value.map((item, index) => {
//                 return
//                 <Form.Item label='车牌号' >
//                     {getFieldDecorator(`realEstateDataDto[${index}].licensePlateNumber`, {
//                         rules: [{ required: true, }]
//                     })(
//                         <Input onChange={(e) => { onInputChange(e, index) }} key={index} style={{ width: '100%' }} autoComplete='off' placeholder="请输入车牌号" />
//                     )}
//                 </Form.Item>
//                 // <Col span={6} >
//                 //     <Input onChange={(e) => { onInputChange(e, index) }} key={index} style={{ width: '100%' }} autoComplete='off' placeholder="请输入车牌号" />
//                 // </Col>
//             })}

//             <Button type="link" onClick={onAdd}>添加车牌号</Button>
//             {newArrLength > 1 && <Button type="link" onClick={onDelete}>删除</Button>}
//         </>

//     )
// }