import React, { useState, useRef, useEffect } from 'react';
import { Button, message, Popconfirm, Spin, Tabs, Tree} from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import { deviceList, getplaceareaList, deleteDevice } from './service';
import '@/assets/ld_style.less';
import { getURLInformation, isNotEmpty } from '@/utils/CommonUtils';
import ProCard from "@ant-design/pro-card";
import DeviceForm from './DeviceForm';


const deviceTypeEnum = {
  'resource_door': { text: '门禁设备' },
  'resource_camera': { text: '监控设备' },
  'resource_nvr': { text: 'nvr' },
  'resource_encodeDevice': { text: '编码设备' },
  'resource_oneMachine_face': { text: '人脸一体机' },
  'resource_oneMachine_card': { text: '人证一体机' },

}
const deviceStatusEnum = {
  'online_0': { text: '离线' },
  'online_1': { text: '在线' },
  'online_9': { text: '无此设备' },
}
const DeviceManage: React.FC<{}> = () => {
  const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
  const [treeData, setTreeData] = useState<any>();
  const [treeId, setTreeId] = useState<any>();
  const [updateVisible, setUpdateVisible] = useState<boolean>(false)
  const [type, setType] = useState<any>();// 状态 编辑or 查看
  const [deviceId, setDeviceId] = useState<any>("");//设备id
  const [spin, spinSet] = useState<boolean>(false);//加载遮罩
  const [updateChange, setUpdateChange] = useState<string>('')

  /*拉取数据*/
  useEffect(() => {
    getplaceareaList().then((res: { code: number; data: any[] | undefined; }) => {
      if (res.code == 200) {
        let data: any = [];
        if (res.data != undefined) {
          res.data.map((item1: any, index: any) => {
            const title1 = item1.placeName;
            const key1 = item1.id;
            let children1: any = [];
            if (item1.roomList != undefined) {
                  const children = item1.roomList.map((item: any, index: any) => {
                  const title2 = item.areaName;
                  const key2 = item.id;
                  const obj = {
                      placeId:item1.platformList[0].placeId,
                      placeName: item1.placeName,
                      areaId: item.id,
                      areaName: item.areaName,
                      platformId: item1.platformList[0].platformId,
                      platformName: item1.platformList[0].platformName,
                  };
                  return { title: title2, key: key2, obj: obj}
              });
              children1 = children;
            }
            const first = { title: title1, key: key1, children: children1 }
            data.push(first);
          });
        }
        setTreeData(data);
      }
    })
  }, []);

  const toAdd = async (props?: any) => {
    // spinSet(true);
    if(currentNodeRef?.current){
      setUpdateChange('新增设备');
      setType("new");
      setUpdateVisible(true);
    }else{
      message.error('请在评标区域下新增设备');
    }
  }
  const toEdit = (dId: String) => {
    setUpdateChange('修改设备');
    console.log(dId)
    setDeviceId(dId)
    setType("edit");
    setUpdateVisible(true);
  }

  const toRead = (props: any) => {
    setUpdateChange('查看设备');
    setDeviceId(props.id)
    setType("read");
    setUpdateVisible(true);
  }

  const toDelete = async (id: string) => {
    const hide = message.loading('正在删除');
    try {
      const success = await deleteDevice(id).then((res) => {
        return res.success
      });
      hide();
      if (success) {
        message.success('删除成功');
      }
    } catch (error) {
      hide();
      message.error('删除失败请重试！');
      checkRelationRef.current?.reload();
    }
  }

  /**
   *  设备管理
   * @param record
   */

  const current = getURLInformation('current');
  //列表页loading
  const [spinLoading, setSpinLoading] = useState<boolean>(false);

  const currentNodeRef = useRef<any>();

  const onSelect = (selectedKeys: any, info: any) => {
    selectedKeys.length == 0 ? setTreeId(null) : setTreeId(selectedKeys[0])
    if(info.node?.obj){
      currentNodeRef.current = info.node?.obj;
    }
  }
  const columns: any[] = [
    //设备管理

    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      search: false,
      width: '3%',
    },
    {
      title: '评标场所名称',
      dataIndex: 'placeName',
      width: '10%',
      search: false,
    },
    {
      title: '评标区域名称',
      dataIndex: 'areaName',
      width: '10%',
      search: false,
    },
    {
      title: '设备类型',
      dataIndex: 'deviceType',
      width: '10%',
      valueType: 'select',
      valueEnum: deviceTypeEnum,
      search: false,
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
      search: true,
      width: '10%',
    },
    {
      title: '设备标识',
      dataIndex: 'deviceCode',
      search: true,
      width: '10%',
    },

    {
      title: '网络IP',
      dataIndex: 'deviceManagementIp',
      search: true,
      width: '10%',
    },
    {
      title: '设备状态',
      dataIndex: 'deviceStatus',
      width: '10%',
      valueType: 'select',
      valueEnum: deviceStatusEnum,
      search: true,
    },

    {
      title: '操作',
      width: '7%',
      search: false,
      render: (text: any, record: any) => {
        return (
          <>
            <Button type="text" onClick={() => {toEdit(record.id)}} danger>
              编辑
            </Button>
            <Popconfirm
                placement="topRight"
                title={"确定删除么？"}
                onConfirm={async () => {
                  spinSet(true)
                  await toDelete(record.id);
                  checkRelationRef.current?.reload();
                  spinSet(false)
                }}
                okText="确定"
                cancelText="取消"
              >
                <Button type='text' >删除</Button>
              </Popconfirm>
          </>
        );
      },
    },
  ];
  
  return (
    <div style={{ padding: '0px 24px' }}>
      <Spin spinning={spin}>
    <ProCard  split="vertical" bordered headerBordered>
        <ProCard colSpan="300px">
            <h3 style={{fontSize: 'large', fontWeight: 'bold'}}>评标场所设备管理</h3>
            {treeData == undefined ? null : (
              <Tree
                defaultExpandAll
                onSelect={onSelect}
                treeData={treeData}
              />
            )}
        </ProCard>

    
      <ProCard bodyStyle={{ width: "100%" }} >
        <ProTable
                actionRef={checkRelationRef}
                className="proSearch"
                columns={columns}
                params={{ treeId: treeId }}
                size="small"
                
                request={async (params) =>
                  await deviceList(params).then((res) => {
                    if (res.code == 200) {
                      let data = res.data;
                      return Promise.resolve({
                        data: data.records,
                        success: res.success,
                        total: res.data.total,
                        current: res.data.current,
                      });
                    }
                    return Promise.resolve({
                      data: [],
                      success: false,
                      total: 0,
                      current: 1,
                    });
                  })
                }
                search={{
                  filterType: 'query',
                  optionRender: (searchConfig: any, { form }) => {
                    return [
                      <Button
                        key="searchText"
                        type="primary"
                        onClick={() => {
                          form?.submit();
                        }}
                      >
                        {searchConfig?.searchText}
                      </Button>,
                      <Button
                        key="resetText"
                        onClick={() => {
                          form?.resetFields();
                          form?.setFieldsValue({
                            current: 1,
                          });
                          form?.submit();
                        }}
                      >
                        {searchConfig?.resetText}
                      </Button>,
                      <Button key="toCreate" 
                        type="primary" onClick={() => toAdd()}>
                        新建
                      </Button>,
                    ];
                  },
                }}
                pagination={{
                  defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
                  defaultPageSize: 10,
                  showSizeChanger: false,
                }} //默认显示条数
                toolBarRender={false}
              />
      </ProCard>
    </ProCard>
    {updateVisible ? (
              <DeviceForm key={Math.random()} titleName={updateChange}
          type={type} deviceId={deviceId} deviceRel={currentNodeRef?.current} reload={()=>{checkRelationRef?.current?.reload();}} status={'2'} onCancel={() => setUpdateVisible(false)}
          modalVisible={updateVisible} tpId={''} />
            ) : null}
    </Spin>
    </div>
            
  );
};
export default DeviceManage