import services from '@/services';
import { getState } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import styles from './index.less';
const StatusMap: Record<string, any> = {
  红色风险: {
    bg: require('@/assets/images/SecurityServiceOverview/IndustryWiget/orangeBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/redIcon.png'),
    name: '红色风险',
    color: 'rgb(241, 71, 73)',
  },
  橙色风险: {
    bg: require('@/assets/images/SecurityServiceOverview/IndustryWiget/orangeBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/orangeIcon.png'),
    name: '橙色风险',
    color: 'rgb(255, 103, 36)',
  },
  黄色风险: {
    bg: require('@/assets/images/SecurityServiceOverview/IndustryWiget/yellowBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/yellowIcon.png'),
    name: '黄色风险',
    color: 'rgb(255, 175, 74)',
  },
  一般风险: {
    bg: require('@/assets/images/SecurityServiceOverview/IndustryWiget/yibanBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/blueIcon.png'),
    name: '一般风险',
    color: 'rgb(70, 178, 255)',
  },
  正常: {
    bg: require('@/assets/images/SecurityServiceOverview/IndustryWiget/zhenchanBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/blueIcon.png'),
    name: '正常',
    color: 'rgb(70, 255, 210)',
  },
};
const StatusWiget = ({ industryCode }: { industryCode: string }) => {
  const { selectAreaId } = useModel('safetyAreaId');
  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjtj',
        data: {
          regionCode: selectAreaId,
          industryCode: industryCode,
        },
      }),
    {
      refreshDeps: [selectAreaId],
      ready:!!industryCode
    },
  );


  return (
    <div
      className={styles.container}
      style={{
        backgroundImage: `url(${
          StatusMap[
            getState(data?.data?.data?.records?.[0]?.yjzgdj?.risklevelid)
          ]?.bg
        })`,
        backgroundSize: '100% 100%',
        color:
          StatusMap[
            getState(data?.data?.data?.records?.[0]?.yjzgdj?.risklevelid)
          ]?.color,
      }}
    >
      <span>
        {
          StatusMap[
            getState(data?.data?.data?.records?.[0]?.yjzgdj?.risklevelid)
          ]?.name
        }
      </span>
      <div
        className={styles.dot}
        style={{
          background:
            StatusMap[
              getState(data?.data?.data?.records?.[0]?.yjzgdj?.risklevelid)
            ]?.color,
        }}
      ></div>
    </div>
  );
};

export default StatusWiget;
