import TableActionCard from '@/components/TableActionCard';
import IsConfirmAction from '@/components/TableActionCard/isConfirmAction';
import { resourceDeviceStatusEnums } from '@/enums/status';
import { PageContainer, ProCard, ProColumns, ProList } from '@ant-design/pro-components';
import { FormattedMessage } from '@umijs/max';
import { Button, Tag } from 'antd';
import React, { useState } from 'react';
import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable';
import DeviceStatusCard from './components/DeviceStatusCard';

/**
 * @交互说明
 * 1、列表分页展示分布式设备状态（分类查询）
 * 2、详情展示基础信息、日志
 * 3、重启设备
 */
const tabOptions: Record<string, any> = {
  allStatus: 90,
  storageWarn: 20,
  GPUWarn: 20,
  memoryWarn: 10,
  errorStatus: 20,
  codeError: 10,
  serveTimeOut: 20,
};

const ResourceDeviceStatus: React.FC = () => {
  const [detailModalOpen, setDetailModalOpen] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<Record<string, any>>({});
  //  动态设置每页数量
  const [currentPageSize, setCurrentPageSize] = useState<number>(15);

  const [activeTabIndex, setActiveTabIndex] = useState<number>(0);


  const dataTestList = [
    { status: '存储告警' },
    { status: 'GPU告警' },
    { status: '内存告警' },
    { status: 'CPU告警' },
    { status: '代码出错' },
    { status: '服务器超时' },
    { status: '存储告警' },
    { status: '代码出错' },
    { status: '存储告警' },
    { status: 'GPU告警' },
    { status: '内存告警' },
    { status: 'CPU告警' },
    { status: '代码出错' },
    { status: '服务器超时' },
    { status: '存储告警' },
    { status: '代码出错' },
  ].map((record, index) => {
    return {
      content: (
        <ProCard
          className="gn"
          style={{ backgroundColor: '#fafafa', margin: 0, padding: 0 }}
          bodyStyle={{ margin: 0, padding: 0 }}
        >
          <div
            style={{
              display: 'flex',
              alignItems: 'center',
              backgroundColor: 'rgba(21, 77, 221, 0.10)',
              padding: 12,
              justifyContent: 'space-between',
              borderBottom: '1px solid rgba(224, 224, 224, 1)',
            }}
          >
        
              <p
                className="gn single_line text_1 fw7"
                style={{ maxWidth: 'calc(100% - 12px)', padding: 0, margin: 0 }}
              >
                控制设备{index + 1}
              </p>
         
          </div>
          <DeviceStatusCard info={record}></DeviceStatusCard>{' '}
        </ProCard>
      ),
    };
  });

  return (
    <PageContainer>
      <ProList<any>
        className="gn"
        ghost={true}
        itemCardProps={{
          ghost: true,
          bodyStyle: { padding: 0, margin: 0 },
        }}
        headerTitle={
          <>
            <ProCard style={{padding: 0, margin: 0}} bodyStyle={{padding: 0, margin: 0}}>
              {Object.keys(tabOptions).map((item, index) => {
                // eslint-disable-next-line react/jsx-key
                return (
                  <Button
                    style={{ marginRight: 12, marginTop: 8 }}
                    type={activeTabIndex === index ? 'primary' : 'default'}
                    key={index}
                    onClick={() => {
                      setActiveTabIndex(index);
                    }}
                  >
                    {Object.keys(resourceDeviceStatusEnums).includes(item)
                      ? resourceDeviceStatusEnums[item].miniName
                      : ''}
                  {"("+tabOptions[item]+ ')'}
                  </Button>
                );
              })}
            </ProCard>
          </>
        }
        cardProps={{
          bodyStyle: {
            background: 'white',
            padding: '0px 16px 16px',
            borderRadius: 8,
          },
        }}
        pagination={{
          ...proTablePaginationOptions,
          pageSize: currentPageSize,
          onChange: (page, pageSize) => setCurrentPageSize(pageSize),
        }}
        showActions="hover"
        rowSelection={false}
        grid={{ gutter: 16, xs: 1, md: 3, lg: 4, xl: 5, xxl: 7 }}
        metas={{
          type: {
          
          },
          content: {
          },
          actions: {
            cardActionProps: 'extra',
          }
        }}
        request={async (params = {}, sort) => {
          const { current, ...rest } = params;
          const reqParams = {
            page: current,
            desc: false,
            orderKey: '',
            ...rest,
          };
          if (sort && Object.keys(sort).length) {
            reqParams.orderKey = Object.keys(sort)[0];
            let sort_select = sort[reqParams.orderKey];
            reqParams.desc = sort_select === 'descend';
          }
          // TODO 联调查询设备状态接口
          // let resps = await postDeviceGroupGetDeviceGroupList({ ...reqParams });
          let resp = {
            success: true,
            data: {
              list: dataTestList,
              total: 16,
              page: 1,
              pageSize: 16,
            },
          };
          return {
            data: resp.data.list,
            success: resp.success,
            total: resp.data.total,
            current: resp.data.page,
            pageSize: resp.data.pageSize,
          };
        }}
      />
    </PageContainer>
  );
};

export default ResourceDeviceStatus;
