import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux";
import { Modal, Spin,Input } from "@douyinfe/semi-ui";
import  TextScroll  from "../../../components/textScroll";

function remarksModal (props) {
    const {
        close,
        visible,
        rowId,
        dispatch,
        actions,
        cameraRemarks
    } = props;
    const { equipmentWarehouse } = actions;
    const [ScrollList, setScrollList] = useState([{num:'01',value:''},{num:'02',value:''},{num:'03',value:''}]); //显示
    const [showScrollList, setShowScrollList] = useState([]); //显示
    const [roll,setroll] = useState(false);
    const [showValueNum,setShowValueNum] = useState(0);
    const valueNum = useRef(0);
    //初始化
    useEffect(() => {
        let myScrollList=ScrollList
        let sortCameraRemarks =cameraRemarks//排序
        sortCameraRemarks.sort((a,b)=>{return a.id-b.id})

        for (let index = 0; index < sortCameraRemarks.length; index++) {
            myScrollList[index].value=sortCameraRemarks[index].remark
        }
        setScrollList(myScrollList)
        let mycameraRemarks=[]
        for (let index = 0; index < sortCameraRemarks.length; index++) {
            mycameraRemarks.push(sortCameraRemarks[index].remark)
        }
        setShowScrollList(mycameraRemarks)
    }, []);

    function handleOk () {
        //点击弹框确定  右边按钮
        dispatch(
            equipmentWarehouse.postCameraRemark({
                cameraId:rowId,
                remark:showScrollList
            })
        ).then((res) => {
            close();
        })
    }
    function handleCancel () {
        close();
        //点击弹框取消  左边按钮
    }
    //修改
    function onChange(value,num){
        valueNum.current=0
        let myScrollList=ScrollList
        myScrollList[num].value=value
        setScrollList(myScrollList);
        setShowScrollList([value])
        for (let index = 0; index < myScrollList.length; index++) {
            if(myScrollList[index].value){
                valueNum.current=valueNum.current+1
            }
        }
        setShowValueNum(valueNum.current);
    }
    //获取焦点
    function onFocus(num){
        setShowScrollList([ScrollList[num].value])
        setroll(true)
    }
    //失去焦点
    function onBlur(){
        setShowScrollList([])
        let myScrollList = []
        for (let index = 0; index < ScrollList.length; index++) {
            if(ScrollList[index].value){
                myScrollList.push(ScrollList[index].value)
            }
        }
        setShowScrollList(myScrollList)
        setroll(false)
    }
    return (
        <>
            <Modal
                title="备注管理"
                okText="确定"
                cancelText="取消"
                visible={visible}
                onOk={handleOk}
                width={763}
                onCancel={handleCancel}
            >
                <div style={{margin:"2px 14px 18px 29px",display:'flex'}}>
                    <div style={{width:394}}>
                        <div style={{display:'flex',marginBottom:8,marginTop:11}}>
                            <div style={{color:'#1859C1',fontWeight: 600}}>请添加备注信息</div>
                            <div>（{showValueNum}/3）</div>
                        </div>
                        <div style={{marginTop:8}}>
                            {ScrollList.map((item, index) => (
                                <div key={index} style={{marginTop:19}}>
                                    <Input 
                                        prefix={<div style={{color: 'rgba(0, 0, 0, 0.75)',margin:'0px 12px'}}>{item.num}</div>}
                                        value={item.value}
                                        placeholder="请输入备注信息不超过25个字符"
                                        onChange={(value)=>onChange(value,index)}
                                        onFocus={()=>onFocus(index)}
                                        onBlur={onBlur}
                                        maxLength={25}
                                        showClear></Input>
                                </div>
                            ))}
                        </div>
                    </div>
                    <div style={{width:308,marginLeft:20,border:'1px solid #F5F6F7'}}>
                            <div style={{ position: "absolute",background:'rgba(24,89,193,0.8)',width:306}}>
                                <TextScroll content={showScrollList} roll={roll} duration={6} />
                            </div>
                            <video
                                id="cameraBanner"
                                autoPlay
                                loop
                                muted
                                style={{ width: 306,height:185, objectFit: "cover", }}
                                src="/assets/video/37ov3-lit2e.mp4"
                                type="video/mp4"
                            />
                    </div>
                </div>
            </Modal>
        </>
    );
}
function mapStateToProps (state) {
    const { auth, global, members, CameraKind, CameraAbility } = state;
    return {
        loading: members.isRequesting,
        user: auth.user,
        actions: global.actions,
        CameraKind: CameraKind.data || [],
        CameraAbility: CameraAbility.data || [],
    };
}

export default connect(mapStateToProps)(remarksModal);