import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
import { Button, Table, Modal, Descriptions, Select, Form, Input } from 'antd';
import SelectDevice from './selectDevice';

const EventStatus = (props) => {

    const { device, onChange } = props;
    const [visible, setVisible] = useState(false);
    const [curDevice, setCurDevice] = useState(device);

    console.log('getFieldsValue device ---- ', device)

    const handleChange = useCallback((data) => {

        let mDevice = [], tempDevice = data;
        for (let item in tempDevice) {
            const meter = tempDevice[item];
            meter.attr = meter.attr?.map(ele => {

                console.log('ele-----', ele)
                
                // ele.forEach(element => {
                    ele.metaData?.realTimeEvent?.modelEventExtends?.forEach((object, i) => {

                        // if (record.key === ele.id) {
                            object['code'] = i
                        // }

                    });
                // });

                const attr = {
                    ...ele,
                    id: ele.id,
                    meterName: ele.meterName || meter?.meter?.device?.name || '',
                }
                return attr;
            })
        }


        // console.log('handleChange tempDevice ====== ', tempDevice)
        setCurDevice(tempDevice);
        onChange(tempDevice);





    }, []);

    const handleClose = useCallback(() => {
        setVisible(false);
    }, []);

    const handleChangeTableCol = useCallback((key, record, value) => {
        const tempDevice = { ...curDevice };

        console.log('tempDevice record ==== ', record);


        for (let item in tempDevice) {
            const meter = tempDevice[item];
            // 处理事件bit位
            meter.attr?.forEach(element => {
                if (element.id === record.id) {

                    console.log('tempDevice element.id ==== ', element);


                    element.metaData?.realTimeEvent?.modelEventExtends?.forEach((ele, i) => {

                        console.log('tempDevice ele.id ==== ', ele, element.key);

                        if (record.key === ele.id) {
                            ele[key] = value
                        }
                    });
                }
            });
        }

        // tempDevice[record.meterId].attr[index][key] = value;
        console.log('tempDevice ==== ', tempDevice);
        setCurDevice(tempDevice);
        onChange(tempDevice);
    }, [curDevice]);

    const randomColor = useCallback(() => {
        return `#${Math.round(Math.random() * 255).toString(16)}${Math.round(Math.random() * 255).toString(16)}${Math.round(Math.random() * 255).toString(16)}`
    }, []);

    const columns = [
        // { title: '设备', dataIndex: 'meterName' },
        { title: '事件名', dataIndex: 'name' },
        { title: '事件', dataIndex: 'value' },
        { title: '绑定', dataIndex: 'code', render: (value, record) => <input style={{ width: 30 }} defaultValue={value} onChange={(e) => handleChangeTableCol('code', record, e.target.value)} /> },
    ]

    const selectedMeter = useMemo(() => {

        console.log('device =====', device)

        let mDevice = [], tempDevice = { ...device };
        for (let item in tempDevice) {
            const meter = tempDevice[item];
            // 处理事件bit位
            meter.attr?.forEach(element => {
                element.metaData?.realTimeEvent?.modelEventExtends?.forEach((ele, i) => {
                    mDevice.push({...element, key: ele.id, value: ele.value, code: ele.code || i});
                });
            });
        }
        console.log('mDevice =====', mDevice)

        return mDevice;
    }, [device])

    // useEffect(() => {
    //   console.log('==== useEffect onChange ======')
    // }, [curDevice]);

    // useEffect(() => {
    //     console.log('==== useEffect onChange device ======')
    //   }, [device]);


    return (
        <>
            <Table style={{ marginBottom: 20 }} rowKey={res => res.code} size='small' dataSource={props.eventList || []} columns={[
                { title: '状态', dataIndex: 'url', render: val => <img src={val} style={{ maxWidth: 50, maxHeight: 50 }} /> },
                { title: '绑定值', dataIndex: 'code' }
            ]} pagination={false} />

            <Button size='small' onClick={() => setVisible(true)}>选择...</Button>
            {
                selectedMeter && selectedMeter.length > 0  && <div style={{ padding: '15px 0 10px 0' }}>设备：{selectedMeter[0].meterName}</div>
            }
            
            <Table style={{ marginBottom: 20 }} size='small' dataSource={selectedMeter || []} columns={columns} pagination={false} />
            <SelectDevice visible={visible} onChange={handleChange} onClose={handleClose} multiple={false} />
        </>
    )
}

export default memo(EventStatus);