import { uuid } from "../_utils/utils";
import snippets from "./snippe";

export default {
    snippets,
    componentName: "CardPro",
    title: "卡片",
    category: "通用",
    docUrl: "",
    screenshot: "",
    devMode: "proCode",
    npm: {
        package: "@pisell/materials",
        version: "1.0.1",
        exportName: "CardPro",
        main: "src/index.tsx",
        destructuring: true,
        subName: "",
    },


    props: [
        {
            name: "badge",
            title: {
                label: "启用徽标区域",
                tip: "启用徽标区域"
            },
            propType: "node",
            setter: {
                componentName: "SlotSetter",
            },
        },
        {
            name: "objectFit",
            title: {
                label: "填充类型",
                tip: "媒体区域填充类型",
            },
            propType: { type: "oneOf", value: ["large", "middle", "small"] },
            setter: [
                {
                    componentName: "RadioGroupSetter",
                    props: {
                        options: [
                            {
                                title: "fill",
                                value: "fill",
                            },
                            {
                                title: "contain",
                                value: "contain",
                            },
                            {
                                title: "cover",
                                value: "cover",
                            },
                            {
                                title: "none",
                                value: "none",
                            },
                            {
                                title: "scale-down",
                                value: "scale-down",
                            },
                        ],
                    },
                },
                "VariableSetter",
            ],
            setValue: (target, value) => {
                // 当属性值更新时，手动触发逻辑
                let coverValue = target.getProps().getPropValue("cover") || {};
                coverValue.value[0].props.style.objectFit = value
                target.getProps().setPropValue("cover", coverValue);
            },
            defaultValue: "fill",
        },
        {
            name: "contentHeight",
            title: { label: "内容区域高度", tip: "输入内容区域高度 超出高度出现滚动条" },
            propType: "number",
            setter: "NumberSetter",
            defaultValue: 40,
        },
        {
            name: "coverHeight",
            title: { label: "媒体区域高度", tip: "输入媒体区域高度" },
            propType: "number",
            setter: "NumberSetter",
            defaultValue: 100,
        },
        {
            name: "cover",
            title: {
                label: "启用媒体区域"
            },
            propType: "node",
            setter: {
                componentName: "SlotSetter",
                initialValue: {
                    type: "JSSlot",
                    value: [
                        {
                            componentName: "Image",
                            props: {
                                src: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                                width: '100%',
                                height: '100%',
                                style: {
                                    objectFit: 'fill'
                                }
                            },
                        },
                    ],
                },
            },
        },


        {
            name: "isShowHead",
            title: { label: "显示头部区域", tip: "是否显示头部区域" },
            propType: "bool",
            setter: "BoolSetter",
            defaultValue: true,
        },

        {
            name: "isShowFooter",
            title: { label: "显示底部区域", tip: "是否显示底部区域" },
            propType: "bool",
            setter: "BoolSetter",
            defaultValue: true,
        },


        {
            name: "head",
            title: {
                label: "头部区域",
            },
            condition: (target) => {
                return target.getProps().getPropValue('isShowHead')
            },
            display: 'accordion',
            type: "group",
            items: [{
                name: "headTitle",
                title: {
                    label: {
                        type: "i18n",
                        zh_CN: "主标题",
                        en_US: "Main Title",
                    },
                    tip: {
                        type: 'i18n',
                        zh_CN: '主标题',
                        en_US: 'Please enter the main title'
                    }
                },
                propType: "string",
                setter: "StringSetter",
                defaultValue: "这是主标题"
            }, {
                name: "headSubTitle",
                title: {
                    label: "副标题",
                    placeholder: "请输入副标题"
                },
                propType: "string",
                setter: "StringSetter",
                defaultValue: "这是副标题"
            },
            {
                name: "extra",
                title: { label: "头部操作", tip: "头部操作" },
                propType: { type: "oneOfType", value: ["string", "node"] },
                setter: [
                    {
                        componentName: "SlotSetter",
                        initialValue: {
                            type: "JSSlot",
                            value: [],
                        },
                    },
                    "VariableSetter",
                ],
            },

            ]
        },
        {
            name: "footer",
            title: {
                label: "底部区域",
            },
            condition: (target) => {
                return target.getProps().getPropValue('isShowFooter')
            },
            display: 'accordion',
            type: "group",
            items: [
                {
                    name: "actionButtons",
                    title: {
                        label: "底部按钮",
                    },
                    setter: {
                        componentName: "ArraySetter",
                        props: {
                            itemSetter: {
                                componentName: "ObjectSetter",
                                props: {
                                    config: {
                                        items: [
                                            {
                                                name: "key",
                                                title: "key",
                                                setter: "StringSetter",
                                                initialValue: (val) => val || uuid(),
                                                supportVariable: true,
                                            },
                                            {
                                                name: "button",
                                                title: {
                                                    label: {
                                                        type: "i18n",
                                                        "en-US": "button",
                                                        "zh-CN": "按钮",
                                                    },
                                                },
                                                propType: "node",
                                                setter: {
                                                    componentName: "SlotSetter",
                                                    initialValue: {
                                                        type: "JSSlot",
                                                        value: [
                                                            {
                                                                componentName: "Button",
                                                                props: {
                                                                    type: "primary",
                                                                    children: "kik",
                                                                },
                                                            },
                                                        ],
                                                    },
                                                },
                                            },
                                        ],
                                    },
                                },
                                initialValue: () => {
                                    return {
                                        key: uuid(),
                                        button: {
                                            type: "JSSlot",
                                            value: [
                                                {
                                                    componentName: "Button",
                                                    props: {
                                                        type: "primary",
                                                        children: "按钮"
                                                    }
                                                },
                                            ],
                                        },
                                    };
                                },
                            },
                        },
                    },
                },



                {
                    name: "fixedFooter",
                    title: {
                        label: "底部固定"
                    },
                    propType: "bool",
                    setter: "BoolSetter",
                    defaultValue: true,
                },
                {
                    name: "buttonPosition",
                    title: {
                        label: "按钮位置",
                        tip: "选择按钮排列位置",
                    },
                    propType: { type: "oneOf", value: ["large", "middle", "small"] },
                    setter: [
                        {
                            componentName: "RadioGroupSetter",
                            props: {
                                options: [
                                    {
                                        title: "居左",
                                        value: "start",
                                    },
                                    {
                                        title: "居中",
                                        value: "center",
                                    },
                                    {
                                        title: "居右",
                                        value: "end",
                                    },
                                ],
                            },
                        },
                        "VariableSetter",
                    ],
                    defaultValue: "center",
                },

            ]
        }
    ],

    configure: {
        component: {
            isContainer: true
        },
        isExeng: true,
        supports: {
            style: true,
            events: [
                {
                    name: "onClick",
                    template:
                        "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}",
                },
            ],
        },
    }
}