import React, { useState, useEffect } from 'react';
import { Col, Row, Form, Select, Input, Modal, Button, Table, Popconfirm } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import useFormTable from '@/useHooks/useFormTable';
import { dispatchHandle } from '@/utils/publicHandle';
import useUpdateEffect from '@/useHooks/useUpdateEffect';
import { connect } from 'umi';

const { Search } = Input;
const { Option } = Select;

// 新增计划节点的弹框
const PlanStandModal = props => {
    const [form] = Form.useForm();
    const [selectIds, setSelectIds] = useState([]);
    const [selectRow, setSelectRow] = useState([]);
    const [loading, setLoading] = useState(false);

    const {
        dispatch,
        addVisible,
        idItem,
        modalType,
        code,
        opsDevice: { deviceList },
        opsInspection: {
            inspectionTermDetails,
            inspectionDetails,
            inspectionCode
        }
    } = props;
    console.log(props)
    const handleSubmit = () => {
        setLoading(true)
        console.log(modalType, `qqqqq`, inspectionDetails.id, `2222`)
        dispatchHandle(
            dispatch,
            'opsInspection/operation_service_m_inspection_plan_node_addEdit_patch',
            {
                inspectionPlanNumber: code,
                mpList: selectRow
            },
            () => {
                setLoading(false)
                props.handleClose();
                props?.getPlanNode(code)
            }
        )

    };
    const getListItems = (payload = {}) => {
        dispatchHandle(dispatch, 'opsInspection/operation_service_m_inspection_standard_pageList_post', payload)
    }
    const { tableProps, search } = useFormTable(getListItems, {
        form,
    });

    // //表格删除
    // const itemDelete = id => {
    //     dispatchHandle(dispatch, 'opsInspection/operation_service_m_standard_equipment_relation_delete_id_delete', { id: id }, () => {
    //         search.refresh();
    //     });
    // };

    const formTailLayout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 14 },
    };
    const formTailLayout2 = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };

    const handleClose = () => {
        props.handleClose();
    };

    useEffect(() => {
        setSelectIds([])
    }, [addVisible]);//关闭弹窗时，清空已选项

    const rowSelection = {
        selectedRowKeys: selectIds,
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(selectedRows)
            const arr = [];
            setSelectIds(selectedRowKeys)
            selectedRows.map(item => {
                arr.push({
                    nodeNumber: item?.code,
                    belongingsCode: item?.belongingsCode,
                    nodeName: item?.name,
                    nodeType: item?.typeName,
                    belongingSystem: item?.systemName,
                    buildingName: item?.buildingName,
                    model: item?.modelSpecification,
                    activeCustomersName: item?.activeCustomers?.name
                })
            })
            setSelectRow(arr);
        },
    };

    const hasSelected = selectIds.length > 0;

    console.log(`selectIds6666 is`, selectIds)

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (text, record, index) => <>{index + 1}</>
        },
        {
            title: '设备编号', dataIndex: 'code', key: 'code'
        },
        {
            title: '财产编码', dataIndex: 'belongingsCode', key: 'belongingsCode'
        },
        {
            title: '设备名称', dataIndex: 'name', key: 'name'
        },
        { title: '类型', dataIndex: 'typeName', key: 'typeName' },
        { title: '设备系统', dataIndex: 'systemName', key: 'systemName' },
        { title: '建筑', dataIndex: 'buildingName', key: 'buildingName' },
        { title: '型号规格', dataIndex: 'modelSpecification', key: 'modelSpecification' },
        { title: '在用客户', dataIndex: ['activeCustomers', 'name'] }
    ];

    return (
        <div>
            <Modal
                width='80%'
                getContainer={false}
                confirmLoading={loading}
                visible={addVisible}
                onCancel={handleClose}
                onOk={handleSubmit}
                // closable={false}
                title='选择设备'
            >
                <Form form={form} onValuesChange={search.submit}>
                    <Row>
                        <Col span={4}>
                            <Form.Item name='systemName' label='设备系统' {...formTailLayout2}>
                                <Select style={{ width: '100%' }} placeholder='请选择' >
                                    <Option value={1}>1</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Form.Item name='typeName' label='类型' {...formTailLayout2} >
                                <Select style={{ width: '100%' }} placeholder='请选择' >
                                    <Option value={1}>1</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Form.Item name='supplierId' label='供应商' {...formTailLayout2} >
                                <Select style={{ width: '100%' }} placeholder='请选择' >
                                    <Option value={1}>1</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={4}>
                            <Form.Item name='activeCustomersId' label='在用客户' {...formTailLayout2} >
                                <Select style={{ width: '100%' }} placeholder='请选择' >
                                    <Option value={1}>1</Option>
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <Form.Item name='name' label='查询' {...formTailLayout2} style={{ textAlign: 'right' }}>
                                <Search />
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <Table
                    bordered
                    rowSelection={rowSelection}
                    columns={columns}
                    dataSource={deviceList.list}
                    rowKey={record => record.id}
                    pagination={deviceList.pagination}
                    {...tableProps}
                    scroll={{ x: '130%' }}
                    footer={() => {
                        return (
                            <div
                                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                            >
                                <div className="spaceLeft">
                                    <span style={{ fontSize: 14 }}>
                                        已选数量<span style={{ margin: '0 10px', color: '#5ca6f3' }}>{selectIds.length || 0}</span>
                                    </span>
                                    {/* <span style={{ marginLeft: 60 }}>总价格：3000000</span> */}
                                </div>
                            </div>
                        );
                    }}
                />
            </Modal>
        </div>
    )
}

export default connect(({ opsInspection, opsDevice, loading }) => ({
    opsInspection, opsDevice,
    loading: loading.models.opsInspection
}))(PlanStandModal);