import React, { useState, useEffect } from 'react';
import { Radio } from 'antd';
import styles from './index.less';

const RadioBox = props => {
  const {
    radioTitle,
    radioOptions,
    currentVal,
    currentIndex,
    callBack,
  } = props;
  useEffect(() => {}, []);
  // 选择时通过回调函数传回要改变数据的索引跟选中的值
  const onChange = e => {
    callBack(currentIndex, e.target.value);
  };
  return (
    <div className={styles.radioBox}>
      <div className={styles.radioTitle}>{radioTitle}:</div>
      <div className={styles.radioContent}>
        <Radio.Group value={currentVal}>
          {radioOptions.map((item, num) => (
            <Radio
              disabled={item.disabled}
              value={item.version}
              key={num}
              className={styles.radio}
              onClick={onChange}
            >
              {item.functionName + item.version}
            </Radio>
          ))}
        </Radio.Group>
      </div>
    </div>
  );
};

export default RadioBox;
