import { queryMembraneList } from '@/services/SmartOps';
import { UnityAction } from '@/utils/utils';
import { RightOutlined } from '@ant-design/icons';
import { history, useParams, useRequest } from '@umijs/max';
import styles from './PredictionAnalysis.less';

const PredictionAnalysis = () => {
  const { projectId } = useParams();

  const { data: deviceList } = useRequest(queryMembraneList, {
    defaultParams: [{ project_id: projectId, type: 'uf' }],
    formatResult: (result) => {
      console.log(result.data.list);
      if (result?.data?.list) {
        return result.data.list;
      }
    },
  });

  const toDetail = (code) => {
    const devs = {};
    deviceList.forEach((item) => {
      devs[item.device_code] = 0;
    });
    const msg = {
      SysName: '超滤工艺单元',
      SysDevs: devs,
    };
    UnityAction.sendMsg('ProcessPredictDetail', JSON.stringify(msg));

    history.push(`/smart-ops/prediction/${projectId}?code=${code}`);
  };

  return (
    <>
      <div className="card-box" style={{ padding: '0.2rem' }}>
        <div className={styles.title}>超滤工艺单元</div>
        {deviceList?.map((item, index) => {
          return (
            <div
              key={item.device_code}
              className={styles.itemContainer}
              onClick={() => {
                toDetail(item.device_code);
              }}
            >
              <div>{`${item.device_name}（${item.device_code}）`}</div>
              <div className={styles.toDetail}>
                预测分析
                <RightOutlined
                  style={{ marginLeft: '0.1rem', color: 'gray' }}
                />
              </div>
            </div>
          );
        })}
      </div>
    </>
  );
};

export default PredictionAnalysis;