import * as React from 'react';
import './style.scss'; // 组件内容样式

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

export default class CustomCmp extends React.PureComponent<CustomCmpProps> {
  constructor(props: CustomCmpProps) {
    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="custom-cmp-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>
      </div>
    );
  }
}