import cqi1 from '@/assets/images/urbanSituation/cqi1.png';
import LineCharts from '@/components/LineCharts';
import services from '@/services';
import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui';
import { useEffect, useState } from 'react';
import styles from './index.less';

interface SignLeftProps {
  data: any;
  indexTotal: number; //指标项
}

const SignLeft = (props: SignLeftProps) => {
  const { data, indexTotal } = props;

  const [chartsData, setChartsData] = useState([]);

  const getData = () => {
    const params = {
      indexType: '1',
      latest: false,
      indexId: data.id,
      objectId: 1,
    };
    services.Physicalsign.getTzzsPhysicalSignIndexInstanceData(params).then(
      (res) => {
        if (res.code === 200) {
          console.log(res.data);
          setChartsData(res.data);
        }
      },
    );
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.topContent}>
        <img src={cqi1} alt="" className={styles.icon} />
        <div className={styles.count} title={data?.value as string}>
          {data?.value}
        </div>
        <div className={styles.name}>{data?.name}</div>
        <div
          className={styles.tag}
          style={{ ...getCqiStatusStyle(data?.value) }}
        >
          {getCqiStatusTexts(data?.value)?.text}
        </div>
        <div style={{ marginTop: 20 }}>
          <LineCharts
            data={
              chartsData?.length
                ? chartsData?.map((item) => item.qualitySign)
                : [
                    30, 40, 50, 60, 50, 40, 30, 50, 30, 40, 50, 60, 50, 40, 30,
                    100,
                  ]
            }
            style={{ width: 200, height: 100 }}
            lineColor="#57EFE5"
            smooth={false}
            colorStops={[
              {
                offset: 0,
                color: 'rgba(87, 239, 229, 0)', // 0% 处的颜色
              },

              {
                offset: 1,
                color: 'rgba(87, 239, 229, 0.36)', // 100% 处的颜色
              },
            ]}
            grid={{
              left: '0%', // 左边距
              right: '0', // 右边距
              top: '10%', // 上边距
              bottom: '10%', // 下边距
            }}
          />
        </div>
      </div>
      <div className={styles.bottomContent}>
        <div>
          <img
            src={require('@/assets/images/urbanSituation/sign3.png')}
            alt=""
            className={styles.icon}
          />
          <span className={styles.text}>指标</span>
        </div>
        <div>
          <span className={styles.count}>{indexTotal || 10}</span>
          <span className={styles.text} style={{ verticalAlign: '2px' }}>
            项
          </span>
        </div>
      </div>
    </div>
  );
};

export default SignLeft;
