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

const NvrHeader = (props) => {
  const { dispatch, actions, user, loading } = props;

  const screen = {
    width: 193,
    marginRight: 20,
    marginBottom: 16,
    color: "rgba(0, 0, 0, 0.65)",
  };
  const columns = [
    {
      title: "序号",
      align: "center",
      render: (text, record, index) => {
        return index + 1;
      },
    },
    {
      title: "设备名称",
      //   dataIndex: "name",///
      align: "center",
      width: 200,
      render: (text, record, index) => {
        return (
          <div>
            <span
              style={{
                backgroundColor: record.avatarBg,
                width: "10px",
                height: "10px",
                borderRadius: "50%",
                display: "inline-block",
              }}
            ></span>
            {record.name}
          </div>
        );
      },
    },
    {
      title: "设备厂家",
      align: "center",
      dataIndex: "size",
    },
    {
      title: "SIP地址",
      align: "center",
      dataIndex: "owner",
    },
    {
      title: "端口号",
      align: "center",
      dataIndex: "updateTime",
    },
    {
      title: "通道数",
      align: "center",
      dataIndex: "nameIconSrc",
    },
    {
      title: "操作",
      align: "center",
      dataIndex: "",
      render: (y) => {
        return (
          <>
            <Button>修改</Button>
            <Button>查看</Button>
            <Button>删除</Button>
          </>
        );
      },
    },
  ];
  const data = [
    {
      key: "1",
      name: "智能设备NVR1",
      nameIconSrc: "12",
      size: "飞尚科技1",
      owner: "192.168.1.1",
      updateTime: "5000",
      avatarBg: "red",
    },
    {
      key: "2",
      name: "智能设备NVR2",
      nameIconSrc: "8",
      size: "飞尚科技2",
      owner: "192.168.1.3",
      updateTime: "5001",
      avatarBg: "green",
    },
    {
      key: "3",
      name: "智能设备NVR3",
      nameIconSrc: "9",
      size: "飞尚科技3",
      owner: "192.168.1.2",
      updateTime: "5002",
      avatarBg: "green",
    },
  ];
  return (
    <>
      <div style={{position:''}}>
                <video id='nvrBanner' autoPlay loop muted style={{ width: '100%', objectFit: 'cover', height: 171 }} src='/assets/video/nvr_banner.mp4' type='video/mp4' />
                <div style={{position: 'absolute',top:12}}>
                    <div
                        style={{
                            fontSize: 22 + "px",
                            paddingTop: 15 + "px",
                            marginLeft: 21 + "px",
                        }}
                    >
                        NVR管理
                    </div>
                    <div
                        style={{
                            fontSize: 14 + "px",
                            paddingTop: 18 + "px",
                            marginLeft: 20 + "px",
                        }}
                    >
                        对NVR（网络硬盘录像机）设备节点的管理
                    </div>
                    <div
                        style={{
                            fontSize: 14 + "px",
                            marginTop: 28 + "px",
                            marginLeft: 21 + "px",
                            width: 89 + "px",
                            height: 32 + "px",
                            lineHeight: 32 + "px",
                            textAlign: "center",
                            backgroundColor: "#D9EAFF",
                            color: "#1859C1",
                            cursor: "pointer",
                        }}
                    >
                        <NvrModal modalName="添加NVR"/>
                    </div>
                </div>
            </div>
      <div
        style={{
          width: "100%",
          background: "#FFFFFF",
          borderRadius: 3,
          padding: "8px 20px",
          marginTop: 20,
        }}
      >
        <div
          style={{
            height: 22,
            fontSize: 16,
            fontFamily: "PingFangSC-Medium, PingFang SC",
            fontWeight: "bold",
            color: " rgba(0, 0, 0, 0.85)",
            lineHeight: "22px",
            marginBottom: 16,
          }}
        >
          筛选条件
        </div>
        <div style={{ display: "flex" }}>
          <Form
            onSubmit={(values) => console.log(values)}
            // labelPosition='top'
            layout="horizontal"
            style={{ position: "relative", width: "100%", flex: 1 }}
          >
            <Form.Input
              field="设备搜索："
              placeholder="请输入设备名称"
              labelPosition="left"
              style={screen}
            />
            <Form.Select
              label="厂家筛选："
              labelPosition="left"
              style={screen}
              placeholder="全部"
            >
              <Form.Select.Option value="f1">飞尚科技1</Form.Select.Option>
              <Form.Select.Option value="f2">飞尚科技2</Form.Select.Option>
            </Form.Select>
            <Form.Select
              label="状态查询："
              labelPosition="left"
              field="type"
              style={screen}
              placeholder="全部"
            >
              <Form.Select.Option value="yes">在线</Form.Select.Option>
              <Form.Select.Option value="no">离线</Form.Select.Option>
            </Form.Select>
            <Form.Select
              label="关联项目："
              labelPosition="left"
              field="type"
              style={screen}
              placeholder="全部"
            >
              <Form.Select.Option value="oper ">飞尚科技1</Form.Select.Option>
              <Form.Select.Option value="r">飞尚科技2</Form.Select.Option>
            </Form.Select>
          </Form>
          <div
            style={{
              width: 0,
              display: "flex",
              justifyContent: "flex-end",
              alignItems: "flex-end",
            }}
          >
            <Button
              theme="solid"
              type="primary"
              style={{
                width: 65,
                height: 30,
                borderRadius: 3,
                marginBottom: "20px",
                marginRight: "20px",
              }}
            >
              搜素
            </Button>
            <Button
              theme="light"
              type="primary"
              style={{
                width: 65,
                height: 30,
                backGround: "#FFFFFF",
                borderRadius: 3,
                border: "1px solid #D9D9D9",
                marginBottom: "20px",
              }}
            >
              重置
            </Button>
          </div>
        </div>
      </div>
      <Table
        title={
          <div
            style={{
              width: 64,
              height: 22,
              fontSize: 16,
              fontfAmily: "PingFangSC-Medium, PingFang SC",
              fontWeight: "bold",
              color: "rgba(0, 0, 0, 0.85)",
              lineHeight: "22px",
            }}
          >
            设备列表
          </div>
        }
        columns={columns}
        dataSource={data}
        pagination={false}
        bordered={false}
      />
    </>
  );
};

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)(NvrHeader);