/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2024-12-16 11:34:53
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2024-12-16 14:11:05
 * @FilePath: /MediResourceManaSys/src/pages/qualificationMana/qualificationExperiedMana/tabs/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, FC } from 'react';
import './style.less';

interface FormTabsProps {
  value?: string; // 当前选中的值
  width?:number;
  onChange?: (value: string) => void; // 值变化的回调函数
}

const FormTabs: FC<FormTabsProps> = ({ value = 'time', onChange,width=80 }) => {
  const [activeTab, setActiveTab] = useState<string>(value);

  const handleTabChange = (tab: string) => {
    setActiveTab(tab);
    if (onChange) {
      onChange(tab); // 通知外部表单值更新
    }
  };

  return (
    <div className="form-tabs-container" style={{width:width}}>
      <div className="tab-buttons">
        <div
          className={`tab-button ${activeTab === 'time' ? 'active' : ''}`}
          onClick={() => handleTabChange('time')}
        >
          按授权时间
        </div>
        <div
          className={`tab-button ${activeTab === 'days' ? 'active' : ''}`}
          onClick={() => handleTabChange('days')}
        >
          按延期天数
        </div>
      </div>
    </div>
  );
};

export default FormTabs;
