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

export default memo((props) => {
  const { title, options, changeOptionId, type, size, defaultOption } = props;
  const [option, setOption] = useState(defaultOption || { code: "", dicItemName: "", dicItemCode: "" });

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

  return (

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

  )
})