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

function Setup(props) {
  const {
    dispatch,
    actions,
    user,
    loading,
    visible,
    close,
    SETUPS,
    CAMERAS,
    cameraSetup,
  } = props;
  const [check, setCheck] = useState([]);
  const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };

  useEffect(() => {
    //获取是否勾选信息
    const nvrItem = localStorage.getItem(SETUPS);
    const cameraItem = localStorage.getItem(CAMERAS);
    if (cameraSetup) {
      setCheck(cameraItem ? JSON.parse(cameraItem) : []);
    } else {
      setCheck(nvrItem ? JSON.parse(nvrItem) : []);
    }
    ischeck();
  }, []);

  const equipmentNVR = [
    { name: "设备厂家", value: "a" },
    { name: "添加账号", value: "b" },
    { name: "通道数", value: "c" },
    { name: "端口", value: "d" },
    { name: "设备状态", value: "e" },
    { name: "创建时间", value: "f" },
  ];
  const projectNVR = [
    { name: "项目名称", value: "g" },
    { name: "things名称", value: "h" },
    { name: "things数量", value: "i" },
  ];
  const equipmentCamera = [
    { name: "设备厂家", value: "manufactor" },
    { name: "接入类型", value: "type" },
    { name: "设备状态", value: "state" },
    { name: "云台支持", value: "support" },
    { name: "内存卡信息", value: "memoryCard" },
    { name: "设备创建时间", value: "time" },
    { name: "设备添加账号", value: "account" },
  ];
  const projectCamera = [
    { name: "项目名称", value: "name" },
    { name: "pcode", value: "pcode" },
    { name: "结构物", value: "structure" },
    { name: "测点", value: "measuringPoint" },
    { name: "监测因素", value: "factor" },
  ];

  function ischeck(value) {
    if (check.length >= 8) {
      if (check.includes(value)) {
        return false;
      } else {
        return true;
      }
    }
  }

  return (
    <Modal
      title={
        <div>
          表格属性设置
          <span
            style={{
              width: 50,
              lineHeight: "19px",
              display: "inline-block",

              color: "white",
              textAlign: "center",
              marginLeft: 6,
              background:
                check.length == 8
                  ? "rgba(40, 123, 255, 1)"
                  : "rgba(176, 176, 176, 1)",
            }}
          >
            {check.length}/8
          </span> 
        </div>
      }
      visible={visible}
      style={{ width: 600 }}
      onOk={() => {
        cameraSetup
          ? localStorage.setItem(CAMERAS, JSON.stringify(check))
          : localStorage.setItem(SETUPS, JSON.stringify(check));
        close();
      }}
      onCancel={() => {
        close();
      }}
    >
      <CheckboxGroup
        style={{ width: "100%", fontSize: 14 }}
        key="primary1"
        direction="horizontal"
        defaultValue={check}
        aria-label="表格属性设置"
        onChange={(check) => {
          setCheck(check);
          ischeck();
        }}
      >
        <div
          style={{
            width: 550,
            border: "1px solid #EAEAEA",
            padding: "0px 5px",
            borderRadius: 4,
            marginBottom: "20px",
          }}
        >
          <div
            style={{
              borderBottom: "1px solid #EAEAEA",
              marginLeft: "10px",
              padding: "8px 0px",
            }}
          >
            设备信息
          </div>
          <div style={{ padding: "15px 12px", width: 530 }}>
            {(cameraSetup ? equipmentCamera : equipmentNVR).map((item) => {
              return (
                <Checkbox
                  key={item.value}
                  value={item.value}
                  style={checkboxcss}
                  disabled={ischeck(item.value)}
                >
                  {item.name}
                </Checkbox>
              );
            })}
          </div>
        </div>

        <div
          style={{
            width: 550,
            border: "1px solid #EAEAEA",
            padding: "0px 5px",
            borderRadius: 4,
          }}
        >
          <div
            style={{
              borderBottom: "1px solid #EAEAEA",

              marginLeft: "10px",
              padding: "8px 0px",
            }}
          >
            项目信息
          </div>
          <div style={{ padding: "15px 12px", width: 530 }}>
            {(cameraSetup ? projectCamera : projectNVR).map((item) => {
              return (
                <Checkbox
                  key={item.value}
                  value={item.value}
                  style={checkboxcss}
                  disabled={ischeck(item.value)}
                >
                  {item.name}
                </Checkbox>
              );
            })}
          </div>
        </div>
      </CheckboxGroup>
    </Modal>
  );
}

export default Setup;