import { Dp } from "../types";
//通用默认样式
const baseStyleColor = {
    prop: {
        styleColor:{
            color: '#000',
            backgroundColor: "#f6f7fa",
            opacity: 1,
        }
    },
    item: {
        props: {
            labelWidth: "0px"
        },
        component: {
            name: "cl-form-card",
            props: {
                label: "默认颜色", 
                expand: false,
            }
        },
        children: [
            {
                label: "字体颜色",
                prop: "styleColor.color",
                component: {
                    name: "el-color-picker",
                }
            },
            {
                label: "背景颜色",
                prop: "styleColor.backgroundColor",
                component: {
                    name: "el-color-picker",
                    props: {
                        showAlpha: true,
                        predefine: ["#f6f7fa"]
                    }
                }
            },
            {
                label: "透明度",
                prop: "styleColor.opacity",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 1,
                        step: 0.1,
                        unit: ''
                    }
                }
            },
            
        ]
    },
}
const baseStyleSpacing = {
    prop: {
        styleSpacing:{
            marginTop: 0,
            marginBottom: 0,
            marginLR: 0,
            padding: 0,
            borderTopLR: 0,
            borderBottomLR: 0,
        }
    },
    item: {
        props: {
            labelWidth: "0px"
        },
        component: {
            name: "cl-form-card",
            props: {
                label: "默认间距", 
                expand: false,
            }
        },
        children: [
            {
                label: "上间距",
                prop: "styleSpacing.marginTop",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 200,
                        step: 1
                    }
                }
            },
            {
                label: "下间距",
                prop: "styleSpacing.marginBottom",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 200,
                        step: 1
                    }
                }
            },
            {
                label: "左右间距",
                prop: "styleSpacing.marginLR",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 200,
                        step: 1
                    }
                }
            },
            {
                label: "内间距",
                prop: "styleSpacing.padding",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 100,
                        step: 1
                    }
                }
            },
            {
                label: "上左右圆角",
                prop: "styleSpacing.borderTopLR",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 100,
                        step: 1
                    }
                }
            },
            {
                label: "下左右圆角",
                prop: "styleSpacing.borderBottomLR",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 100,
                        step: 1
                    }
                }
            },
        ]
    },
}
const basePosition = {
    prop: {
        position:{
            mode: 'static',
            top: 0,
            zIndex: 1,
            isSeat: true
        }
    },
    item: {
        props: {
            labelWidth: "0px"
        },
        component: {
            name: "cl-form-card",
            props: {
                label: "默认定位", 
                expand: false,
            }
        },
        children: [
            {
                label: "定位方式",
                prop: "position.mode",
                component: {
                    name: "el-radio-group",
                    options: [
                        {
                            label: '正常',
                            value: 'static',
                        },
                        {
                            label: '绝对定位',
                            value: 'fixed',
                        },
                    ]
                }
            },
            {
                label: "是否使用占位元素",
                prop: "position.isSeat",
                component: {
                    name: "assembly-switch",
                }
            },
            {
                label: "距离顶部",
                prop: "position.top",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 600,
                        step: 1,
                        unit: 'px'
                    }
                }
            },
            {
                label: "定位权重",
                prop: "position.zIndex",
                component: {
                    name: "assembly-slider",
                    props: {
                        min: 0,
                        max: 99,
                        step: 1,
                        unit: ''
                    }
                }
            },
        ]
    },
}
export const Base: Dp.Item[] = [
    {
        label: "头图按钮",
        name: "positioning",
        isOnly:true,
        component: {
            name: "fix-positioning",
            props: {
                mode: 'mode-1',
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                banner: {
                    open: false,
                    height: 750,
                    list: []
                },
                float: {
                    open: false,
                    left: {
                        text: '',
                        mode: 'mode-1',
                        icon: '',
                        color: '#000',
                        backgroundColor: "#FFFFFF",
                        link: {
                            name: '',
                            type: '',
                            appid: '',
                            page: ''
                        }
                    },
                    right: {
                        text: '',
                        mode: 'mode-1',
                        icon: '',
                        color: '#000',
                        backgroundColor: "#FFFFFF",
                        link: {
                            name: '',
                            appid: '',
                            type: '',
                            page: ''
                        }
                    },
                },
            }
        },
        config: {
            title: '头图按钮设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "基础设置",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "定位样式",
                            prop: "mode",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '模式一',
                                        value: 'mode-1',
                                    },
                                    {
                                        label: '模式二',
                                        value: 'mode-2',
                                    },
                                    {
                                        label: '模式三',
                                        value: 'mode-3',
                                    },
                                    {
                                        label: '模式四',
                                        value: 'mode-4',
                                    },
                                ]
                            }
                        },
                    ]
                },
                {
                    props: {
                        labelWidth: "0px"
                    },
          
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "轮播信息",
                            expand: true, 
                        }
                    },
                    children: [
                        {
                            label: "是否启用",
                            prop: "banner.open",
                            component: {
                                name: "assembly-switch",
                            }
                        },
                        {
                            label: "轮播高度",
                            prop: "banner.height",
                            component: {
                                name: "assembly-slider",
                                props: {
                                    min: 750,
                                    max: 1334,
                                    step: 10,
                                    unit: 'rpx'
                                }
                            }
                        },
                        {
                            label: "轮播图列表",
                            prop: "banner.list",
                            component: {
                                name: "assembly-banner",
                            },
                            hidden: ({ scope }) => {
                                return !scope.banner?.open
                            }
                        },
                    ]
                },
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "悬浮信息",
                            expand: true, 
                        }
                    },
                    children: [
                        {
                            label: "是否启用",
                            prop: "float.open",
                            renderLabel: () => (<div class="form-label">
                                是否启用 <span>必须先启用轮播才能生效</span>
                            </div>),
                            component: {
                                name: "assembly-switch",
                            }
                        },
                        {
                            label: "左边按钮",
                            prop: "float.left",
                            component: {
                                name: "assembly-menu",
                                props: {
                                    iconTips: '图片宽度 120px 高度140px',
                                    maxlength: 4
                                }
                            },
                            hidden: ({ scope }) => {
                                return !scope?.float.open
                            }
                        },
                        {
                            label: "右边按钮",
                            prop: "float.right",
                            component: {
                                name: "assembly-menu",
                                props: {
                                    iconTips: '图片宽度 120px 高度140px',
                                    maxlength: 4
                                }
                            },
                            hidden: ({ scope }) => {
                                return !scope.float?.open
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
            ]
        }
    },
    {
        label: "搜索框",
        name: "search",
        isOnly: true,
        component: {
            name: 'fix-search',
            props: {
                placeholder: '请输入关键字进行搜索',
                mode: 'mode-1',
                styleColor: {
                    ...baseStyleColor.prop.styleColor,
                    backgroundColor: '#ffffff'
                },
                styleSpacing: {
                    ...baseStyleSpacing.prop.styleSpacing,
                    padding: 24,
                    borderTopLR: 24,
                    borderBottomLR: 24
                },
                position:{...basePosition.prop.position,top: 44,isSeat: true},
                backgroundColor: '#f6f7fa'
            }
        },
        config: {
            title: '搜索框设置',
            items: [
                {
                    label: "搜索框提示",
                    prop: "placeholder",
                    component: {
                        name: "el-input",
                        props: {
                            maxlength: 12,
                            type: 'text',
                            'show-word-limit': true
                        }
                    }
                },
                {
                    label: "文字对齐",
                    prop: "mode",
                    component: {
                        name: "el-radio-group",
                        options: [
                            {
                                label: '居左',
                                value: 'mode-1',
                            },
                            {
                                label: '居中',
                                value: 'mode-2',
                            },
                            {
                                label: '居右',
                                value: 'mode-3',
                            },
                        ]
                    }
                },
                {
                    label: "输入框颜色",
                    prop: "backgroundColor",
                    component: {
                        name: "el-color-picker",
                        props: {
                            predefine: ["#f6f7fa"]
                        }
                    }
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
    {
        label: "轮播图",
        name: "banner",
        component: {
            name: 'fix-banner',
            props: {
                mode: '',
                height: 500,
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                indicatorDots: true,
                autoplay: true,
                list: [
                    {
                        pic: "",
                        link: {
                            name: "",
                            type: "",
                            appid: "",
                            page: ""
                        }
                    }
                ]
            }
        },
        config: {
            title: '轮播图设置',
            items: [
                {
                    label: "显示模式",
                    prop: "mode",
                    component: {
                        name: "el-radio-group",
                        options: [
                            {
                                label: '默认',
                                value: '',
                            },
                            {
                                label: '卡片',
                                value: 'card',
                            },
                            {
                                label: '衔接',
                                value: 'chain',
                            },
                        ]
                    }
                },
                {
                    label: "轮播高度",
                    prop: "height",
                    component: {
                        name: "assembly-slider",
                        props: {
                            min: 300,
                            max: 750,
                            step: 10,
                            unit: 'rpx'
                        }
                    }
                },
                {
                    label: "是否显示指示器",
                    prop: "indicatorDots",
                    component: {
                        name: "assembly-switch",
                    }
                },
                {
                    label: "是否自动播放",
                    prop: "autoplay",
                    component: {
                        name: "assembly-switch",
                    }
                },
                {
                    label: "图片",
                    prop: "list",
                    component: {
                        name: "assembly-banner",
                    }
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
            ]
        }
    },
    {
        label: "按钮组",
        name: "menus",
        component: {
            name: 'fix-menus',
            props: {
                style: {
                    shape: 'round',
                    pageNum: 1,
                    rowNum: 3,
                },
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                ...basePosition.prop,
                list: []
            }
        },
        config: {
            title: '按钮组设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "组件样式",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "按钮形状",
                            prop: "style.shape",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '圆形',
                                        value: 'round',
                                    },
                                    {
                                        label: '方形',
                                        value: 'square',
                                    },
                                ]
                            }
                        },
                        {
                            label: "每页行数",
                            prop: "style.pageNum",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '1行',
                                        value: 1,
                                    },
                                    {
                                        label: '2行',
                                        value: 2,
                                    },
                                ]
                            }
                        },
                        {
                            label: "每行数量",
                            prop: "style.rowNum",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '3个',
                                        value: 3,
                                    },
                                    {
                                        label: '4个',
                                        value:4,
                                    },
                                    {
                                        label: '5个',
                                        value:5,
                                    },
                                ]
                            }
                        },
                    ]
                },
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "按钮列表",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "",
                            prop: "list",
                            renderLabel: () => (<div class="form-label">
                             <span class="text-warning">右键点击按钮组有更多操作</span>
                        </div>),
                            component: {
                                name: "assembly-menus",
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
    {
        label: "图片",
        name: "picture",
        component: {
            name: 'fix-picture',
            props: {
                data: {
                    pic: '',
                    link: {
                        name: '',
                        type: '',
                        appid: '',
                        page: ''
                    },
                },
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                ...basePosition.prop,
            }
        },
        config: {
            title: '图片设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "图片内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            prop: "data",
                            component: {
                                name: "assembly-picture",
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
    {
        label: "标题",
        name: "title",
        component: {
            name: 'fix-title',
            props: {
                mode: 'left',
                left: {
                    text: '标题内容',
                    color: '#000',
                    icon: '',
                    link: {
                        name: '',
                        type: '',
                        appid: '',
                        page: ''
                    }, 
                },
                right: {
                    text: '查看',
                    color: '#a8abb2',
                    icon: '',
                    link: {
                        name: '',
                        type: '',
                        appid: '',
                        page: ''
                    }, 
                },
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                ...basePosition.prop,
            }
        },
        config: {
            title: '标题设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "标题内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "对齐方式",
                            prop: "mode",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '靠左',
                                        value: 'left',
                                    },
                                    {
                                        label: '居中',
                                        value: 'center',
                                    },
                                ]
                            }
                        },
                        {
                            label: "左侧内容",
                            prop: "left",
                            component: {
                                name: "assembly-title",
                            }
                        },
                        {
                            label: "右侧内容",
                            prop: "right",
                            component: {
                                name: "assembly-title",
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
    {
        label: "辅助空白",
        name: "empty",
        component: {
            name: 'fix-empty',
            props: {
                height: 100,
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
            }
        },
        config: {
            title: '辅助空白设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "元素高度",
                            prop: "height",
                            component: {
                                name: "assembly-slider",
                                props: {
                                    min: 0,
                                    max: 800,
                                    step: 2
                                }
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
            ]
        }
    },
    {
        label: "辅助线条",
        name: "line",
        component: {
            name: 'fix-line',
            props: {
                mode: 'dashed',
                height: 4,
                color: '#000000',
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
            }
        },
        config: {
            title: '辅助线条设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "线条样式",
                            prop: "mode",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '实线',
                                        value: 'solid',
                                    },
                                    {
                                        label: '虚线',
                                        value: 'dashed',
                                    },
                                    {
                                        label: '点线',
                                        value: 'dotted',
                                    },
                                    {
                                        label: '双线',
                                        value: 'double',
                                    },
                                ]
                            }
                        },
                        {
                            label: "线条高度",
                            prop: "height",
                            component: {
                                name: "assembly-slider",
                                props: {
                                    min: 0,
                                    max: 50,
                                    step: 1
                                }
                            }
                        },
                        {
                            label: "线条颜色",
                            prop: "color",
                            component: {
                                name: "el-color-picker",
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
            ]
        }
    },
    {
        label: "富文本",
        name: "rich-text",
        component: {
            name: 'fix-rich-text',
            props: {
                data: '',
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
            }
        },
        config: {
            title: '富文本设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            prop: "data",
                            component: {
                                name: "cl-editor-wang",
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
            ]
        }
    },
    {
        label: "列表导航",
        name: "list-menu",
        component: {
            name: 'fix-list-menu',
            props: {
                list: [],
                isBorder: false,
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                ...basePosition.prop,
            }
        },
        config: {
            title: '列表导航设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "显示边线",
                            prop: "isBorder",
                            component: {
                                name: "assembly-switch",
                            }
                        },
                        {
                            label: "导航按钮",
                            renderLabel: () => (<div class="form-label">
                                导航按钮
                            <span class="text-warning">右键点击按钮组有更多操作</span>
                       </div>),
                            prop: "list",
                            component: {
                                name: "assembly-list-menu",
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
    {
        label: "图片热区",
        name: "hot-image",
        component: {
            name: 'fix-hot-image',
            props: {
                data: {
                    pic: '',
                    link: {
                        name: '',
                        type: '',
                        appid: '',
                        page: ''
                    },
                    width: 0,
                    height: 0,
                    attr: []
                },
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                ...basePosition.prop,
            }
        },
        config: {
            title: '图片热区设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            prop: "data",
                            component: {
                                name: "assembly-hot-image",
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
    {
        label: "图片魔方",
        name: "rubik-cube",
        component: {
            name: 'fix-rubik-cube',
            props: {
                data: {
                    mode: 'mode-1',
                    gap: 0,
                    list: [
                        {
                            icon: "",
                            tips: "宽度375px",
                            link: {
                                name: "",
                                type: "",
                                appid: "",
                                page: ""
                            }
                        },
                        {
                            icon: "",
                            tips: "宽度375px",
                            link: {
                                name: "",
                                type: "",
                                appid: "",
                                page: ""
                            }
                        }
                    ]
                },
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                ...basePosition.prop,
            }
        },
        config: {
            title: '图片魔方设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            prop: "data",
                            component: {
                                name: "assembly-rubik-cube"
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
]

export const Marketing: Dp.Item[] = [
    {
        label: "商品组",
        name: "goods-list",
        component: {
            name: 'fix-goods-list',
            props: {
                data: {
                    mode: 'mode-1',
                    source: 'source-1',
                    attribute: 0,
                    isShadow: true,
                    isVoucher: true,
                    num: 99,
                    gap: 0,
                    type: [],
                    list: []
                },
                styleColor: {...baseStyleColor.prop.styleColor,backgroundColor: "#f5f6f7",},
                styleSpacing: { ...baseStyleSpacing.prop.styleSpacing, padding: 20 },
                ...basePosition.prop,
            }
        },
        config: {
            title: '商品组设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            prop: "data",
                            component: {
                                name: "assembly-goods-list",
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
    {
        label: "优惠券",
        name: "coupon",
        component: {
            name: 'fix-coupon',
            props: {
                item: {
                    id: 0,
                    title: '',
                    description: '',
                    amount: 0,
                    type: 0,
                    condition: ''
                },
                color: '#2b2e3d',
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
                ...basePosition.prop,
            }
        },
        config: {
            title: '优惠券设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "选择优惠券",
                            prop: "item",
                            component: {
                                name: "assembly-coupon"
                            }
                        },
                        {
                            label: "主题颜色",
                            prop: "color",
                            component: {
                                name: "el-color-picker"
                            }
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
                basePosition.item
            ]
        }
    },
]

export const Other: Dp.Item[] = [
    {
        label: "关联公众号",
        name: "wechat",
        isOnly:true,
        component: {
            name: 'fix-wechat',
            props: {
                ...baseStyleSpacing.prop,
            }
        },
        config: {
            title: '关联公众号',
            items: [
                {
                    component: {
                        name: "el-text", 
                        slots: {
                            default() {
                                return '请先将公众号与小程序关联，只有在小程序中显示。如果用户已经关注公众号，则该组件将不会显示。'
                            }
                        },
                        props: {
                            type: 'primary'
                        }
                    },
                    renderLabel: () => (<div class="form-label">
                <span class="text-warning">该模块由系统根据设置自动展示，无需编辑</span>
           </div>),
                },
                baseStyleSpacing.item,
            ]
        }
    },
]

export const Ability: Dp.Item[] = [
    {
        label: "视频播放",
        name: "video",
        component: {
            name: 'fix-video',
            props: {
                video: '',
                cover: '',
                type: 'local',
                mode: 'horizontal',
                ...baseStyleColor.prop,
                ...baseStyleSpacing.prop,
            }
        },
        config: {
            title: '视频播放设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "显示样式",
                            prop: "mode",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '横屏',
                                        value: 'horizontal',
                                    },
                                    {
                                        label: '竖屏',
                                        value: 'vertical',
                                    },
                                ]
                            }
                        },
                        {
                            label: "视频来源",
                            prop: "type",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '本地',
                                        value: 'local',
                                    },
                                    {
                                        label: '网络',
                                        value: 'cloud',
                                    },
                                ]
                            }
                        },
                        {
                            label: "",
                            prop: "video",
                            props: {
                                labelWidth: "0px"
                            },
                            component: {
                                name: "cl-upload",
                                props: {
                                    limit: 1,
                                    type: 'file',
                                    text: '上传视频',
                                    accept: '.mp4'
                                },
                            },
                            required: true,
                            hidden({scope}) {
                                return scope.type  === 'cloud'
                            },
                        },
                        {
                            label: "网络视频",
                            prop: "video",
                            component: {
                                name: "el-input",
                                slots: {
                                    prepend() {
                                        return '链接'
                                    }
                                },
                                props: {
                                    placeholder: '请输入网络视频http链接'
                                },
                            },
                            required: true,
                            hidden({scope}) {
                                return scope.type  === 'local'
                            },
                        },
                        {
                            label: "视频封面图",
                            prop: "cover",
                            component: {
                                name: "cl-upload",
                                props: {
                                    limit: 1,
                                    type: 'image',
                                    text: '选择封面',
                                }
                            },
                            renderLabel: () => (<div class="form-label">
                            视频封面图
                        <span class="text-warning">不设置默认视频第一帧</span>
                   </div>),
                        },
                    ]
                },
                baseStyleColor.item,
                baseStyleSpacing.item,
            ]
        }
    },
    {
        label: "悬浮按钮",
        name: "suspension",
        isOnly:true,
        component: {
            name: 'fix-suspension',
            props: {
                mode: 'right',
                offsetBottom: 50,
                shadow: true,
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                list: [
                    {
                        icon: "https://tsb-yx.oss-cn-guangzhou.aliyuncs.com/app/mini/float-menu.png",
                        tips: "宽高128px",
                        link: {
                            name: "",
                            type: "",
                            appid: "",
                            page: ""
                        }
                    },
                ],
            }
        },
        config: {
            title: '悬浮按钮设置',
            items: [
                {
                    props: {
                        labelWidth: "0px"
                    },
                    component: {
                        name: "cl-form-card", 
                        props: {
                            label: "内容",
                            expand: true,
                            isExpand: true 
                        }
                    },
                    children: [
                        {
                            label: "显示模式",
                            prop: "mode",
                            component: {
                                name: "el-radio-group",
                                options: [
                                    {
                                        label: '左边',
                                        value: 'left',
                                    },
                                    {
                                        label: '右边',
                                        value: 'right',
                                    },
                                ]
                            }
                        },
                        {
                            label: "按钮列表",
                            prop: "list",
                            component: {
                                name: "assembly-suspension",
                            },
                            renderLabel: () => (<div class="form-label">
                                按钮列表
                            <span class="text-warning">右键点击按钮组有更多操作</span>
                       </div>),
                        },
                        {
                            label: "背景颜色",
                            prop: "backgroundColor",
                            component: {
                                name: "el-color-picker",
                                props: {
                                    showAlpha: true
                                }
                            }
                        },
                        {
                            label: "是否使用阴影",
                            prop: "shadow",
                            component: {
                                name: "assembly-switch",
                            }
                        },
                        {
                            label: "距离底部",
                            prop: "offsetBottom",
                            component: {
                                name: "assembly-slider",
                                props: {
                                    min: 0,
                                    max: 1140,
                                    step: 2
                                }
                            }
                        }
                    ]
                },
            ]
        }
    },
]


export const Header: Dp.Item = {
    id: "header",
    label: "顶部导航",
    name: "header",
    isOnly:true,
    component: {
        name: 'fix-top-bar',
        props: {
            backgroundColor: "#fff",
            color: "black",
            fixed: false,
            border: true,
            showBack: true,
            isShow: true,
            withMp: false,
            title: "自定义页面",
        }
    },
    config: {
        title: '页面导航设置',
        items: [
            {
                label: "标题",
                prop: "title",
                component: {
                    name: "el-input"
                }
            },
            {
                label: "背景颜色",
                prop: "backgroundColor",
                component: {
                    name: "el-color-picker",
                    props: {
                        "show-alpha": true,
                        predefine: [
                            "#ffffff",
                            "#000000",
                            "rgba(0,0,0,0)"
                        ],
                    }
                }
            },
            {
                label: "字体颜色",
                prop: "color",
                component: {
                    name: "el-radio-group",
                    options: [
                        {
                            label: '白色',
                            value: 'white'
                        },
                        {
                            label: '黑色',
                            value: 'black'
                        }

                    ]
                }
            },
            {
                label: "是否显示导航",
                prop: "isShow",
                value: false,
                component: {
                    name: "assembly-switch",
                }
            },
            {
                label: "固定顶部",
                prop: "fixed",
                value: false,
                component: {
                    name: "assembly-switch",
                }
            },
            {
                label: "下边框",
                prop: "border",
                value: true,
                component: {
                    name: "assembly-switch",
                }
            },
            {
                label: "躲避小程序胶囊",
                prop: "withMp",
                value: false,
                component: {
                    name: "assembly-switch",
                }
            },
            {
                label: "返回按钮",
                prop: "showBack",
                value: true,
                component: {
                    name: "assembly-switch",
                }
            }
        ]
    },
}