import React, { useEffect, useState ,memo} from 'react';
import classNames from 'classnames';
import './index.scss';

export default memo((props) => {
  const { options, changeOptionId, type } = props;

  const [option, setOption] = useState({ code: "", dicItemName: "" ,dicItemCode:""});

  useEffect(() => {
    changeOptionId(option, type);
  }, [option])

  return (

      <div className="status-list">
        <div className={classNames({ "status-item-checked": option.dicItemCode === "", "status-item": true })} key={"all"} onClick={() => { setOption({ dicItemCode: "", dicItemName: "" }) }}>全部</div>
        {
          options.map((item) => {
            return <div className={classNames({ "status-item-checked": option.dicItemCode === item.dicItemCode, "status-item": true })} key={item.dicItemCode} onClick={() => { setOption(item) }} >{item.dicItemName}</div>
          })
        }
    </div>

  )
})