import { formatImgUrl } from "@/common/fotmat";
import { Image, View } from "@tarojs/components";
import { memo, useMemo } from "react";
import styles from './index.module.scss'

//该组件宽高为100%需调整外层元素宽高
type Param = {
    value?: { 
        texture_url?: string, //纹理图路径
        lab?: {l:number, a:number, b:number}, //lab
        rgb?: {r:number, g:number, b:number} //rgb
    }
}
export default memo(({value}:Param) => {
    //lab是否都是0
    const rgbStyle = useMemo(() => {
        if(value?.lab&&(value.lab.l||value.lab.a||value.lab.b)) {
            return {'backgroundColor':`rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})`}
        } else {
            return null
        }
    }, [value])
    return (
        <View className={styles.labAndImg_main}>
            {value?.texture_url&&<Image mode="aspectFill" src={formatImgUrl(value?.texture_url)}></Image>}
            {(!value?.texture_url&&rgbStyle)&&<View className={styles.boxColor} style={{...rgbStyle}}></View>}
            {(!value?.texture_url&&!rgbStyle)&&<Image mode="aspectFill" src={formatImgUrl('')}></Image>}
        </View>
    )
})