import React, { useState ,useRef,useEffect} from 'react'
import { connect } from "react-redux";
import { Modal,Spin } from '@douyinfe/semi-ui';
import { IconChevronLeft,IconChevronRight } from '@douyinfe/semi-icons';
import FluoriteCamera from "./fluoriteCamera";
import NvrCamera from './nvrCamera';
import IpcCamera from './ipcCamera';
import CascadeCamera from './cascadeCamera';
import "./cameraModal.less";
function cameraModal(props){
  const {modalName,visible,close}=props
  const fluoriteRef = useRef();
  const ipcRef = useRef();
  const cascadeRef = useRef();
  const [isloading,setloading] = useState(false);//是否显示loading
  const [loadingTip,setloadingTip] = useState('获取中...请稍后...');//loading tip的值
  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(clickNum==1){
      console.log('1111111111111');
    }else if(clickNum==2){
      console.log('22222222222222');
    }else if(clickNum==3){
      console.log('33333333333333');
    }else if(clickNum==4){
      console.log('44444444444444');
    }
    // Notification.success(opts)
    // close();
  }
  function handleAfterClose(){//在关闭之后

  }
  function handleCancel() {//点击弹框取消  左边按钮
    close();
  }
  function handleChoose(id){//选择摄像头接入类型
    setclickNum(id);
  }
  function turnLift(){//轮播图向左
    setcameraList(cameraList.slice(0,3))
  }
  function turnRight(){//轮播图向右
    setcameraList(cameraList.slice(1,4))
  }
  function onReset(){
    if(clickNum==1){
      fluoriteRef.current.resetFluoriteCamera()
    }else if(clickNum==3){
      ipcRef.current.resetIpcCamera()
    }else if(clickNum==4){

    }
  }
  function toTest(){
    if(clickNum==1){
      fluoriteRef.current.fluoriteCameraForm().then(values=>{//表单校验成功
        console.log('111111111',values);
      })
      .catch(errors=>{//表单校验失败
        console.log('errors',errors);
      })
    }else if(clickNum==3){
      ipcRef.current.ipcCameraForm().then(values=>{//表单校验成功
        console.log('111111111',values);
      })
      .catch(errors=>{//表单校验失败
        console.log('errors',errors);
      })
    }else if(clickNum==4){
      cascadeRef.current.cascadeCameraForm()
      .then(values=>{//表单校验成功
        let chooseList=[]
        let nvrCameraList=[{
          id:10,
          name:'南昌县1',
          number:'111111111111111111',
          support:false,
          change:false,
        },{
          id:20,
          name:'南昌县2',
          number:'222222222222222222',
          support:false,
          change:false,
        },{
          id:30,
          name:'南昌县3',
          number:'333333333333333333',
          support:false,
          change:false,
        },{
          id:40,
          name:'南昌县4',
          number:'444444444444444444',
          support:false,
          change:false,
        }]
        cascadeRef.current.setNVRcameraList(nvrCameraList)
        for (let index = 0; index < nvrCameraList.length; index++) {
          chooseList.push(nvrCameraList[index].id)
        }
        cascadeRef.current.setNvrCheckList(chooseList)
        cascadeRef.current.setIsAllChoose(true)
      })
      .catch(errors=>{//表单校验失败
        console.log('errors',errors);
      })
    }
  }
   
  return (
    <>
      <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={{height:30,marginLeft:'-24px',marginRight:'-24px',marginTop:48,display:'flex',alignItems: 'center',justifyContent: 'space-between'}}>
            <div style={{marginLeft:29,color:'#1859C1',fontSize:14,fontWeight:500}}>配置属性</div>
           {clickNum!==2?<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
                }} onClick={onReset}>
                <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",
                }} onClick={toTest}>
                <img src="/assets/images/background/test.png" alt="1" style={{marginRight:4}} />
                测试
              </div>
            </div>:''}
          </div>
          <div>
            {clickNum==1?
            <FluoriteCamera cRef={fluoriteRef}/>
            :clickNum==2?
            <NvrCamera/>
            :clickNum==3?
            <IpcCamera aRef={ipcRef} />
            :<CascadeCamera dRef={cascadeRef}/>}
          </div>
        </Spin>
      </Modal>
    </>
  );
}
function mapStateToProps(state) {
  const { auth, global, members } = state;
  return {
    loading: members.isRequesting,
    user: auth.user,
    actions: global.actions,
    members: members.data,
  };
}

export default connect(mapStateToProps)(cameraModal);