import React, { useState, useEffect } from "react";
import { SideSheet, Tabs, TabPane } from "@douyinfe/semi-ui";

function SideSheets(props) {
  const { dispatch, actions, user, loading, visible, close, SETUPS } = props;
  const [checkeds, setCheckeds] = useState([]);
  const [check, setCheck] = useState([]);
  const list = [
    {
      name: "项目名称",
      a: "南昌县智慧环保",
      b: "南昌县智慧环保",
      c: "南昌市市政隧道综合管理平台",
      d: "C",
    },
    { name: "关联结构物", a: "a", b: "B", c: "C", d: "C" },
    { name: "关联测点", a: "a", b: "B", c: "C", d: "C" },
    { name: "关联监测因素", a: "a", b: "B", c: "C", d: "C" },
  ];
  const IFname = [
    "设备名称：",
    "设备编号：",
    "接入方式：",
    "厂商：",
    "添加账号：",
    "添加时间：",
    "行政区别：",
    "设备安装位置：",
    "SIP服务编号:",
    "SIP域:",
    "SIP端口号:",
    "通道数量:",
    "心跳周期:",
    "最大心跳次数:",
    "注册密码:",
    "注册有效期::",
    "接入识别模块:",
  ];
  console.log(IFname);
  const styles = {
    width: 180,
    textAlign: "center",
    // background: "#FFFFFF",
    background: "url(/assets/images/background/backGround.png)",
    backgroundSize: "100% 100%",
    padding: "12px 17px",
    margin: "30px 0 0 10px",
    lineHeight: "20px",
    position: "relative",
    zIndex: 5,
  };

  useEffect(() => {}, []);

  return (
    <SideSheet
      visible={visible}
      title="智慧设备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) => {
              return (
                <div
                  key={item.name}
                  style={{
                    width: 200,
                    margin: "12px 8px",
                  }}
                >
                  <div
                    style={{
                      lineHeight: "32px",
                      background: "#1859C1",
                      borderRadius: 3,
                      textAlign: "center",
                    }}
                  >
                    {item.name}
                  </div>
                  <div style={styles}>{item.a}</div>
                  <div style={styles}>{item.b}</div>
                  <div style={styles}>{item.c}</div>
                  <div style={styles}>{item.d}</div>
                </div>
              );
            })}
          </div>
        </TabPane>
        <TabPane tab="设备信息" itemKey="2">
          {IFname.map((item, index) => {
            return index;
          })}
        </TabPane>
      </Tabs>
    </SideSheet>
  );
}

export default SideSheets;