import React, { useEffect, useState } from 'react';
import styles from './style/compCard.module.less';
import { compData } from '@/pages/componentMarket/test/data';
import { Card, Grid, Rate, Typography } from '@arco-design/web-react';

const { Row, Col } = Grid;

interface CompCardProps {
  componentClassify: string;
}

const CompCard: React.FC<CompCardProps> = ({ componentClassify }) => {
  const [componentClassifyData, setComponentClassifyData] = useState<any>([]);

  useEffect(() => {
    if (componentClassify === '全部') setComponentClassifyData(compData);
    else {
      const filterData = compData.filter(v => v.componentClassify === componentClassify);
      setComponentClassifyData(filterData || []);
    }
  }, [componentClassify]);

  return (
    <div className={styles['comp-card']}>
      <Row style={{ marginBottom: 16 }}>
        {componentClassifyData.map((v, i) => {
          return (
            <Col
              xs={12}
              sm={12}
              md={12}
              lg={6}
              xl={6}
              xxl={6}
              key={i}>
              <Card style={{ border: '1px solid #d9d9d9' }}>
                {/*左侧图片*/}
                <div className={styles['img-box']}>图片</div>
                {/*右侧数据*/}
                <div className={styles['info-box']}>
                  <div className={styles['info-title']}>{v.name}</div>
                  <div className={styles['info-author']}>{v.identifier}</div>
                  <div className={styles['info-score']}>
                    <div>组件评分：</div>
                    <Rate readonly allowHalf value={v.star < 0 ? 5 : v.star} />
                    <Typography.Text
                      style={{
                        margin: '0 5px'
                      }}
                    >
                      {v.star < 0 ? 5 : v.star}分
                    </Typography.Text>
                  </div>
                </div>
              </Card>
              <div className={styles['comp-card-footer']}>
                <div className={styles['comp-type']}>{v.componentClassify}</div>
                <div className={styles['comp-language']}>{v.deployType}</div>
              </div>
            </Col>
          );
        })}
      </Row>
    </div>
  );
};

export default CompCard;