import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
import { useHistory } from 'react-router-dom'

function Scenes() {
  const [activeTab, setActiveTab] = useState('全部')
  const [sceneData2, setSceneData2] = useState<{ title: string; img: string; code: string; region: string; }[]>([])
  const history = useHistory()
  const goToScene = (code: string) => {
    history.push(`/scene?code=${code}`)
  }
  useEffect(() => {
    if (activeTab === '全部') {
      setSceneData2(sceneData)
    } else {
      setSceneData2(sceneData.filter(item => item.region === activeTab))
    }
  }, [activeTab])
  return (
    <div className={styles.scenes}>
      <div className='top'>
        <div className='logo'><img src={require('@/assets/img/sceneLogo.png')} alt="" /></div>
        <div className="title">十大场景</div>
        <div className="tab">
          <div className="label">区域：</div>
          <div className={`tabItem ${activeTab === '全部' ? 'active' : ''}`} onClick={() => setActiveTab('全部')}>全部</div>
          <div className={`tabItem ${activeTab === '室内' ? 'active' : ''}`} onClick={() => setActiveTab('室内')}>室内</div>
          <div className={`tabItem ${activeTab === '室外' ? 'active' : ''}`} onClick={() => setActiveTab('室外')}>室外</div>
        </div>
      </div>
      <div className='content'>{sceneData2.map((item) => (
        <div className="sceneCard" key={item.code} onClick={() => goToScene(item.code)}>
          <div className="pic"><img src={item.img} alt="" /></div>
          <div className="text">{item.title}</div>
        </div>
      ))} </div>
    </div>
  )
}

const MemoScenes = React.memo(Scenes)

export default MemoScenes