client-miniapp/src/compents/tab/index.jsx

import React, { useEffect, useState } from 'react'
import Taro from "@tarojs/taro";
import { useSelector } from 'react-redux'
import { View, Button, Image } from '@tarojs/components'
import uploadicon from '../../assets/uploadicon.png'
import roleList from '../../util/userRole'
import './index.scss'


const getColor = (role) => {
    switch (role) {
        case roleList.landlord: return '#274291'
        case roleList.adminuser: return '#274291'
        // landlord: 'landlord',
        case roleList.customer: return '#fed12f'
    }
}


const tab = (props) => {

    const user = useSelector(state => state.user)

    const { value, openType, pageState, formType, color, styleType='', ...prop } = props

    const [state, setState] = useState(1)
    console.log(props, openType, 'formType')
    useEffect(() => {

    }, [])
    
    //  &-on{
    //     color: #fed12f;
    // }${props.className}
    return <View className='tab'>
        {
        value.length == 1 && 
        <>
            {openType &&  <button openType="share" className={`tab,tab1,${props.className}`} style={{ backgroundColor: getColor(user.role), color }} onClick={() => props.onClick('2')}>{value[0]}</button>}
            {!openType && <View className={`tab,tab1,${props.className}`} style={{ backgroundColor: getColor(user.role), color }} onClick={() => props.onClick('2')}>{value[0]}</View>}
        </>
        }
        {
            value.length == 2 && <View className={`tab,tab2,${props.className}`} style={{ display: 'flex', }}>
            <View style={{ width: '50%' }} style={pageState == '2'&&styleType!='tab' ? { color: getColor(user.role), width: '50%' } : { color:pageState != '2'&&styleType=='tab'?getColor(user.role):undefined, width: '50%' }} onClick={props.onClick[0]}>{value[0]}</View>
                {formType && 
                <Button className='tab-btn' 
                    formType="submit" 
                    plain={true} 
                    style={pageState == '3' &&styleType!='tab'? { color: getColor(user.role), width: '50%', border: 'none' } : { width: '50%', border: 'none' }}
                >{value[1]}
                </Button>}
                {openType && 
                <button className='tab-btn' 
                    openType="share" plain={true} style={pageState == '3'&&styleType!='tab' ? { color: getColor(user.role), width: '50%', border: 'none' } : { width: '50%', border: 'none' }}>{value[1]}</button>}
                {!formType&&!openType &&
                    <View style={{ width: '50%' }} 
                    style={pageState == '3'&&styleType!='tab' ? { color: getColor(user.role), width: '50%' } : { color:pageState != '3'&&styleType=='tab'?getColor(user.role):undefined, width: '50%' }} 
                    onClick={props.onClick[1]}
                >{value[1]}</View>
                }
            </View>
        }

    </View>
};

export default tab

// import React, { useEffect, useState } from 'react'
// import Taro from "@tarojs/taro";
// import { Button, View } from '@tarojs/components'

// import './index.scss'

// const getColor = (role) => {
//     switch (role) {
//         case roleList.landlord: return '#274291'
//         case roleList.adminuser: return '#274291'
//         // landlord: 'landlord',
//         case roleList.customer: return '#fed12f'
//     }
// }


// const tab = (props) => {
//     // formType="submit"

//     const { value, pageState, formType, color, ...prop } = props

//     const [state, setState] = useState(1)
//     // console.log(props)
//     useEffect(() => {

//     }, [])
//     //  &-on{
//     //     color: #fed12f; style={{ backgroundColor:'#274291' ,color}}
//     // }${props.className}
//     return <View className='tab'>
//         {value.length == 1 && <View className={`tab tab1 ${props.className}`} onClick={() => props.onClick('2')}>{value[0]}
//         </View>}
//         {value.length == 2 && <View className={`tab tab2 ${props.className}`} style={{ display: 'flex', }}>
//             <View style={{ width: '50%' }} style={pageState == '2' ? { color: '#274291', width: '50%' } : { width: '50%' }} onClick={props.onClick[0]}>{value[0]}</View>
//            { !formType? 
//             <View formType={formType} style={{ width: '50%' }} style={pageState == '3' ? { color: '#274291', width: '50%' } : { width: '50%' }} onClick={props.onClick[1]}>{value[1]}</View>
//             :<Button className='tab-btn' formType={formType} plain={true} style={{ width: '50%' }} style={pageState == '3' ? { color: '#274291', width: '50%',border:'none' } : { width: '50%',border:'none' }} onClick={props.onClick[1]}>{value[1]}</Button>}
//         </View>}
//     </View>
// };

// export default tab