//高发
import CountNum from '@/components/CountNum';
import EmptySpace from '@/components/EmptySpace';
import { Flex, Progress, Space } from 'antd';
import { ProgressProps } from 'antd/lib';
import classNames from 'classnames';
import { CSSProperties, FunctionComponent } from 'react';
import styles from './index.less';
interface HignLineProps {
  data: API.TopLineDto[];
  strokeColor: ProgressProps['strokeColor']; //颜色
  fieldNames?: any; //自定义name、value、percent 的字段
}
const HignLine: FunctionComponent<HignLineProps> = (props) => {
  let { data, fieldNames, strokeColor } = props;
  fieldNames &&
    data?.forEach((item: any) => {
      //格式转换
      item['name'] = item[fieldNames['name']] ?? item['name'];
      item['value'] = item[fieldNames['value']] ?? item['value'];
      item['percent'] = item[fieldNames['percent']] ?? item['percent'];
    });

  const countStyle: Record<string, CSSProperties> = {
    valueStyle: {
      color: '#fff',
      fontSize: '18px',
      fontFamily: 'D-DIN',
    },
    unitStyle: {
      color: '#CBEDFF',
      fontSize: '16px',
      margin: '0 0 2px 4px',
    },
  };
  return (
    <div style={{ height: '400px', width: '100%' }}>
      {data.length < 1 && <EmptySpace describe="暂无数据" />}
      {data?.slice(0, 3)?.map((it, index) => (
        <Flex
          key={index}
          className={styles.lineWrap}
          align="center"
          gap={20}
          justify="space-between"
        >
          <span className={classNames(styles.labelName, 'textellipsis')}>
            {it.name}
          </span>
          <Progress
            percent={Number(it.percent)}
            size={['100%', 16]}
            strokeColor={strokeColor}
            trailColor="#204b7a"
            style={{ width: '100%', flex: 1, margin: '0 10px' }}
            status="active"
            showInfo={false}
          />
          <Space size="middle">
            <CountNum unit={'件'} value={it.value} {...countStyle} />
            <CountNum
              unit={'%'}
              value={it.percent}
              {...countStyle}
              style={{ width: '60px' }}
            />
          </Space>
        </Flex>
      ))}
    </div>
  );
};
export default HignLine;
