/*
 * @Title:新产品动态
 * @Author: hongmye
 * @Date: 2023-12-26 18:34:42
 */
import React, { useMemo, useEffect, useState, memo } from 'react';
import { Tooltip, message } from 'antd';
import classNames from 'classnames';
import DataCarousel from '../DataCarousel';
import styles from './index.less';
const RightItem = props => {
  const { listData, handToProduct } = props;
  const toPage = row => {
    if (row.ID === 0) return;
    if (!row['产品地址']) return message.warning('未配置产品地址，请联系管理人员');
    if (!row['产品地址'].includes('https')) return message.warning('产品地址配置错误，请联系管理人员');

    if (row['产品地址'] && row['产品地址'].includes('https')) {
      handToProduct(row['产品地址'], row['产品名称']);
    }
  };
  const renderRow = (row, index) => {
    const rIndex = `r_${index % 6}`;

    return (
      <div
        className={styles.r_list_item}
        key={row['产品名称']}
        name={row.ID === 0 ? '敬请期待' : ''}
        rIndex={rIndex}
        type={row['产品地址'] && row['产品地址'].includes('https') ? 'jump' : 'none'}
        onClick={() => toPage(row)}
      >
        <div className={styles.r_list_item_title}>{row['产品名称']}</div>
        <div className={styles.r_list_item_tip} />
      </div>
    );
  };

  return (
    <div className={classNames(styles.right_item, 'right_item')}>
      <div className={styles.r_title_wrap}>
        <div className={styles.r_title_sub}>熊猫智慧水务</div>
        <div className={styles.r_title}>新产品动态：</div>
      </div>
      <div className={styles.r_list}>
        <DataCarousel
          gap={1}
          autoplay={5000}
          itemHeight={350}
          list={listData}
          renderItem={renderRow}
          config={{
            loop: false,
            slidesPerView: 6,
          }}
        />
      </div>
    </div>
  );
};
export default memo(RightItem);