/*
 * @Author: your name
 * @Date: 2021-09-15 18:38:41
 * @LastEditTime: 2022-03-29 17:42:30
 * @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 styles from './index.less';

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

    const [list,setList] = useState<MccsClickableTabs.TabType[]>([]);
    const {tabClickHandle,onChange,type='single',classNames} = 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 || null);
                onChange?.({label:`${item.label}`,value:supItem});  // Form传递过来的onChange,设置表单值
                setActivedTab({label:item.label,value:supItem});
            }
        }
    }

    useEffect(()=>{
   
        const {data=[],value,clear,disabled} = props;
        setList(data);
        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`?`${styles.mutiwrap} ${styles.wrap} ${classNames}`:`${styles.wrap} ${classNames}`}>
            {
                type=='single'&&(
                    <>
                        {
                        list.map((item,index)=>{
                               
                                return (
                                    <div className={activedTab?.value==item.value?(disabled?`${styles.tab} ${styles.on} ${styles.disabled}`:`${styles.tab} ${styles.on}`):disabled?`${styles.disabled} ${styles.tab}`:`${styles.tab}`} key={index} onClick={()=>clickHandle(item,{label:'null',value:'null'})}>{item.label}</div>
                                )
                        })
                        }
                    </>    
                )
            }
            {
                type=='multi'&&(
                    <>
                        {
                        list.map((item,index)=>{
                                return (
                                    <div className={styles.muti} key={index}>
                                        <div className={styles.label}>{item.label}</div>
                                        <div className={styles.valueWrap}>
                                              {
                                                 item.list&&item.list.map((val,i)=>{
                                                        return (
                                                            <div className={activedTab?.label==item.label&&activedTab.value.label==val.label?(disabled?`${styles.tab} ${styles.on} ${styles.disabled}`:`${styles.tab} ${styles.on}`):disabled?`${styles.disabled} ${styles.tab}`:`${styles.tab}`} key={i} onClick={()=>clickHandle(item,val)}>{val.label}</div>
                                                        )
                                                 }) 
                                              }
                                        </div>
                                    </div>
                                )
                        })
                        }
                    </>    
                )
            }
            
        </div>
    )
}

export default MccsClickableTabs
