import s1 from '@/assets/images/sign/s1.png';
import s1_a from '@/assets/images/sign/s1_a.png';
import s2 from '@/assets/images/sign/s2.png';
import s2_a from '@/assets/images/sign/s2_a.png';
import s3 from '@/assets/images/sign/s3.png';
import s3_a from '@/assets/images/sign/s3_a.png';
import s4 from '@/assets/images/sign/s4.png';
import s4_a from '@/assets/images/sign/s4_a.png';
import s5 from '@/assets/images/sign/s5.png';
import s5_a from '@/assets/images/sign/s5_a.png';
import s6 from '@/assets/images/sign/s6.png';
import s6_a from '@/assets/images/sign/s6_a.png';
import { useState } from 'react';
import styles from './index.less';
const SignArithmetic = () => {
  const [activeKey, setActiveKey] = useState('1');
  const items = [
    {
      key: '1',
      icon: s1,
      activeIcon: s1_a,
      name: '问 题 感 知',
      desc: '问题感知是指通过各类数据来源（如传感器、监控系统、反馈平台等）实时收集和识别城市中出现的各种问题。这个阶段的目标是快速发现和记录城市管理中的问题点，为后续步骤提供问题输入数据。',
    },
    {
      key: '2',
      icon: s2,
      activeIcon: s2_a,
      name: '特 征 解 析',
      desc: '在问题感知的基础上，特征解析将问题进行分类与特征提取。每个问题会根据其性质、影响范围、发生频率等因素进行细化分析，归类为具体的管理维度（如安全、整洁等）。这个阶段主要是将原始问题转化为可以量化和分析的特征数据。',
    },
    {
      key: '3',
      icon: s3,
      activeIcon: s3_a,
      name: '权 重 分 配',
      desc: '权重分配阶段根据不同问题的影响程度和重要性，为各类问题分配相应的权重。这个步骤考虑到问题对不同维度和区域的影响差异，确保关键问题在体征模型中得到足够的关注。权重分配的方式通常通过统计分析方法进行。',
    },
    {
      key: '4',
      icon: s4,
      activeIcon: s4_a,
      name: '数 据 聚 合',
      desc: '数据聚合阶段将不同问题的特征数据汇总和整合，形成区域和维度的整体数据。通过聚合，可以综合考虑各类问题的影响，形成城市各个区域和各个维度的体征评估。此过程需要注意数据的质量和时效性，确保最终聚合结果的准确性。',
    },
    {
      key: '5',
      icon: s5,
      activeIcon: s5_a,
      name: '体 征 建 模',
      desc: '体征建模是将所有已聚合的数据和分配的权重进行综合分析，建立反映城市管理质量的体征指数模型。体征模型将问题的影响和处理效果转化为可量化的指数，通常采用统计方法来进行建模，确保体征指数能够准确反映城市管理的整体状况。',
    },
    {
      key: '6',
      icon: s6,
      activeIcon: s6_a,
      name: '体 征 呈 现',
      desc: '体征呈现是最终将体征指数以易于理解的方式展现给决策者和管理人员。通过可视化界面、图表和颜色标识等方式，快速传达城市管理的健康状态和潜在问题。在这个阶段，体征指数将帮助各方做出快速决策，并推动城市管理的优化和调整。',
      hide: true,
    },
  ];
  return (
    <div className={styles.container}>
      <div className={styles.topContent}>
        {items.map((item) => {
          return (
            <div
              className={styles.content}
              key={item.key}
              style={
                item.key === activeKey
                  ? {
                      background:
                        'linear-gradient(0deg, #3F95FF 0%, #38BCEE 100%)',
                    }
                  : {}
              }
              onClick={() => {
                setActiveKey(item.key);
              }}
            >
              <img
                src={item.key === activeKey ? item.activeIcon : item.icon}
                alt=""
                className={styles.icon}
              />
              <div
                className={styles.name}
                style={item.key === activeKey ? { color: '#FFFFFF' } : {}}
              >
                {item.name}
              </div>
              {!item?.hide && (
                <img
                  src={require('@/assets/images/sign/arrows.png')}
                  alt=""
                  className={styles.arrows}
                />
              )}
            </div>
          );
        })}
      </div>

      <div className={styles.bottomContent}>
        <div className={styles.title}>
          <div className={styles.tag}>1</div>
          <span className={styles.name}>
            {items?.find((item) => item.key === activeKey)?.name}
          </span>
        </div>
        <div className={styles.desc}>
          {items?.find((item) => item.key === activeKey)?.desc}
        </div>
      </div>
    </div>
  );
};

export default SignArithmetic;
