import React, { useState } from 'react'
import { Modal, Button,Form,Row,Col,Divider,Spin } from '@douyinfe/semi-ui';
import { IconTickCircle } from '@douyinfe/semi-icons';
function nvrModal(props){
  const [visible, setVisible] = useState(false);//是否显示弹框
  const [isloading,setloading] = useState(false);//是否显示loading
  const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
  const [step,setstep] = useState(0)
  function showDialog() {//打开弹框
    setVisible(true);
  }
  function handleOk() {//点击弹框确定
    // setVisible(false);
    setloading(true);
    setTimeout(() => {
      setloadingTip('...接受成功')
      setTimeout(()=>{
        setloadingTip('已完成')
        setTimeout(() => {
          setstep(1);
          setloading(false);
        }, 2000);
      },2000)
    }, 2000);
  }
  function handleAfterClose(){//在关闭之后
    console.log('after');
  }
  function handleCancel() {//点击弹框取消
    setVisible(false);
  }
  return (
    <>
        <div onClick={showDialog}>{props.modalName}</div>
        <Modal
            title="添加NVR"
            okText="测试校验"
            // cancelText 取消按钮
            visible={visible}
            onOk={handleOk}
            height={386}
            width={607}
            afterClose={handleAfterClose} //>=1.16.0
            onCancel={handleCancel}
        >
          <Spin tip={loadingTip} spinning={isloading}>
            {step==0?<div style={{paddingLeft:16+'px'}}>
              <Form 
                labelPosition='left'
                labelAlign='left'
                labelWidth= '90px'
                onValueChange={values=>console.log(values)}>
                <Row>
                  <Col span={12}>
                    <Form.Input field='UserName' label='设备编号:' placeholder='请输入设备编号' style={{ width:149 }}
                    rules={[
                      { required: true, message: '请输入设备编号' }
                    ]}/>
                  </Col>
                  <Col span={12}>
                    <Form.Input field='Use11rName' label='行政区区码:' placeholder='请输入行政区区码' style={{ width:149 }}/>
                  </Col>
                  <Col span={24}>
                    <Form.Input field='Use11rName11' label='设备名称:' placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
                    rules={[
                      { required: true, message: '请输入设备名称、常用项目或位置定义' }
                    ]}/>
                  </Col>
                  <Col span={24}>
                    <Form.Select label="设备厂家:" field='business2' placeholder='请选择设备厂家' style={{ width: 421+'px' }}>
                      <Form.Select.Option value="abc">Semi</Form.Select.Option>
                      <Form.Select.Option value="ulikeCam">轻颜相机</Form.Select.Option>
                      <Form.Select.Option value="toutiao">今日头条</Form.Select.Option>
                  </Form.Select>
                  </Col>
                  <Col span={24} style={{display:'flex',alignItems:'center'}}>
                    <Form.Input field='Use11rName131' label='安装位置:' placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
                    rules={[
                      { required: true, message: '请输入或拾取高德经纬度坐标' }
                    ]}/>
                    <div style={{
                      width:32,
                      height:32,
                      background:"#1859C1",
                      marginLeft:4+'px',
                      display:'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                      cursor: "pointer",
                      borderRadius: 3+'px'}}>
                      <img src="../../../assets/images/background/location.png" width={16} height={20}/>
                    </div>
                  </Col>
                </Row>
              </Form>
            </div>:
            <div >
              <div style={{marginTop:50,display: 'flex', justifyContent: 'center'}}>
                <IconTickCircle style={{color:'#04B234',fontSize:60}}/>
              </div>
              <div style={{marginTop:20,display: 'flex', justifyContent: 'center'}}>
                已完成NVR设备测试和校验，是否确认添加？
              </div>
            </div>
            }
          </Spin>
        </Modal>
    </>
  );
}

export default nvrModal