import React, { useState ,useRef} from 'react'
import { Modal,Form,Row,Col,Spin,Notification,Button } from '@douyinfe/semi-ui';
import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons';
function nvrModal(props){
  const {modalName,visible,close}=props
  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 opts ={//添加完成确认后通知
    title:'Hi',
    content:'添加成功',
    duration:3
  }
  const [clickNum,setclickNum] = useState(1);//点击的第几个
  const cameraList=[//循环摄像头列表
    {
      id:1,
      img:'/assets/images/background/ysy.png',
      title:'萤石云平台摄像头',
      text:'通过萤石云平台rtmp地址配置完成推流的平台摄像头。'
    },{
      id:2,
      img:'/assets/images/background/nvr.png',
      title:'NVR摄像头',
      text:'通过连接NVR(网络硬盘录像机)进行视频流推送的摄像头'
    },{
      id:3,
      img:'/assets/images/background/ipc.png',
      title:'IPC网络摄像头',
      text:'通过网络与监控设备直连完成视频流推送的摄像头设备'
    },{
      id:4,
      img:'/assets/images/background/cascade.png',
      title:'级联摄像头',
      text:'通过GB/T28181协议级联的平台摄像头，常用于平台对接推送'
    },
  ]
  const [showcameraList,setcameraList]=useState(cameraList.slice(0,3));
  function handleOk() {//点击弹框确定  右边按钮
    if(step==0){
      form.current.validate()
      .then(values=>{//表单校验成功
        setloading(true);
        setTimeout(() => {
          setloadingTip('...接受成功')
          setTimeout(()=>{
            setloadingTip('已完成')
            setTimeout(() => {
              setstep(1);
              setokText('确认');
              setcancelText('上一步');
              setloading(false);
            }, 2000);
          },2000)
        }, 2000);
      })
      .catch(errors=>{//表单校验失败
        console.log('errors',errors);
      })
      
    }
    else{
      Notification.success(opts)
      // setVisible(false);
      close();
    }
  }
  function handleAfterClose(){//在关闭之后
    setstep(0);
    setokText('测试校验');
    setcancelText('取消');
  }
  function handleCancel() {//点击弹框取消  左边按钮
    if(step==0){
      // setVisible(false);
      close();
    }
    else{
      setstep(0);
      setokText('测试校验');
      setcancelText('取消');
    }
  }
  function handleLocation(){//高德经纬度
    console.log('handleLocationhandleLocation');
  }
  function handleChoose(id){//选择摄像头接入类型
    setclickNum(id);
  }
  function turnLift(){
    setcameraList(cameraList.slice(0,3))
  }
  function turnRight(){
    setcameraList(cameraList.slice(1,4))
  }
  return (
    <>
      {/* <div onClick={showDialog}>{modalName=='add'?'添加NVR':'修改'}</div> */}
      <Modal
          title={modalName=='add'?'添加摄像头':'修改摄像头'}
          okText={okText}
          cancelText={cancelText} //取消按钮
          visible={visible}
          onOk={handleOk}
          width={921}
          afterClose={handleAfterClose}
          onCancel={handleCancel}
      >
        <Spin tip={loadingTip} spinning={isloading}>
          <div style={{marginLeft:'-24px',marginRight:'-24px',marginTop:8}}>
            <div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>接入类型</div>
            <div style={{marginTop:5,display:'flex',alignItems:'center',justifyContent:'space-between'}}>
            <IconChevronLeft 
            style={{color:'rgba(0, 0, 0, 0.45)',fontSize:16,marginLeft:29,cursor: "pointer",}}
            onClick={turnLift}/>
            <div 
              style={{display:'flex',alignItems:'center',height:146}}>
              {showcameraList.map((item,index)=>(
              <div 
              key={item.id}
              style={{
                width:266,
                height:146,
                marginRight:12,
                border:clickNum===item.id?'1px solid #1859C1':'1px solid #F9F9F9',
                borderRadius:3,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                cursor: "pointer",
                position: 'relative'}}
                onClick={()=>handleChoose(item.id)}>
                <div 
                style={{marginTop:5,
                height:65,
                width:116,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'}}>
                  <img
                    src={item.img}
                    alt="设置"
                  />
                </div>
                <div style={{marginTop:2,fontSize:14,color:'rgba(0, 0, 0, 0.85)',}}>{item.title}</div>
                <div style={{width:210,height:34,marginTop:9,fontSize:12,color:'rgba(0, 0, 0, 0.45)',textAlign:'center'}}>{item.text}</div>  
                {clickNum===item.id?<div style={{    position: 'absolute', top: '-3px', right: '-5px'}}>
                  <img src="/assets/images/background/topchoose.png" alt="1" />
                </div>:''}
              </div>
              ))}
            </div>
            <IconChevronRight 
            style={{color:'rgba(0, 0, 0, 0.45)',fontSize:16,marginRight:18,cursor: "pointer",}}
            onClick={turnRight}/>
            </div>
          </div>
          <div style={{marginLeft:'-24px',marginRight:'-24px',marginTop:48,display:'flex',alignItems: 'center',justifyContent: 'space-between'}}>
            <div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>配置属性</div>
            <div style={{display:'flex',marginRight:43,}}>
              <div style={{
                height:30,
                width:64,
                border:'1px solid #D9D9D9',
                borderRadius: '3px',
                color:'rgba(0, 0, 0, 0.65)',
                display:'flex',
                justifyContent: 'center',
                alignItems: 'center',
                cursor: "pointer",
                marginRight:16
                }}>
                <img src="/assets/images/background/Reset.png" alt="1" style={{marginRight:4}}/>
                重置
              </div>
              <div style={{
                height:30,
                width:64,
                border:'1px solid #1859C1',
                borderRadius: '3px',
                color:'#1859C1',
                display:'flex',
                justifyContent: 'center',
                alignItems: 'center',
                cursor: "pointer",
                }}>
                <img src="/assets/images/background/test.png" alt="1" style={{marginRight:4}} />
                测试
              </div>
            </div>
          </div>
        </Spin>
      </Modal>
    </>
  );
}

export default nvrModal