FS-IOT/code/VideoAccess-VCMP/web/client/src/sections/offline/components/setup.jsx

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

function Setup(props) {
  const {
    visible,
    close,
    CODE,//错误码
    PIGEON,//信鸽
    pigeonSetup,
  } = props;
  const [check, setCheck] = useState([]);
 
  const checkboxcss = { width: "25%", height: 16, margin: "0 0 20px 0" };

  useEffect(() => {
    //获取是否勾选信息
    const codeItem = localStorage.getItem(CODE);
    const pigeonItem = localStorage.getItem(PIGEON);
    if (pigeonSetup) {
      setCheck(pigeonItem ? JSON.parse(pigeonItem) : []);
    } else {
      setCheck(codeItem ? JSON.parse(codeItem) : []);
    }
    ischeck();
  }, []);

  const equipmentCode = [//状态码管理
    { name: "常规解决方案", value: "manufactor" },
    { name: "状态频率", value: "accountNumber" },
  ];
  const equipmentCarrierpigeon = [//信鸽服务
    { name: "策略类型", value: "manufactor" },
    { name: "推送机制", value: "type" },
    { name: "监听设备数量", value: "state" },
    { name: "累计推送次数", value: "support" },
  ];

  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={() => {
        pigeonSetup
          ? localStorage.setItem(PIGEON, JSON.stringify(check))
          : localStorage.setItem(CODE, 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",
            }}
          >
            {pigeonSetup?'推送信息':'状态码信息'}
          </div>
          <div style={{ padding: "15px 12px", width: 530 }}>
            {(pigeonSetup ? equipmentCarrierpigeon : equipmentCode).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;