import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Button, Form, Input, Row, Table } from "@douyinfe/semi-ui";
import "../style.less";
import CameraModal from "../components/cameraModal";

const CameraHeader = (props) => {
  const [cameraModal,setCameraModal] = useState(false)
  const [modalName,setModalName] = useState('')
  return (
    <>
      <div style={{ position: "" }}>
        <video
          id="cameraBanner"
          autoPlay
          loop
          muted
          style={{ width: "100%", objectFit: "cover", height: 171 }}
          src="/assets/video/camera_banner.mp4"
          type="video/mp4"
        />
        <div style={{ position: "absolute", top: 12 }}>
          <div
            style={{
              fontSize: 22,
              paddingTop: 15,
              marginLeft: 21,
            }}
          >
            摄像头管理
          </div>
          <div
            style={{
              fontSize: 14,
              paddingTop: 18,
              marginLeft: 20,
            }}
          >
            对监控摄像设备设备添加、修改、删除的硬件管理页面。
          </div>
          <div
            style={{
              fontSize: 14,
              marginTop: 28,
              marginLeft: 21,
              width: 89,
              height: 32,
              lineHeight: 32 + "px",
              textAlign: "center",
              backgroundColor: "#D9EAFF",
              color: "#1859C1",
              cursor: "pointer",
            }}
            onClick={() => {
              setModalName('add')
              setCameraModal(true);
            }}
          >
            添加摄像头
          </div>
        </div>
      </div>
      {cameraModal?
      <CameraModal
      visible={true}
      close={() => {
        setCameraModal(false);
        // setEditData(null)
      }}
      modalName={modalName} />:''}
    </>
  );
};

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

export default connect(mapStateToProps)(CameraHeader);