//key: 表单元素的key值
//value: 表单元素的value值
//params: 表单参数 
export const mapFormParamsToStyle = (key, value, params) => {
    //图片的宽高 或 文本区域的宽高
    const { width = 28, height = 20, card_width, card_height } = params;

    //边距
    const hmargin = parseFloat(params["h-margin"]);
    const vmargin = parseFloat(params["v-margin"]);

    const params_to_style = {
        horizon: {
            "1": {
                left: hmargin
            },
            "2": {
                left: (card_width - width) / 2 + hmargin
            },
            "3": {
                right: hmargin
            }
        },
        vertical: {
            "1": {
                top: vmargin
            },
            "2": {
                top: (card_height - height) / 2 + vmargin
            },
            "3": {
                bottom: vmargin
            }
        },
        width: {
            width: `${width}px`,
        },
        height: {
            height: `${height}px`,
        },
        rotate: {
            transform: `rotate(${value}deg)`,
            "-ms-transform": `rotate(${value}deg)`,
            /* IE 9 */
            "-moz-transform": `rotate(${value}deg)`,
            /* Firefox */
            "-webkit-transform": `rotate(${value}deg)`,
            /* Safari 和 Chrome */
            "-o-transform": `rotate(${value}deg)`,
            /* Opera */
        },
        transparency: {
            opacity: value / 100
        },
        "txt-color": {
            backgroundColor: value
        },
        "h-align": {
            "1": {
                textAlign: "left"
            },
            "2": {
                textAlign: "center"
            },
            "3": {
                textAlign: "right"
            }
        },
        "v-align": {
            "1": {
                "vertical-align": "top"
            },
            "2": {
                "vertical-align": "middle"
            },
            "3": {
                "vertical-align": "bottom"
            }
        },
        fill: {
            "1": { //填充
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            "2": { //适应
                backgroundRepeat: "no-repeat",
                backgroundSize: "contain"
            },
            "3": { //拉伸
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%"
            },
            "4": { //平铺
                backgroundRepeat: "repeat",
            },
            "5": { //居中
                backgroundRepeat: "no-repeat",
                backgroundPosition: "center"
            }
        },
        "bg-color": {
            backgroundColor: value
        },
        "font-family": {
            "font-family": value
        },
        "font-size": {
            "font-size": `${value}px`
        },
        "font-color": {
            color: value
        }
    };
    let val = params_to_style[key];

    if (val && ["horizon", "vertical", "h-align", "v-align", "fill"].includes(key)) {
        val = val[value];
    }

    return val;
}