import services from '@/services';
import { getCqiStatusStyle } from '@/utils/ui';
import { useRequest } from 'ahooks';
import LineCharts from '../LineCharts';
import styles from './index.less';

export default ({
  data,
  lineData,
}: {
  data: any;
  lineData?: any[];
}) => {
  const { data: list, loading } = useRequest(() =>
    services.Physicalsign.getIndexSystem(data.indexId),
  );

  return (
    <div className={styles.container}>
      <div className={styles.topContent}>
        <div className={styles.icon}>
          <img
            src={
              data?.icon ||
              require('@/assets/images/SecurityServiceOverview/safetyIcon.png')
            }
            alt=""
            className={styles.img}
          />
        </div>

        <div
          className={styles.count}
          title={data?.qualitySign as string}
          style={{ color: 'white' }}
        >
          {list?.data?.percentageScore}
        </div>
        <div className={styles.name}>{list?.data?.name}</div>
        <div
          className={styles.tag}
          style={{
            backgroundColor: getCqiStatusStyle(list?.data?.percentageScore)
              ?.background,
            color: getCqiStatusStyle(list?.data?.percentageScore)?.color,
          }}
        >
          {data?.statusDescription}
        </div>
        <div style={{ marginTop: 20 }}>
          <LineCharts
            data={lineData ?? [10, 90, 70, 80, 20, 80]}
            style={{ width: 200, height: 100 }}
            lineColor={ getCqiStatusStyle(list?.data?.percentageScore)?.color}
            colorStops={[
              {
                offset: 1,
                color: getCqiStatusStyle(list?.data?.percentageScore)
                  ?.background, // 0% 处的颜色
              },

              {
                offset: 0,
                color: 'rgba(87, 239, 229, 0)', // 100% 处的颜色
              },
            ]}
          />
        </div>
      </div>
    </div>
  );
};
