import React, { useState, useRef, useEffect, useImperativeHandle } from "react";
import { connect } from "react-redux";
import { Form, Row, Col, Checkbox, Radio, CheckboxGroup, } from "@douyinfe/semi-ui";
import { IconEdit, IconPlayCircle, } from "@douyinfe/semi-icons";
import "./cameraModal.less";
import PerfectScrollbar from "perfect-scrollbar";
let equipmentScrollbar;

function cascadeCamera ({ dRef, dispatch, actions, cameraData, parentCamera, testComplete }) {
    const form = useRef();
    const { equipmentWarehouse } = actions;
    const [sip, setSip] = useState([]);
    const [NVRcameraList, setNVRcameraList] = useState([]); //nvr视频流列表
    const [nvrCheckList, setNvrCheckList] = useState([]); //nvr视频流多选
    const [isAllChoose, setIsAllChoose] = useState(false); //全选
    const cameraDataNvr = cameraData.nvr || "";

    useEffect(() => {
        dispatch(equipmentWarehouse.getCascadeSIP()).then((res) => {
            setSip(res.payload.data);
        });
        const videoStreaming = document.getElementById("video_streaming");
        if (videoStreaming && equipmentScrollbar) {
            equipmentScrollbar.update();
        }
    }, []);

    useEffect(() => {
        NVRcameraList
            ? (equipmentScrollbar = new PerfectScrollbar("#video_streaming", {
                suppressScrollX: true,
            }))
            : "";
    }, [NVRcameraList]);

    useEffect(() => {
        //测试成功后获取级联视频流
        console.log(testComplete)
        if (testComplete) {
            dispatch(equipmentWarehouse.getCascadeStream({ sip: "111" })).then((res) => {
                console.log(res.payload.data);
                let chooseList = [];
                let data = res.payload.data.map((item, index) => {
                    item.change = false;
                    return item;
                })
                setNVRcameraList(data)
                for (let index = 0; index < data.length; index++) {
                    chooseList.push(data[index].id);
                }
                setNvrCheckList(chooseList);
                setIsAllChoose(true);
            });
        }
    }, [testComplete])


    //内存卡列表
    const memoryList = [
        {
            id: 1,
            value: "8g",
        },
        {
            id: 2,
            value: "16g",
        },
        {
            id: 3,
            value: "32g",
        },
        {
            id: 4,
            value: "64g",
        },
        {
            id: 5,
            value: "128g",
        },
        {
            id: 6,
            value: "256g",
        },
        {
            id: 7,
            value: ">256g",
        },
    ];

    function NvrChangeName (e, index, name) {
        //级联摄像头视频流获取修改名称
        let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
        if (cameraData.name == name) {
            NvrchangeList[index].change = true;
            setNVRcameraList(NvrchangeList);
        }
        e.stopPropagation();
    }
    function nvronBlur (index) {
        //nvr摄像头名称修改失去焦点
        let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
        NvrchangeList[index].change = false;
        setNVRcameraList(NvrchangeList);
    }
    function inputchange (e, index) {
        //nvr摄像头名称修改
        let NvrchangeList = JSON.parse(JSON.stringify(NVRcameraList));
        NvrchangeList[index].name = e;
        setNVRcameraList(NvrchangeList);
    }
    function allChoose (e) {
        //全选/全不选
        let chooseList = [];
        if (NVRcameraList.length == nvrCheckList.length) {
            setNvrCheckList([]);
            setIsAllChoose(false);
        } else {
            for (let index = 0; index < NVRcameraList.length; index++) {
                chooseList.push(NVRcameraList[index].id);
            }
            setNvrCheckList(chooseList);
            setIsAllChoose(true);
        }
    }
    function playVideo (e) {
        //nvr播放视频
        console.log("22222222222222222");
        e.stopPropagation();
    }
    function onDisabled (name) {
        if ((cameraDataNvr && cameraData.name == name) || !cameraDataNvr) {
            return false;
        } else {
            return true;
        }
    }

    useImperativeHandle(dRef, () => ({
        //传给父组件方法
        //子组件暴露给父组件的方法
        cascadeCameraForm: form.current.validate,
        resetCascadeCamera: form.current.reset,
    }));
    return (
        <>
            <Form
                allowEmpty
                labelPosition="left"
                labelAlign="left"
                labelWidth="115px"
                onValueChange={(values) => {
                    console.log(values);

                }}
                getFormApi={(formApi) => (form.current = formApi)}
            >
                <Row>
                    <Col span={12}>
                        <Form.Input
                            field="externalDomain"
                            label="外域名称:"
                            maxLength="36"
                            initValue={cameraData.externalDomain || ""}
                            placeholder="请输入外域 名称，例如“xxx市级平台”"
                            style={{ width: 307 }}
                            rules={[{ required: true, message: "请输入外域名称" }]}
                        />
                    </Col>
                    <Col span={12}>
                        <Form.Select
                            label="级联方式:"
                            field="cascadeType"
                            initValue={cameraData.cascadeType || "上级域"}
                            style={{ width: 307 }}
                            rules={[{ required: true, message: "请选择输入级联方式" }]}
                        >
                            <Form.Select.Option value="上级域">
                                上级域
                            </Form.Select.Option>
                        </Form.Select>
                    </Col>
                    <Col span={14}>
                        <Form.Select
                            label="SIP编号:"
                            field="sip"
                            initValue={parentCamera || ""}
                            placeholder="请选择SIP编号"
                            style={{ width: 307 }}
                            rules={[{ required: true, message: "请选择SIP编号" }]}
                        >
                            {sip.map((item, index) => (
                                <Form.Select.Option key={index} value={item.sipip}>
                                    {item.sipip}
                                </Form.Select.Option>
                            ))}
                        </Form.Select>
                    </Col>
                </Row>
                <Row>

                    <div
                        id="video_streaming"
                        style={{ maxHeight: 300, position: "relative" }}
                    >
                        {NVRcameraList.length > 0 ? (
                            <div
                                style={{ display: "flex", alignItems: "center", marginLeft: 211 }}
                            >
                                <Radio
                                    checked={isAllChoose}
                                    mode="advanced"
                                    disabled={true}
                                    onChange={(e) => allChoose(e)}
                                    aria-label="全选"
                                >
                                    全选
                                </Radio>
                            </div>
                        ) : (
                            ""
                        )}
                        <CheckboxGroup
                            type="pureCard"
                            direction="vertical"
                            aria-label="视频流获取"
                            value={nvrCheckList}
                            onChange={(nvrCheck) => {
                                setNvrCheckList(nvrCheck);
                                if (NVRcameraList.length == nvrCheck.length) {
                                    setIsAllChoose(true);
                                } else {
                                    setIsAllChoose(false);
                                }
                            }}>
                            {NVRcameraList.length > 0
                                ? NVRcameraList.map((item, index) => (
                                    <Col
                                        key={index}
                                        span={12}
                                        style={{
                                            display: "flex",
                                            justifyContent: "center",
                                            marginTop: 12,
                                        }}
                                    >
                                        <Checkbox
                                            value={item.id}
                                            disabled={onDisabled(item.name)}
                                            extra={
                                                <div>
                                                    <div
                                                        style={{
                                                            display: "flex",
                                                            alignItems: "center",
                                                            justifyContent: "space-between",
                                                            height: 30,
                                                        }}
                                                    >
                                                        <div>
                                                            通道名称：
                                                            {item.change ? (
                                                                <Input
                                                                    autofocus
                                                                    style={{ width: 100 }}
                                                                    value={item.name}
                                                                    onChange={(e) => inputchange(e, index)}
                                                                    onBlur={() => nvronBlur(index)}
                                                                    onClick={(e) => e.stopPropagation()}
                                                                ></Input>
                                                            ) : (
                                                                item.name
                                                            )}
                                                        </div>
                                                        <div
                                                            style={{
                                                                display: "flex",
                                                                alignItems: "center",
                                                            }}
                                                        >
                                                            <IconEdit
                                                                style={{
                                                                    fontSize: 16,
                                                                    marginLeft: 18,
                                                                    cursor: "pointer",
                                                                    color: "#1859C1",
                                                                }}
                                                                onClick={(e) =>
                                                                    NvrChangeName(e, index, item.name)
                                                                }
                                                            />
                                                        </div>
                                                    </div>
                                                    <div style={{ marginTop: 8, width: 246 }}>
                                                        设备编号：{item.streamid}
                                                    </div>
                                                    <div
                                                        style={{
                                                            marginTop: 12,
                                                            display: "flex",
                                                            justifyContent: "space-between",
                                                            alignItems: "center",
                                                        }}
                                                    >
                                                        <IconPlayCircle
                                                            size="extra-large"
                                                            style={{ color: "#1859C1" }}
                                                            onClick={(e) => playVideo(e)}
                                                        />
                                                    </div>
                                                </div>
                                            }
                                            style={{ width: 280, border: "1px solid #F9F9F9" }}
                                        ></Checkbox>
                                    </Col>
                                ))
                                : ""}
                        </CheckboxGroup>
                    </div>

                </Row>
            </Form>
        </>
    );
}
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)(cascadeCamera);