import s1 from '@/assets/images/sign/s1.png';
import s2 from '@/assets/images/sign/s2.png';
import s3 from '@/assets/images/sign/s3.png';
import s4 from '@/assets/images/sign/s4.png';
import s5 from '@/assets/images/sign/s5.png';
import s6 from '@/assets/images/sign/s6.png';
import s1_a from '@/assets/images/sign/s1_a.png';
import s2_a from '@/assets/images/sign/s2_a.png';
import s3_a from '@/assets/images/sign/s3_a.png';
import s4_a from '@/assets/images/sign/s4_a.png';
import s5_a from '@/assets/images/sign/s5_a.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;
