import TabsContent from '@/components/TabsContent';
import ThresholdDetail from '@/components/ThresholdDetail';
import { UnityAction } from '@/utils/utils';
import { connect } from '@umijs/max';
import { Spin, Table, Tabs } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import styles from './DeviceAnalysis.less';
const { TabPane } = Tabs;

const DeviceAnalysis = (props) => {
  const Status = [
    { name: '异常', type: '0', data: [] },
    { name: '全部', type: '1 ', data: [] },
  ];

  const { loading, autoReport } = props;
  const [selectedRowKeys, setSelectedRowKeys] = useState();
  const [tab, setTab] = useState('1');

  const columns = [
    {
      title: '设备名称',
      render: (record) => (
        <div>
          {record.DeviceName}({record.DeviceCode})
        </div>
      ),
    },
    {
      title: '巡检项',
      width: '14%',
      dataIndex: 'TemplateItem',
      render: (TemplateItem) => <div>{TemplateItem.Name}</div>,
    },
    {
      title: '设定值范围',
      width: '40%',
      render: (record) => (
        <ThresholdDetail
          current={record.Value || 0}
          data={record || {}}
          // onClick={() => onClickThreshold(record)}
        />
      ),
    },
    {
      title: '状态',
      width: '14%',
      dataIndex: 'Status',
      render: (Status) => {
        switch (Status) {
          case -1:
          case 0:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#12CEB3' }}
                ></i>
                正常
              </div>
            );
          case 1:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#FE5850' }}
                ></i>
                异常
              </div>
            );
          case 2:
            return (
              <div>
                <i
                  className={styles.iconStatus}
                  style={{ background: '#FFE26D' }}
                ></i>
                警告
              </div>
            );
        }
      },
    },
  ];

  useEffect(() => {
    UnityAction.on('SynDev', selectedItem);
    return () => UnityAction.off('SynDev', selectedItem);
  }, [data, tab]);

  const selectedItem = (e) => {
    setSelectedRowKeys(e);
    console.log(data);
    const itemIndex = data?.findIndex((item) => item.type == tab);
    const item = data[itemIndex]?.data?.find((item) => item.DeviceCode == e);
    if (item) {
      const dom = document.querySelector(`tr[data-row-key="${item.Id}"]`);
      if (dom) {
        let v = document.getElementsByClassName('ant-table-body')[itemIndex];
        v.scrollTop = dom.offsetTop;
      }
    }
  };

  const data = useMemo(() => {
    return [
      { name: '异常', type: '1', data: autoReport?.extendWarningData },
      { name: '全部', type: '2', data: autoReport?.extendWarningAllData },
    ];
  }, [autoReport]);

  const onTabChange = (tab) => {
    setTab(tab);
    setSelectedRowKeys(null);
    UnityAction.sendMsg('DevAnalysisType', tab);
  };

  // const rowSelection = {
  //   type: 'radio',
  //   selectedRowKeys,
  //   onChange: (selectedRowKeys, selectedRows) => {
  //     setSelectedRowKeys(selectedRowKeys);
  //     UnityAction.sendMsg('SynDev', selectedRows[0].DeviceCode);
  //   },
  // };

  const onSelectRow = (record, index) => {
    // const selectedList = [...selectedRowKeys];
    // if (selectedList[0] === index) return;
    // selectedList[0] = index;
    setSelectedRowKeys(index);
    UnityAction.sendMsg('SynDev', record.DeviceCode);
  };

  const setRowClassName = (record, index) => {
    if (!selectedRowKeys && selectedRowKeys !== 0) return;
    if (selectedRowKeys == index || selectedRowKeys == record.DeviceCode) {
      return styles.tableSelect;
    }
  };

  return (
    <Spin spinning={loading}>
      <div className="card-box">
        <TabsContent
          small={true}
          center={false}
          defaultActiveKey="1"
          items={data?.map((item) => {
            return {
              label: `${item.name}(${item.data?.length || 0})`,
              key: item.type,
              children: (
                <Table
                  dataSource={item.data}
                  columns={columns}
                  rowKey="Id"
                  rowClassName={setRowClassName}
                  onRow={(record, index) => ({
                    onClick: () => onSelectRow(record, index),
                  })}
                  pagination={false}
                  scroll={{ y: document.body.clientHeight - 730 }}
                />
              ),
            };
          })}
          onChange={onTabChange}
        />
      </div>
    </Spin>
  );
};
export default connect(({ eqSelfInspection, loading }) => ({
  loading: loading.effects['eqSelfInspection/getPatrolDataById'],
  autoReport: eqSelfInspection.autoReport,
}))(DeviceAnalysis);
