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 = ({ status }: { status: string }) => {
  return (
    <div
      className={styles.container}
      style={{
        backgroundImage: `url(${StatusMap[status]?.bg})`,
        backgroundSize: '100% 100%',
        color:StatusMap[status]?.color
      }}
    >
        <span>{StatusMap[status]?.name}</span>
        <div className={styles.dot} style={{background:StatusMap[status]?.color}}>

        </div>
    </div>
  );
};

export default StatusWiget;
