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


const deviceTypeEnum = {
  'resource_door': { text: '门禁点' },
  'resource_camera': { text: '监控点' },
  'resource_nvr': { text: 'nvr' },
  'resource_encodeDevice': { text: '编码设备' },
  'resource_oneMachine': { text: '门禁一体机' },

}
const deviceStatusEnum = {
  'online_0': { text: '离线' },
  'online_1': { text: '在线' },
  'online_9': { text: '无此设备' },
}
const Index: React.FC<{}> = () => {
  const checkRelationRef = useRef<ActionType>(); //操作数据后刷新列表
  const [treeData, setTreeData] = useState<any>();
  const [treeId, setTreeId] = useState<any>();

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

  /**
   *  设备管理
   * @param record
   */
  const cancel = async (record: any) => {};
  const current = getURLInformation('current');
  //列表页loading
  const [spinLoading, setSpinLoading] = useState<boolean>(false);
  //新建应答格式
  const toCreate = async () => {
    // const id = getProId();
    // const param = {
    //   tpId: id,
    //   roomType: getURLInformation('roomType'),
    // };
    // await getSectionList(param).then((res) => {
    //   if ((res.code = 200)) {
    //     if (res.data.length == 0) {
    //       message.info(`当前项目无可选${sectionName}，无法新增`);
    //     } else {
    //       setSectionList(res.data);
    //       setCreateVisible(true);
    //     }
    //   }
    // });
  };
  //编辑应答格式
  const toEdit = (values: any, param: any) => {
    
  };
  const onSelect = (selectedKeys: any, info: any) => {
    selectedKeys.length == 0 ? setTreeId(null) : setTreeId(selectedKeys[0])

    console.log(selectedKeys)
  }
  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={() => {}} danger>
              编辑
            </Button>
            <Button type="text" onClick={() => {}} danger>
              删除
            </Button>
          </>
        );
      },
    },
  ];
  
  return (
    <>
    <ProCard  split="vertical" bordered headerBordered>
        <ProCard colSpan="300px">
            {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="resetText"
                        onClick={() => {
                          form?.setFieldsValue({
                            current: 1,
                          });
                          form?.submit();
                        }}
                      >
                        {searchConfig?.resetText}
                      </Button>,
                      <Button
                        key="searchText"
                        type="primary"
                        onClick={() => {
                          form?.submit();
                        }}
                      >
                        {searchConfig?.searchText}
                      </Button>,
                       <Button key="toCreate" onClick={() => toCreate()}>
                       新建
                     </Button>,
                    ];
                  },
                }}
                pagination={{
                  defaultCurrent: isNotEmpty(current) ? Number(current) : 1,
                  defaultPageSize: 10,
                  showSizeChanger: false,
                }} //默认显示条数
                toolBarRender={false}
              />
      </ProCard>
    </ProCard>
    </>
  );
};
export default Index