import aq from '@/assets/images/urbanSituation/aq.svg';
import zj from '@/assets/images/urbanSituation/zj.svg';
import yx from '@/assets/images/urbanSituation/yx.svg';
import bm from '@/assets/images/urbanSituation/bm.svg';
import mg from '@/assets/images/urbanSituation/mg.svg';
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; //指标项
}

// why用名字，because name 改变的可能性更小，id变得可能性更大
const iconMap: any = {
  '安全': aq,
  '整洁': zj,
  '有序': yx,
  '便民': bm,
  '美观': mg,
  'CQI': mg
}

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

  const [chartsData, setChartsData] = useState<any>([]);

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

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

  return (
    <div className={styles.container}>
      <div className={styles.topContent}>
        <img src={iconMap[data?.name]} 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), color: '#fff' }}
        >
          {getCqiStatusTexts(data?.value)?.text}
        </div>
        <div style={{ marginTop: 20 }}>
          <LineCharts
            data={
              chartsData?.length
                ? chartsData?.map((item: any) => {
                  return {
                    name: item?.time,
                    value: item?.qualitySign,
                  };
                })
                : []
            }
            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;
