import * as React from 'react';
import './style.scss'; // 组件内容样式
// @ts-ignore
// import ChartWidget from 'chart-widget'; // 另一个自定义组件导出的模块

interface InfoCardProps {
  title: string;
  backgroundImage: string;
  imgCount: number;
  commentCount: number;
  data?: any;
}

export default class InfoCard extends React.PureComponent<InfoCardProps> {
  constructor(props: InfoCardProps) {
    super(props);
    this.agreeDataFormat = this.agreeDataFormat.bind(this);
  }

  agreeDataFormat(agreeData: number) {
    if (agreeData && agreeData <= 9999) {
      return agreeData;
    }
    if (agreeData && agreeData > 9999) {
      return `${Math.floor(agreeData / 1000) / 10}w`;
    }
    return '';
  }

  render() {
    const { title, backgroundImage, imgCount, commentCount } = this.props;
    console.log('当前自定义组件：', this.props, this);

    const curBackgroundImage =
      backgroundImage ||
      'https://custom-widgets.bj.bcebos.com/amis-cmp-cli.jpg';
    return (
      <div className="info-card-container">
        <div className="news-title">
          {title ||
            '全场景智能业务管理系统，助力企业构建数字化客户管理平台，推动业务持续增长。'}
        </div>
        <div className="item-imgbox">
          <div
            className="news-img"
            style={{ backgroundImage: `url(${curBackgroundImage})` }}
          ></div>
          {imgCount > 0 && <div className="img-count">{imgCount}</div>}
        </div>
        <div className="news-info">
          <div className="left media-mark">Amis · 低代码平台</div>
          {commentCount && commentCount > 0 && (
            <div className="cmt-num right">
              {this.agreeDataFormat(commentCount)}评
            </div>
          )}
        </div>
        {/* <ChartWidget
          chartType="line"
          title="销售趋势"
          subtitle="2025年数据"
          width={800}
          height={400}
          mockData={{
            xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
            series: [
              {
                name: '销售额',
                data: [120, 200, 150, 80, 70, 110],
              },
            ],
          }}
        /> */}
      </div>
    );
  }
}
