MedicalWisdomCheckSys/src/components/MccsClickableTabs/index.tsx

/*
 * @Author: your name
 * @Date: 2021-09-15 18:38:41
 * @LastEditTime: 2021-09-30 11:08:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /MedicalWisdomCheckSys/src/components/MccsClickableTabs/index.tsx
 */



// import { Button } from 'antd';
import React,{useState,useEffect} from 'react'

import './index.less';

const MccsClickableTabs:React.FC<MccsClickableTabs.propsType> = (props)=>{

    const [list,setList] = useState<MccsClickableTabs.TabType[]>([]);
    const {tabClickHandle,clear,onChange,type='single'} = props;
    const [activedTab,setActivedTab] = useState<{label:string,value:any}>();
    const [disabled,setDisabled] = useState(false);

    const clickHandle = (item:MccsClickableTabs.TabType,supItem:{label:string,value:string|number})=>{

        if(!disabled){
            // console.log(item,type);
            if(type=='single'){
                tabClickHandle&&tabClickHandle(item);
                onChange?.({label:`${item.value}`,value:item.value});  //Form传递过来的onChange,设置表单值
                setActivedTab(supItem);
            }
            if(type=='multi'){
                tabClickHandle&&tabClickHandle(supItem?supItem:null);
                onChange?.({label:`${item.label}`,value:supItem});  //Form传递过来的onChange,设置表单值
                setActivedTab({label:item.label,value:supItem});
            }
        }
    }

    useEffect(()=>{
        // console.log('tabProps',props);
        const {data=[],value,clear,disabled} = props;
        setList(data);
        // console.log({props});
        disabled&&setDisabled(true);
        
        if(value){
            setActivedTab(value);
        }else{
            setActivedTab(type=='multi'?{label:'',value:{label:'',value:''}}:{label:'',value:''});
        }
        if(clear){
            setActivedTab(type=='multi'?{label:'',value:{label:'',value:''}}:{label:'',value:''});
        }
        
    },[props]);




    return (
        <div className={type=='multi'?'mutiwrap wrap':'wrap'}>
            {
                type=='single'&&(
                    <>
                        {
                        list.map((item,index)=>{
                                return (
                                    <div className={activedTab?.value==item.value?(disabled?'tab on disabled':'tab on'):disabled?'disabled tab':'tab'} key={index} onClick={()=>clickHandle(item,{label:'null',value:'null'})}>{item.label}</div>
                                )
                        })
                        }
                    </>    
                )
            }
            {
                type=='multi'&&(
                    <>
                        {
                        list.map((item,index)=>{
                                return (
                                    <div className='muti' key={index}>
                                        <div className='label'>{item.label}</div>
                                        <div className='valueWrap'>
                                              {
                                                 item.list&&item.list.map((val,i)=>{
                                                        return (
                                                            <div className={activedTab?.label==item.label&&activedTab.value.value==val.value?(disabled?'tab on disabled':'tab on'):disabled?'disabled tab':'tab'} key={i} onClick={()=>clickHandle(item,val)}>{val.label}</div>
                                                        )
                                                 }) 
                                              }
                                        </div>
                                    </div>
                                )
                        })
                        }
                    </>    
                )
            }
            
        </div>
    )
}

export default MccsClickableTabs