import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, Select, DatePicker, AutoComplete, Col, Button, Row } from 'antd';

import { MinusCircleOutlined, PlusOutlined, PlusCircleOutlined } from '@ant-design/icons';
const Search = Input.Search
const { TextArea } = Input;
import moment from 'moment';

const EditGuanlang = (props) => {
    const { visible, onCancel, editData, handleSaveScore, readOnly, companys, searchCompany, applyState } = props;
    const [form] = Form.useForm();
    const [replyFiles, setReplyFiles] = useState([]);
    const [companyOpts, setCompanyOpts] = useState([]);
    const [stationItem, setStationItem] = useState(null);
    const [deviceList, setDeviceList] = useState([]);

    useEffect(() => {
        if (!visible) {
            form.resetFields()
        }
    }, [visible])

    useEffect(() => {
        if (editData) {
            let revertData = Object.assign({}, editData);
            Object.keys(editData).forEach(key => {
                if (key == 'accidentTime') {
                    revertData[key] = editData[key] && moment(editData[key]);
                }
                if (key == 'images') {
                    // const list = (editData[key] || '').split(',') || []
                    if (editData[key]) {

                        revertData[key] = JSON.parse(editData[key]);
                    }
                }
            });
            form.setFieldsValue({ ...revertData });
        }
    }, [editData])

    useEffect(() => {
        if (companys && companys.length) {
            let list = [];
            companys.forEach(item => {
                list.push({ label: item.company, value: item.company })
            })
            setCompanyOpts(list);
        }
    }, [companys])

    useEffect(() => {
        if (editData && companys && companys.length) {
            handleSelectCompany(null, { value: editData.companyName })
            let list = ((editData || {}).accidentStations || []).map(item => item.stationId)
            form.setFieldsValue({ stations: list })
        }
    }, [companys, editData])


    const handleSave = () => {
        const data = form.getFieldsValue(true);
        console.log(data, 'data')
        handleSaveScore();
    }

    const onFileUploaded = (fileList) => {
        setReplyFiles(fileList);
    }

    const handleSelectCompany = (v, opt) => {
        const { value } = opt;
        const target = companys.filter(c => c.company == value);
        setDeviceList(target[0]?.deviceInfos || []);

    }
    const data1 = [
        { label: '2021年12月', value: '2021年12月' },
        { label: '2021年11月', value: '2021年11月' },
        { label: '2021年10月', value: '2021年10月' },
        { label: '2021年9月', value: '2021年9月' },
        { label: '2021年8月', value: '2021年8月' },
        { label: '2021年7月', value: '2021年7月' },
        { label: '2021年6月', value: '2021年6月' },
        { label: '2021年5月', value: '2021年5月' },
        { label: '2021年4月', value: '2021年4月' },
        { label: '2021年3月', value: '2021年3月' },
        { label: '2021年2月', value: '2021年2月' },
        { label: '2021年1月', value: '2021年1月' }]

    const data2 = [
        { label: '噪声传感器', value: '噪声传感器' },
        { label: '导轮式固定测斜仪', value: '导轮式固定测斜仪' },
        { label: '闭合式磁通量传感器', value: '闭合式磁通量传感器' },
        { label: '扬尘监测系统', value: '扬尘监测系统' },
        { label: '空气质量监测系统', value: '空气质量监测系统' },
        { label: '车辆动态称重系统', value: '车辆动态称重系统' },
        { label: '多通道振动采集仪', value: '多通道振动采集仪' },
        { label: '应急照明控制器', value: '应急照明控制器' },
        { label: '钢筋计', value: '钢筋计' },
        { label: '噪声传感器', value: '噪声传感器' },
        { label: '风速风向仪', value: '风速风向仪' },
        { label: '静力水准仪', value: '静力水准仪' },
        { label: '表面式应变计', value: '表面式应变计' },
        { label: '光纤光栅锚索计', value: '光纤光栅锚索计' },
        { label: '加速度计', value: '加速度计' },
        { label: '闭合式磁通量传感器', value: '闭合式磁通量传感器' },
        { label: '开环式磁通量传感器', value: '开环式磁通量传感器' },
        { label: '压差式变形测量传感器', value: '压差式变形测量传感器' },
        { label: '多通道振动采集仪', value: '多通道振动采集仪' },
        { label: '压电式传感器', value: '压电式传感器' },
        { label: '钢筋计', value: '钢筋计' },
        { label: '盒式固定测斜仪', value: '盒式固定测斜仪' },
        { label: '拉线位移传感器', value: '拉线位移传感器' },
        { label: '表面式应变计', value: '表面式应变计' },
        { label: '芯型土压力计', value: '芯型土压力计' },
        { label: '芯型锚索计', value: '芯型锚索计' },
        { label: '收敛仪', value: '收敛仪' },
        { label: '激光测距仪 ', value: '激光测距仪 ' },
        { label: '磁电式传感器', value: '磁电式传感器' },
        { label: '压电式传感器', value: '压电式传感器' },
        { label: '锚索计', value: '锚索计' },
        { label: '静力水准仪 ', value: '静力水准仪 ' },
        { label: '移动测斜仪 ', value: '移动测斜仪 ' }
    ]
    return (
        <Modal
            title="数据汇集"
            visible={visible}
            destroyOnClose
            width={600}
            // onOk={handleSave}
            onCancel={onCancel}
            footer={null}
        >
            <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} onFinish={handleSave}>


                <Row>
                    <Col span={20}>
                        <Form.Item
                            label={'历史数据'}
                            name={'startposition'}>
                            <Select options={data1} defaultValue="2021年12月" mode="multiple"></Select>
                        </Form.Item>
                    </Col>

                </Row>
                <Row>

                    <Col span={20}>
                        <Form.Item
                            label={'传感器设备'}
                            name={'endposition'}>
                            <Select options={data2} defaultValue="噪声传感器" mode="multiple"></Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                    <Col span={24} style={{ display: 'flex', justifyContent: 'space-around' }}>
                        <Button htmlType="submit" onClick={() => {
                            onCancel()
                        }}>
                            取消
                        </Button>
                        <Button type="primary" onClick={() => {
                            onCancel()
                        }}>
                            确定
                        </Button>
                    </Col>
                </Form.Item>
            </Form>
            *汇集历史数据，接入物联网监测数据，实现大数据的接入解算。
        </Modal >
    )
}


export default EditGuanlang;