import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { SideSheet, Tabs, TabPane, Button } from "@douyinfe/semi-ui";
import copy from "copy-to-clipboard";
import moment from "moment";
import PerfectScrollbar from "perfect-scrollbar";

let projectScrollbar;
let equipmentScrollbar;

function SideSheets (props) {
    const {
        dispatch,
        actions,
        user,
        loading,
        visible,
        close,
        cameraSetup,
        rowId,
        venderList,
        accessType,
    } = props;
    const { equipmentWarehouse } = actions;
    const [clickStyle, setclickStyle] = useState();
    const [nvrDetails, setNvrDetails] = useState({ station: [] });
    const [highStandard, setHighStandard] = useState(true);
    const [solid, setSolid] = useState("solid");
    const [light, setLight] = useState("light");
    const list = ["项目名称", "关联结构物", "关联测点", "关联监测因素"];
    const information = {
        nvr: [
            {
                name: "基础信息",
                basics: [
                    { name: "设备名称：", key: "name" },
                    { name: "设备编号：", key: "serialNo" },
                    { name: "接入方式：", key: "accessWay" },
                    { name: "厂商：", key: "venderId" },
                    { name: "添加账号：", key: "createUser" },
                    { name: "添加时间：", key: "createTime" },
                    { name: "行政区划：", key: "regionCode" },
                    {
                        name: "设备安装位置：",
                        key: "latitude",
                        difference: "line",
                    },
                ],
            },
            {
                name: "接入信息",
                access: [
                    { name: "SIP服务编号：", key: "Serial" },
                    { name: "SIP域：", key: "Realm" },
                    { name: "SIP端口号：", key: "ListenAddr" },
                    { name: "通道数量：", key: "channelCount", difference: "difference" },
                    { name: "心跳周期：", key: "Expires" },
                    { name: "最大心跳次数：", key: "RemoveBanInterval" },
                    { name: "注册密码：", key: "Password" },
                    { name: "注册有效期：", key: "" },
                    { name: "接入识别模块：", key: "" },
                ],
            },
            {
                name: "摄像头信息",
                CameraInformation: [
                    {
                        name: "通道1",
                        value1: "145641201564-1",
                        value2: "哦哦哦我我我喔噢喔喔我",
                    },
                    {
                        name: "通道2",
                        value1: "145641201564-2",
                        value2: "哦哦哦哦哦噢噢欧欧哦",
                    },
                ],
            },
        ],
        camera: [
            {
                name: "基础信息",
                basics: [
                    { name: "设备名称：", key: "name" },
                    {
                        name: "SIP编号/设备编号：",
                        key: nvrDetails.serialNo ? "serialNo" : "sip",
                    },
                    { name: "接入方式：", key: "type" },
                    { name: "厂商：", key: "venderId" },
                    { name: "添加账号：", key: "createUser" },
                    { name: "添加时间：", key: "createTime" },
                    {
                        name: "设备安装位置：",
                        key: "latitude",
                        difference: "line",
                    },
                ],
            },
            {
                name: "复制直播地址",
                liveBroadcast: [
                    { name: "HLS地址", key: "hls" },
                    { name: "FLV地址", key: "flv" },
                    { name: "RTMP地址", key: "rtmp" },
                    { name: "EZOPEN地址", key: "ezopen" },
                    { name: "ONVIF地址", key: "onvif" },
                ],
            },
            {
                name: "复制回收地址",
                recovery: [
                    { name: "云储存地址", key: "cloud" },
                    { name: "本地储存地址", key: "local" },
                ],
            },
        ],
    };
    const styles = {
        width: 180,
        height: 64,
        textAlign: "center",
        background: "url(/assets/images/background/backGround.png)",
        backgroundSize: "100% 100%",
        padding: "12px 17px 12px 17px",
        margin: "30px 0 0 10px",
        lineHeight: "24px",
        overflow: "hidden",
        textOverflow: "ellipsis",
        display: "-webkit-box",
        WebkitLineClamp: "2",
        WebkitBoxOrient: "vertical",
        zIndex: 5,
    };


    useEffect(() => {
        dispatch(
            equipmentWarehouse[cameraSetup ? "getCameraDetails" : "getNvrDetails"](
                rowId
            )
        ).then((res) => {
            setNvrDetails(res.payload.data);
            console.log(res.payload.data);
            projectScrollbar = new PerfectScrollbar("#project_information", {
                suppressScrollX: true,
            });
            equipmentScrollbar = new PerfectScrollbar("#equipment_information", {
                suppressScrollX: true,
            });

        });
    }, []);


    useEffect(() => {
        const domProject = document.getElementById("project_information");
        if (domProject && projectScrollbar) {
            projectScrollbar.update();
        }
        const domEquipment = document.getElementById("equipment_information");
        if (domEquipment && equipmentScrollbar) {
            equipmentScrollbar.update();
        }
    });

    const statusNvr = nvrDetails.gbNvr
    const statusCamera = nvrDetails.gbCamera
    function colorStatus (data) {
        switch (data) {
            case "ON":
                return "green"
            case "ONLINE":
                return "green"
            case "OFF":
                return "grey"
            default:
                return "blue"
        }
    }
    return (
        <SideSheet
            visible={visible}
            title={cameraSetup ?
                <><img src={`/assets/images/background/${nvrDetails.forbidden ? "red" : colorStatus(statusNvr ? statusNvr.online : "")}.png`} style={{ marginRight: "10px" }} />污水管理出出口</>
                : <><img src={`/assets/images/background/${colorStatus(statusCamera ? statusCamera.online : "")}.png`} style={{ marginRight: "10px" }} />智慧设备NVR</>
            }
            style={{ background: "#F9FBFF" }}
            size="large"
            onCancel={() => {
                close();
            }}
        >
            <Tabs type="line">
                <TabPane tab="项目信息" itemKey="1">
                    <div
                        style={{
                            display: "flex",
                            justifyContent: "space-evenly",
                        }}
                    >
                        {list.map((item, index) => {
                            return (
                                <div
                                    style={{
                                        lineHeight: "32px",
                                        background: "#1859C1",
                                        color: "#FFFFFF",
                                        borderRadius: 3,
                                        textAlign: "center",
                                        width: 200,
                                        margin: "12px 8px",
                                    }}
                                    key={item}
                                >
                                    <img
                                        src={`/assets/images/background/projectIcon${index}.png`}
                                        style={{ marginRight: 10 }}
                                    />
                                    {item}
                                </div>
                            );
                        })}
                    </div>
                    <div
                        id="project_information"
                        style={{
                            height: document.body.clientHeight - 182,
                            position: "relative",
                        }}
                    >
                        {nvrDetails
                            ? nvrDetails.station.length == 0
                                ? ""
                                : nvrDetails.station.map((item, index) => {
                                    return item.structure.projects.map((v, i) => {
                                        return (
                                            <div
                                                key={v.name}
                                                style={{
                                                    display: "flex",
                                                    justifyContent: "space-evenly",
                                                }}
                                            >
                                                <div style={styles}>{v.name}</div>
                                                <div style={styles}>{item.structure.name}</div>
                                                <div style={styles}>{item.name}</div>
                                                <div style={styles}>{item.factor.name}</div>
                                            </div>
                                        );
                                    });
                                })
                            : ""}
                    </div>
                </TabPane>
                <TabPane tab="设备信息" itemKey="2">
                    <div
                        id="equipment_information"
                        style={{
                            height: document.body.clientHeight - 126,
                            position: "relative",
                        }}
                    >
                        {nvrDetails
                            ? (cameraSetup ? information.camera : information.nvr).map(
                                (item, index) => {
                                    let str = [];
                                    if (index > 0) {
                                        str.push(
                                            <img
                                                src="/assets/images/background/straightline.png"
                                                key={"img" + index}
                                                alt="无法显示"
                                                style={{
                                                    width: 872,
                                                    display: "block",
                                                    marginTop: 24,
                                                }}
                                            />
                                        );
                                    }
                                    str.push(
                                        <div
                                            key={"name" + index}
                                            style={{
                                                fontWeight: "400",
                                                color: "#1859C1",
                                                margin: "15px 0 12px 40px",
                                            }}
                                        >
                                            {item.name}
                                            {cameraSetup ? (
                                                index == 1 ? (
                                                    <div
                                                        style={{
                                                            display: "inline-block",
                                                            float: "right",
                                                            marginRight: 20,
                                                        }}
                                                    >
                                                        <Button style={{ marginRight: 20 }} theme={solid} onClick={() => {
                                                            setHighStandard(true)
                                                            setSolid("solid")
                                                            setLight("light")
                                                        }}>
                                                            高清
                                                        </Button>
                                                        <Button theme={light} onClick={() => {
                                                            setHighStandard(false)
                                                            setSolid("light")
                                                            setLight("solid")
                                                        }}>标清</Button>
                                                    </div>
                                                ) : (
                                                    ""
                                                )
                                            ) : (
                                                ""
                                            )}
                                        </div>
                                    );
                                    //基础信息
                                    if (index == 0) {
                                        item.basics.map((item, index) => {
                                            if (item.difference == "line") {
                                                str.push(
                                                    <div
                                                        key={"basics" + index}
                                                        style={{ marginTop: 14 }}
                                                    >
                                                        <span
                                                            style={{
                                                                width: 150,
                                                                display: "inline-block",
                                                                textAlign: "right",
                                                                fontWeight: "400",
                                                                color: "rgba(0, 0, 0, 0.45)",
                                                            }}
                                                        >
                                                            {item.name}
                                                        </span>
                                                        <span
                                                            style={{ fontWeight: "400", color: " #34383E" }}
                                                        >
                                                            {nvrDetails.latitude ? `${nvrDetails[item.key]},${nvrDetails.longitude}` : "未知"}
                                                        </span>
                                                    </div>
                                                );
                                            } else {
                                                str.push(
                                                    <div
                                                        key={"basics" + index}
                                                        style={{
                                                            width: "50%",
                                                            display: "inline-block",
                                                            marginTop: 20,
                                                        }}
                                                    >
                                                        <span
                                                            style={{
                                                                width: 150,
                                                                display: "inline-block",
                                                                textAlign: "right",
                                                                fontWeight: "400",
                                                                color: "rgba(0, 0, 0, 0.45)",
                                                            }}
                                                        >
                                                            {item.name}
                                                        </span>
                                                        <span
                                                            style={{ fontWeight: "400", color: " #34383E" }}
                                                        >
                                                            {item.key == "type"
                                                                ? nvrDetails.type ? accessType.find(
                                                                    (v) => v.key == nvrDetails.type
                                                                ).name : ""
                                                                : item.key == "venderId"
                                                                    ? nvrDetails.venderId ? venderList.find(
                                                                        (v) => v.id == nvrDetails.venderId
                                                                    ).name : "未知"
                                                                    : item.key == "createUser"
                                                                        ? nvrDetails.createUser ? nvrDetails.createUser.namePresent : ""
                                                                        : item.key == "createTime"
                                                                            ? moment(nvrDetails.createTime).format(
                                                                                "YYYY-MM-DD HH:MM:SS"
                                                                            )
                                                                            : nvrDetails[item.key]}
                                                        </span>
                                                    </div>
                                                );
                                            }
                                            return str;
                                        });
                                    }
                                    //接入信息/复制直播地址
                                    if (index == 1) {
                                        (cameraSetup ? item.liveBroadcast : item.access).map(
                                            (item, index) => {
                                                if (cameraSetup) {
                                                    nvrDetails.videoUrl ? nvrDetails.videoUrl.liveUrl ?
                                                        str.push(
                                                            <div
                                                                key={"liveBroadcast" + index}
                                                                style={{
                                                                    width: 120,
                                                                    height: 130,
                                                                    display: "inline-block",
                                                                    borderRadius: 4,
                                                                    border: "1px solid #D9D9D9",
                                                                    margin: "20px 0 0 40px",
                                                                    textAlign: "center",
                                                                    color: clickStyle == item.name ? "white" : "",
                                                                    background:
                                                                        clickStyle == item.name ? "#1859C1" : "",
                                                                }}
                                                                onClick={() => {
                                                                    if (highStandard) {
                                                                        copy(nvrDetails.videoUrl.liveUrl.hd[item.key]);
                                                                    } else {
                                                                        copy(nvrDetails.videoUrl.liveUrl.sd[item.key]);
                                                                    }

                                                                    setclickStyle(item.name);
                                                                }}
                                                            >
                                                                <img
                                                                    src={`/assets/images/background/${clickStyle == item.name
                                                                        ? "sewage_camera2"
                                                                        : "sewage_camera1"
                                                                        }.png`}
                                                                    style={{ margin: "20px 0 8px 0" }}
                                                                />
                                                                <div>
                                                                    {item.name}
                                                                    <img
                                                                        src={`/assets/images/background/${clickStyle == item.name
                                                                            ? "copy2"
                                                                            : "copy1"
                                                                            }.png`}
                                                                        style={{
                                                                            paddingBottom: 10,
                                                                            display: "inline-block",
                                                                            width: 10,
                                                                            height: 20,
                                                                        }}
                                                                    />
                                                                </div>
                                                            </div>
                                                        ) : "" : "";
                                                } else {
                                                    str.push(
                                                        <div
                                                            key={"access" + index}
                                                            style={{
                                                                width: "50%",
                                                                display: "inline-block",
                                                                marginTop: 20,
                                                            }}
                                                        >
                                                            <span
                                                                style={{
                                                                    width: 150,
                                                                    display: "inline-block",
                                                                    textAlign: "right",
                                                                    fontWeight: "400",
                                                                    color: "rgba(0, 0, 0, 0.45)",
                                                                }}
                                                            >
                                                                {item.name}
                                                            </span>
                                                            <span
                                                                style={{
                                                                    fontWeight: "400",
                                                                    color: " #34383E",
                                                                }}
                                                            >
                                                                {item.difference == "difference" ? nvrDetails[item.key] : nvrDetails.accessInfo ? nvrDetails.accessInfo[item.key] : ""}
                                                            </span>
                                                        </div>
                                                    );
                                                }
                                                return str;
                                            }
                                        );
                                    }
                                    //摄像头信息/复制回收地址
                                    if (index == 2) {
                                        (cameraSetup ? item.recovery : nvrDetails.camera ? nvrDetails.camera : []).map(
                                            (item, index) => {
                                                if (cameraSetup) {
                                                    nvrDetails.videoUrl?nvrDetails.videoUrl.replayUrl?
                                                    str.push(
                                                        <div
                                                            key={"liveBroadcast" + index}
                                                            style={{
                                                                width: 120,
                                                                height: 130,
                                                                display: "inline-block",
                                                                borderRadius: 4,
                                                                border: "1px solid #D9D9D9",
                                                                margin: "20px 0 0 40px",
                                                                textAlign: "center",
                                                                color: clickStyle == item.name ? "white" : "",
                                                                background:
                                                                    clickStyle == item.name ? "#1859C1" : "",
                                                            }}
                                                            onClick={() => {
                                                                copy(nvrDetails.videoUrl.replayUrl[item.key]);
                                                                // alert("复制成功");
                                                                setclickStyle(item.name);
                                                            }}
                                                        >
                                                            <img
                                                                src={`/assets/images/background/${clickStyle == item.name
                                                                    ? "store2"
                                                                    : "store1"
                                                                    }.png`}
                                                                style={{ margin: "20px 0 8px 0" }}
                                                            />
                                                            <div>
                                                                {item.name}
                                                                <img
                                                                    src={`/assets/images/background/${clickStyle == item.name
                                                                        ? "copy2"
                                                                        : "copy1"
                                                                        }.png`}
                                                                    style={{
                                                                        paddingBottom: 10,
                                                                        display: "inline-block",
                                                                        width: 10,
                                                                        height: 20,
                                                                    }}
                                                                />
                                                            </div>
                                                        </div>
                                                    ):"":"";
                                                } else {
                                                    str.push(
                                                        <div
                                                            key={"access" + index}
                                                            style={{
                                                                width: "40%",
                                                                display: "inline-block",
                                                                borderRadius: 4,
                                                                border: "1px solid rgba(151, 151, 151, 0.2)",
                                                                margin: "16px 0 0 36px",
                                                                color: "rgba(0, 0, 0, 0.85)",
                                                                fontWeight: "400",
                                                            }}
                                                        >
                                                            <div
                                                                style={{
                                                                    padding: "8px 10px",
                                                                    borderBottom:
                                                                        "1px solid rgba(151, 151, 151, 0.2)",
                                                                }}
                                                            >
                                                                <img
                                                                    src={`/assets/images/background/camera.png`}
                                                                    style={{ marginRight: 10 }}
                                                                />
                                                                <div
                                                                    style={{
                                                                        display: "inline-block",
                                                                    }}
                                                                >
                                                                    {item.channelName}
                                                                </div>
                                                            </div>
                                                            <p style={{ margin: "16px 0 0 32px " }}>
                                                                {item.id}
                                                            </p>
                                                            <p style={{ margin: "16px 0 20px 32px " }}>
                                                                {item.name}
                                                            </p>
                                                        </div>
                                                    );
                                                }
                                                return str;
                                            }
                                        );
                                    }

                                    return str;
                                }
                            )
                            : ""}
                    </div>
                </TabPane>
            </Tabs>
        </SideSheet>
    );
}

function mapStateToProps (state) {
    const { auth, global, members } = state;
    return {
        loading: members.isRequesting,
        user: auth.user,
        actions: global.actions,
        global: global,
        members: members.data,
    };
}
export default connect(mapStateToProps)(SideSheets);