index.js

/*
 * @Title:
 * @Author: hongmye
 * @Date: 2023-12-26 18:34:42
 */
import React, { useMemo, useEffect, useState, memo } from 'react';
import { Tooltip, message } from 'antd';

import { schemeData } from '../configData';

import styles from './index.less';
let timer;
const LeftItem = props => {
  const { selectKey, onChangeScheme, handToProduct, productData } = props;
  const handlePage = item => {
    const row = productData.find(p => p['产品类型'] === item.title);
    if (row?.['产品地址']) {
      if (!row['产品地址'].includes('https')) return message.warning('产品地址配置错误，请联系管理人员');

      handToProduct(row['产品地址'], row['产品名称'], row['产品类型']);
    } else {
      return message.warning('未配置产品地址，请联系管理人员');
    }
  };
  const onMouseEnter = (item, index) => {
    if (timer) {
      timer && clearTimeout(timer);
    }
    timer = setTimeout(() => {
      onChangeScheme && onChangeScheme(item, index);
    }, 500);
  };
  const onMouseLeave = (item, index) => {
    timer && clearTimeout(timer);
  };
  useEffect(() => {}, []);
  return (
    <div className={styles.left_item}>
      <div className={styles.l_title_wrap}>
        <div className={styles.l_title_sub}>熊猫智慧水务</div>
        <div className={styles.l_title}>全行业软硬件系统解决方案：</div>
      </div>
      <div className={styles.l_list}>
        {schemeData.map((item, index) => (
          <div
            className={styles.l_list_item}
            key={item.title}
            type={item.title}
            selectType={selectKey === item.title ? 'select' : ''}
            onClick={event => handlePage(item)}
            onMouseEnter={() => onMouseEnter(item, index)}
            onMouseLeave={() => onMouseLeave(item, index)}
          >
            <div className={styles.l_list_item_title}>- {item.title} -</div>
            <div className={styles.l_list_item_tip} />
          </div>
        ))}
      </div>
    </div>
  );
};

export default memo(LeftItem);