import React, { useState ,useRef} from 'react'
import { connect } from "react-redux";
import { Modal,Form,Row,Col,Spin,Notification } from '@douyinfe/semi-ui';
import { IconTickCircle } from '@douyinfe/semi-icons';
function nvrModal(props){
  const {modalName}=props
  const { dispatch, actions, user, loading,vender,close } = props;
  const nvrData = props.nvrData||{}//修改时传来的值
  // console.log('nvrDatanvrDatanvrData',nvrData);
  const form = useRef();
  const [visible, setVisible] = useState(false);//是否显示弹框
  const [isloading,setloading] = useState(false);//是否显示loading
  const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
  const [step,setstep] = useState(0)//第几步
  const [okText,setokText] = useState('测试校验')//ok弹框text  右边
  const [cancelText,setcancelText] = useState('取消')//取消弹框text  左边
  const [formObj,setformObj] = useState()//接口入参
  const opts ={//添加完成确认后通知
    title:'Hi',
    content:'添加成功',
    duration:3
  }
  function showDialog() {//打开弹框
    setVisible(true);
  }
  function positionForm(val){
    let zz = /^(-?\d+)(\.\d+)?$/
    if(!val){
      return '请输入或拾取高德经纬度坐标'
    }
    else if(val.split(',').length!=2){
      return '请输入格式为116.354169,39.835452的经纬度坐标'
    }
    else if(!zz.test(val.split(',')[0])){
      return '只能填写数字'
    }
    else if(!zz.test(val.split(',')[1])){
      return '只能填写数字'
    }
    else{
      return ''
    }
  }
  function handleOk() {//点击弹框确定  右边按钮
    if(step==0){
      form.current.validate()
      .then(values=>{//表单校验成功
        let valuesObj=JSON.parse(JSON.stringify(values))
        valuesObj.longitude=values.position.split(',')[0]
        valuesObj.latitude=values.position.split(',')[1]
        delete valuesObj.position
        if(nvrData.id){
          valuesObj.id=nvrData.id
        }
        console.log('valuesObjvaluesObj',valuesObj);
        setformObj(valuesObj)
        setloading(true);
        setTimeout(() => {
          setloadingTip('...接受成功')
          setTimeout(()=>{
            setloadingTip('已完成')
            setTimeout(() => {
              setstep(1);
              setokText('确认');
              setcancelText('上一步');
              setloading(false);
            }, 2000);
          },2000)
        }, 2000);
      })
      .catch(errors=>{//表单校验失败
        console.log('errors',errors);
      })
      
    }
    else{
      dispatch(actions.equipmentWarehouse.addchangeNvr(formObj)).then(res => {
        Notification.success(opts)
        setVisible(false);
        close();
      })
    }
  }
  function handleAfterClose(){//在关闭之后
    setstep(0);
    setokText('测试校验');
    setcancelText('取消');
  }
  function handleCancel() {//点击弹框取消  左边按钮
    if(step==0){
      setVisible(false);
    }
    else{
      setstep(0);
      setokText('测试校验');
      setcancelText('取消');
    }
  }
  function handleLocation(){//高德经纬度
    window.open('https://lbs.amap.com/tools/picker','_blank')
  }
  return (
    <>
      <div onClick={showDialog}>{modalName=='add'?'添加NVR':'修改'}</div>
      <Modal
          title={modalName=='add'?'添加NVR':'修改NVR'}
          okText={okText}
          cancelText={cancelText} //取消按钮
          visible={visible}
          onOk={handleOk}
          width={607}
          afterClose={handleAfterClose}
          onCancel={handleCancel}
      >
        <Spin tip={loadingTip} spinning={isloading}>
          {step==0?<div style={{paddingLeft:16}}>
            <Form 
              allowEmpty
              labelPosition='left'
              labelAlign='left'
              labelWidth= '90px'
              onValueChange={values=>console.log(values)}
              getFormApi={formApi => form.current = formApi}>
              <Row>
                <Col span={12}>
                  <Form.Input maxLength='39' field='serialNo' label='设备编号:' initValue={nvrData.serialNo||''} placeholder='请输入设备编号' style={{ width:149 }}
                  rules={[
                    { required: true, message: '请输入设备编号' }
                  ]}/>
                </Col>
                <Col span={12}>
                  <Form.Input maxLength='15' field='regionCode' label='行政区区码:' initValue={nvrData.regionCode||''} placeholder='请输入行政区区码' style={{ width:149 }}/>
                </Col>
                <Col span={24}>
                  <Form.Input maxLength='36' field='name' label='设备名称:'  initValue={nvrData.name||''} placeholder='请输入设备名称、常用项目或位置定义' style={{ width:421 }}
                  rules={[
                    { required: true, message: '请输入设备名称、常用项目或位置定义' }
                  ]}/>
                </Col>
                <Col span={24}>
                  <Form.Select label="设备厂家:" field='venderId' initValue={nvrData.venderId||''} placeholder='请选择设备厂家' style={{ width: 421 }}>
                    {vender.map((item,index)=>(
                      <Form.Select.Option key={index} value={item.id}>{item.name}</Form.Select.Option>
                    ))}
                  </Form.Select>
                </Col>
                <Col span={24} style={{display:'flex'}}>
                  <Form.Input maxLength='39' field='position' label='安装位置:' initValue={nvrData.longitude&&nvrData.latitude?nvrData.longitude+','+nvrData.latitude:''} placeholder='请输入或拾取高德经纬度坐标' style={{ width:386 }}
                  validate={positionForm}
                    rules={[
                    { required: true, message: '请输入或拾取高德经纬度坐标' }
                  ]}/>
                  <div style={{
                    width:32,
                    height:32,
                    background:"#1859C1",
                    marginLeft:4,
                    display:'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    cursor: "pointer",
                    marginTop:12,
                    borderRadius: 3+'px'}}
                    onClick={handleLocation}>
                    <img src="../../../assets/images/background/location.png" width={16} height={20}/>
                  </div>
                </Col>
              </Row>
            </Form>
          </div>
          ://下一步
          <div style={{height:224}}>
            <div style={{paddingTop: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>
    </>
  );
}

function mapStateToProps(state) {
  const { auth, global, members,vender } = state;
  return {
    loading: members.isRequesting,
    user: auth.user,
    actions: global.actions,
    members: members.data,
    vender:vender.data||[],//设备厂家
  };
}

export default connect(mapStateToProps)(nvrModal);