import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux";
import moment from "moment";
import { Button, Form, Input, Row, Table, Pagination } from "@douyinfe/semi-ui";
import "../style.less";
import NvrModal from "../components/nvrModal";
import Setup from "../components/setup";
import SideSheets from "../components/sideSheet";

export const accessType = [
   { name: "萤石云平台摄像头", key: "yingshi" },
   { name: "NVR摄像头", key: "nvr" },
   { name: "IPC 网络摄像头", key: "ipc" },
   { name: "级联摄像头", key: "cascade" },
];

const NvrHeader = (props) => {
   const { dispatch, actions, user, loading, equipmentWarehouseNvr } = props;
   const { equipmentWarehouse } = actions;
   const [setup, setSetup] = useState(false);
   const [sideSheet, setSideSheet] = useState(false);
   const [setupp, setSetupp] = useState([]);
   const [venderList, setvenderList] = useState([]); //厂商信息
   const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息
   const [search, setearch] = useState({}); //搜索条件
   const [rowId, setRowId] = useState(); //表格数据id

   const api = useRef();
   const SETUPS = "setups";

   useEffect(() => {
      dispatch(actions.equipmentWarehouse.getVender()).then((res) => {
         setvenderList(res.payload.data);
         attribute(res.payload.data);
      });
      //初始化表格显示设置
      localStorage.getItem(SETUPS) == null
         ? localStorage.setItem(
            SETUPS,
            JSON.stringify(["manufactor", "passageway", "port", "state"])
         )
         : "";
      // ;
   }, []);
   useEffect(() => {
      equipmentGetNvr();
   }, [query, search]);

   function equipmentGetNvr () {
      dispatch(equipmentWarehouse.getNvr({ ...query, ...search }));
   }
   const columns = [
      {
         title: "序号",
         render: (text, record, index) => {
            return index + 1;
         },
      },
      {
         title: "设备名称",
         dataIndex: "name",
         render: (text, r, index) => {
            return (
               <div>
                  <span
                     style={{
                        backgroundColor: r.avatarBg,
                        width: "10px",
                        height: "10px",
                        borderRadius: "50%",
                        display: "inline-block",
                        marginRight: "10px",
                     }}
                  />
                  {r.name}
               </div>
            );
         },
      },
      {
         title: "SIP地址",
         dataIndex: "owner",
      },
      {
         title: "操作",
         width: "20%",
         dataIndex: "",
         render: (_, row) => {
            return (
               <div style={{ display: "flex" }}>
                  <Button theme="borderless">
                     <NvrModal
                        nvrData={row}
                        modalName="revise"
                        venderList={venderList}
                        close={() => {
                           equipmentGetNvr();
                        }}
                     />
                  </Button>
                  <Button
                     theme="borderless"
                     onClick={() => {
                        setSideSheet(true);
                        setRowId(row.id);
                     }}
                  >
                     查看
                  </Button>
                  <Button
                     theme="borderless"
                     onClick={() => {
                        dispatch(equipmentWarehouse.delNvr(row.id));
                        equipmentGetNvr();
                     }}
                  >
                     删除
                  </Button>
               </div>
            );
         },
      },
   ];

   //获取表格属性设置
   function attribute (data) {
      const arr = localStorage.getItem(SETUPS)
         ? JSON.parse(localStorage.getItem(SETUPS))
         : [];

      const column = [
         {
            title: "设备厂家",
            dataIndex: "venderId",
            key: "manufactor",
            render: (_, r, index) => {
               let manufactorName = data.find((item) => item.id == r.venderId);
               return manufactorName ? manufactorName.name : "";
            },
         },
         {
            title: "添加账号",
            dataIndex: "createUserId",
            key: "accountNumber",
         },
         {
            title: "通道数",
            dataIndex: "channelCount",
            key: "passageway",
         },
         {
            title: "端口",
            dataIndex: "port",
            key: "port",
         },
         {
            title: "设备状态",
            dataIndex: "size",
            key: "state",
         },
         {
            title: "创建时间",
            dataIndex: "createTime",
            key: "time",
            render: (text, r, index) => {
               return moment(r.createTime).format("YYYY-MM-DD HH:MM:SS");
            },
         },
         {
            title: "项目名称",
            dataIndex: "",
            key: "name",
         },
         {
            title: "pcode",
            dataIndex: "",
            key: "pcode",
         },
         {
            title: "结构物",
            dataIndex: "",
            key: "structure",
         },
      ];
      for (let i = 0; i < arr.length; i++) {
         let colum = column.filter((item) => {
            return item.key === arr[i];
         });
         columns.splice(i + 2, 0, colum[0]);
      }
      setSetupp(columns);
   }

   //条件赛选样式
   const screen = {
      width: 193,
      marginRight: 20,
      marginBottom: 16,
      color: "rgba(0, 0, 0, 0.65)",
   };

   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,
                     paddingTop: 15,
                     marginLeft: 21,
                  }}
               >
                  NVR管理
               </div>
               <div
                  style={{
                     fontSize: 14,
                     paddingTop: 18,
                     marginLeft: 20,
                  }}
               >
                  对NVR（网络硬盘录像机）设备节点的管理
               </div>
               <div
                  style={{
                     fontSize: 14,
                     marginTop: 28,
                     marginLeft: 21,
                     width: 89,
                     height: 32,
                     lineHeight: "32px",
                     textAlign: "center",
                     backgroundColor: "#D9EAFF",
                     color: "#1859C1",
                     cursor: "pointer",
                  }}
               >
                  <NvrModal
                     modalName="add"
                     venderList={venderList}
                     close={() => {
                        equipmentGetNvr();
                     }}
                  />
               </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)}
                  // onValueChange={values=>console.log(values)}
                  getFormApi={(formApi) => (api.current = formApi)}
                  layout="horizontal"
                  style={{ position: "relative", width: "100%", flex: 1 }}
               >
                  <Form.Input
                     label="设备搜索："
                     field="keyword"
                     placeholder="请输入设备名称"
                     labelPosition="left"
                     style={screen}
                  />
                  <Form.Select
                     label="厂家筛选："
                     labelPosition="left"
                     style={screen}
                     field="venderId"
                     placeholder="全部"
                     showClear
                  >
                     {venderList.map((item) => {
                        return (
                           <Form.Select.Option key={item.id} value={item.id}>
                              {item.name}
                           </Form.Select.Option>
                        );
                     })}
                  </Form.Select>
                  <Form.Select
                     label="状态查询："
                     labelPosition="left"
                     field="type2"
                     style={screen}
                     placeholder="全部"
                     showClear
                  >
                     <Form.Select.Option value="yes">在线</Form.Select.Option>
                     <Form.Select.Option value="no">离线</Form.Select.Option>
                  </Form.Select>
                  {/* <Form.Select
              label="关联项目："
              labelPosition="left"
              field="type3"
              style={screen}
              placeholder="全部"
               showClear
            >
              <Form.Select.Option value="智慧环保">
                飞尚科技1
              </Form.Select.Option>
              <Form.Select.Option value="智慧水务">
                飞尚科技2
              </Form.Select.Option>
            </Form.Select> */}
               </Form>
               <div
                  style={{
                     width: 150,
                     display: "flex",
                     justifyContent: "flex-end",
                     alignItems: "flex-end",
                  }}
               >
                  <Button
                     theme="solid"
                     type="primary"
                     style={{
                        width: 65,
                        height: 30,
                        borderRadius: 3,
                        marginBottom: 20,
                        marginRight: 20,
                     }}
                     onClick={() => {
                        api.current.validate().then((v) => {
                           setearch(v);
                        });
                        equipmentGetNvr();
                     }}
                  >
                     搜素
                  </Button>
                  <Button
                     theme="light"
                     type="primary"
                     style={{
                        width: 65,
                        height: 30,
                        backGround: "#FFFFFF",
                        borderRadius: 3,
                        border: "1px solid #D9D9D9",
                        marginBottom: 20,
                     }}
                  >
                     重置
                  </Button>
               </div>
            </div>
         </div>
         <div style={{ background: "#FFFFFF", marginTop: 5 }}>
            <div
               style={{
                  width: "100%",
                  display: "flex",
                  justifyContent: "space-between",
                  padding: "13px 20px",
               }}
            >
               <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>
               <div>
                  <Button
                     style={{
                        width: 32,
                        height: 32,
                        background: "#D9D9D9",
                        borderadius: 3,
                        marginRight: 20,
                     }}
                     type="primary"
                     key="primary"
                     onClick={() => {
                        setSetup(true);
                     }}
                  >
                     <img
                        src="/assets/images/background/setup.png"
                        alt="设置"
                        style={{ width: 18, height: 18 }}
                     />
                  </Button>
                  <Button
                     style={{
                        width: 65,
                        height: 32,
                        background: "#FFFFFF",
                        borderRadius: 3,
                        border: "1px solid #1859C1",
                     }}
                  >
                     导出
                  </Button>
               </div>
            </div>
            <Table
               columns={setupp.filter(s => s)}
               dataSource={equipmentWarehouseNvr.data}
               bordered={false}
               empty="暂无数据"
               style={{
                  padding: "0px 20px",
               }}
               pagination={false}
            />
            <div
               style={{
                  display: "flex",
                  justifyContent: "flex-end",
                  padding: "20px 20px",
               }}
            >
               <span style={{ lineHeight: "30px" }}>
                  共{equipmentWarehouseNvr.total}个设备
               </span>
               <Pagination
                  total={equipmentWarehouseNvr.total}
                  showSizeChanger
                  currentPage={query.page + 1}
                  pageSizeOpts={[10, 20, 30, 40]}
                  onChange={(currentPage, pageSize) => {
                     setQuery({ limit: pageSize, page: currentPage - 1 });
                  }}
               />
            </div>

            {setup ? (
               <Setup
                  visible={true}
                  SETUPS={SETUPS}
                  close={() => {
                     setSetup(false);
                     attribute(venderList);
                  }}
               />
            ) : (
               ""
            )}

            {sideSheet ? (
               <SideSheets
                  visible={true}
                  rowId={rowId}
                  accessType={accessType}
                  venderList={venderList}
                  close={() => {
                     setSideSheet(false);
                  }}
               />
            ) : (
               []
            )}
         </div>
      </>
   );
};


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

export default connect(mapStateToProps)(NvrHeader);
