import React, { useState } from 'react'
import SelectDevices from '../../../businessComponents/SelectDevices';
import { Button, Modal, Form } from 'antd'

import './index.less'


const SelectDevice = () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false)

  const selectedKeys = []


  const openModal = () => {
    setVisible(true)
  }

  const onCancel = () => {
    setVisible(false)
  }

  const onSubmit = () => {
    form.validateFields().then(values => {
      console.log(values)
    })
  }

  return (
    <>
      <Button onClick={openModal}>弹窗</Button>
      <Modal visible={visible} onCancel={onCancel} onOk={onSubmit} width={1000}>
        <Form initialValues={{
          resourceIds: selectedKeys
        }} form={form} >
          <Form.Item label="设备选择" name="resourceIds" rules={[{ required: true, message: '请勾选摄像机' }]}>
            <SelectPoints />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

const SelectPoints = ({ value, onChange }) => {

  const orgTreeData = [{
    "id": "100101000000",
    "organizationName": "平台组织机构",
    "parentId": "0",
    "name": "平台组织机构",
    "deviceCount": {
      "onlineCount": 0,
      "count": 0
    }
  }]

  const placeTreeData = []

  return (
    <div style={{ height: 400 }} className="select-modal">
      <SelectDevices
        treeMode={true}
        selectDevices={value}
        placeTreeData={placeTreeData}
        orgTreeData={orgTreeData}
        onChange={onChange}
      />
    </div>
  )
}

export default SelectDevice