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,
    SETUPS,
    cameraSetup,
    rowId,
    venderList,
    accessType,
  } = props;
  const { equipmentWarehouse } = actions;
  const [clickStyle, setclickStyle] = useState();
  const [nvrDetails, setNvrDetails] = useState("");
  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: "1111111111" },
          { name: "SIP域：", key: "KGU876J87" },
          { name: "SIP端口号：", key: "port" },
          { name: "通道数量：", key: "channelCount" },
          { name: "心跳周期：", key: "3600s" },
          { name: "最大心跳次数：", key: "3次" },
          { name: "注册密码：", key: "**********" },
          { name: "注册有效期：:", key: "3600s" },
          { name: "接入识别模块：", key: "sssss" },
        ],
      },
      {
        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: "" },
          { name: "FLV地址", key: "" },
          { name: "RTMP地址", key: "" },
          { name: "EZOPEN地址", key: "" },
          { name: "ONVIF地址", key: "" },
        ],
      },
      {
        name: "复制回收地址",
        recovery: [
          { name: "云储存地址", value: "" },
          { name: "本地储存地址", value: "" },
        ],
      },
    ],
  };
  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);
      projectScrollbar = new PerfectScrollbar("#project_information", {
        suppressScrollX: true,
      });
      equipmentScrollbar = new PerfectScrollbar("#equipment_information", {
        suppressScrollX: true,
      });
      console.log(nvrDetails);
    });
  }, []);

  useEffect(() => {
    const domProject = document.getElementById("project_information");
    if (domProject && projectScrollbar) {
      projectScrollbar.update();
    }
    const domEquipment = document.getElementById("equipment_information");
    if (domEquipment && equipmentScrollbar) {
      equipmentScrollbar.update();
    }
  });
  return (
    <SideSheet
      visible={visible}
      title={cameraSetup ? "污水管理出出口" : "智慧设备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.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">
                                高清
                              </Button>
                              <Button>标清</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[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"
                                  ? 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.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) {
                            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(item.name);
                                  // alert("复制成功");
                                  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",
                                  }}
                                >
                                  {nvrDetails[item.key]}
                                </span>
                              </div>
                            );
                          }
                          return str;
                        }
                      );
                    }
                    //摄像头信息/复制回收地址
                    if (index == 2) {
                      (cameraSetup ? item.recovery : nvrDetails.camera).map(
                        (item, index) => {
                          if (cameraSetup) {
                            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(item.name);
                                  // 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);
