<!-- Created by henian.xu on 2018/9/5. -->

<template>
    <div
        class="control-panel"
        v-if="isShow"
        :style="`margin-top: ${controlOffsetTop}px;`"
    >
        <div class="header">
            <div class="inner">
                <div class="label">
                    ({{componentName||''}}) {{ $$t('vmf_component_properties_editor', '组件属性编辑器') }}
                </div>
            </div>
        </div>
        <div class="body">
            <el-form
                size="mini"
                label-position="right"
                label-width="6em"
            >
                <el-form-item
                    v-if="hasComponentMargin"
                    :label="`${$$t('vmf_component_identification', '组件标识')}: `">
                    <el-input v-model="formModel.componentsCode" />
                </el-form-item>
                <el-form-item
                    v-if="hasComponentMargin"
                    :label="`${$$t('vmf_outer_spacing', '外间距')}: `">
                    <el-input v-model="formModel.componentMargin" />
                </el-form-item>
                <el-form-item
                    v-if="hasComponentPadding"
                    :label="`${$$t('vmf_inner_spacing', '内间距')}: `">
                    <el-input v-model="formModel.componentPadding" />
                </el-form-item>
                <el-form-item
                    v-if="hasComponentRadius"
                    :label="`${$$t('vmf_round_corner', '圆角')}: `">
                    <el-input v-model="formModel.componentRadius" />
                </el-form-item>
                <!-- page form -->
                <template v-if="componentType === 'Page'">
                    <el-form-item
                        :label="`${$$t('vmf_page_title', '页面标题')}: `"
                    >
                        <el-input
                            v-model="formModel.props.title"
                        />
                    </el-form-item>
                    <el-form-item
                        :label="`${$$t('vmf_background_color', '背景颜色')}: `"
                    >
                        <el-color-picker
                            v-model="formModel.props.backgroundColor"
                        />
                    </el-form-item>
                    <el-form-item
                        label="无标题: "
                    >
                        <el-switch v-model="formModel.props.customNav" />
                        <span class="ma-l tc-g5">{{ $$t('vmf_only_mp_supported', '仅支持小程序') }}</span>
                    </el-form-item>
                </template>
                <template v-if="componentType === 'Divider'">
                    <el-form-item
                        :label="`${$$t('vmf_title_name', '标题名称')}: `"
                    >
                        <el-input
                            v-model="formModel.props.label"
                        />
                    </el-form-item>
                </template>

                <!-- Ad form -->
                <template v-if="componentType === 'Ad'">
                    <el-form-item
                        :label="`${$$t('vmf_type', '类型')}: `"
                    >
                        <el-radio-group v-model="formModel.props.type">
                            <el-radio label="1">
                                {{ $$t('vmf_carousel', '轮播') }}
                            </el-radio>
                            <el-radio label="2">
                                {{ $$t('vmf_list', '列表') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        v-if="+formModel.props.type === 2"
                        :label="`${$$t('vmf_interval', '间距')}: `"
                    >
                        <el-input-number
                            controls-position="right"
                            v-model.number="formModel.props.margin"
                        />
                    </el-form-item>
                    <el-form-item
                        v-if="+formModel.props.type === 1"
                        :label="`${$$t('vmf_delay', '延迟')}: `"
                    >
                        <el-input-number
                            controls-position="right"
                            :min="3000"
                            :step="1000"
                            v-model.number="formModel.props.delay"
                        /> {{ $$t('vmf_millisecond', '毫秒') }}
                    </el-form-item>
                </template>
                <template v-if="componentType === 'AdCube'">
                    <el-form-item
                        :label="`${$$t('vmf_is_mirror', '是否镜像')}: `"
                    >
                        <el-switch v-model="formModel.props.reverse" />
                    </el-form-item>
                    <el-form-item
                        :label="`${$$t('vmf_is_border', '是否边框')}: `"
                    >
                        <el-switch v-model="formModel.props.border" />
                    </el-form-item>
                </template>
                <template v-if="componentType === 'MagicCube' || componentType === 'Toolbar'">
                    <el-form-item :label="`${$$t('vmf_columns', '列数')}: `">
                        <el-input-number
                            controls-position="right"
                            v-model.number="formModel.props.column"
                        />
                    </el-form-item>
                </template>
                <template v-if="componentType === 'Toolbar'">
                    <el-form-item
                        :label="`${$$t('vmf_network_cable', '网络线')}: `"
                    >
                        <el-switch v-model="formModel.props.gridLine" />
                    </el-form-item>
                </template>
                <template v-if="componentType==='Goods'">
                    <el-form-item
                        :label="`${$$t('vmf_type', '类型')}: `"
                    >
                        <el-radio-group v-model="formModel.props.type">
                            <el-radio label="2">
                                {{ $$t('vmf_list', '列表') }}
                            </el-radio>
                            <el-radio
                                v-if='formModel.supportRowLayout'
                                label="4">
                                {{ $$t('vmf_horizontal', '横向') }}
                            </el-radio>
                            <el-radio label="1">
                                {{ $$t('vmf_two_columns', '小图(两列)') }}
                            </el-radio>
                            <el-radio
                                v-if='formModel.supportWaterfall'
                                label="3">
                                {{ $$t('vmf_waterfall_flow', '瀑布流') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        v-if="formModel.props.type==='4'"
                        :label="`${$$t('vmf_columns', '列数')}: `">
                        <el-input-number
                            controls-position="right"
                            :min="1"
                            :step="1"
                            v-model.number="formModel.props.columns"
                        />
                    </el-form-item>
                    <el-form-item
                        v-if="formModel.props.type==='2'"
                        label-width="6em"
                        :label="`${$$t('vmf_interval', '间距')}: `"
                    >
                        <el-radio-group v-model="formModel.props.gapType">
                            <el-radio label="2">{{ $$t('vmf_interval2', '间隔') }}</el-radio>
                            <el-radio label="1">{{ $$t('vmf_line', '线条') }}</el-radio>
                        </el-radio-group>
                        <div v-if="formModel.props.gapType==='2'">
                            <el-input v-model="formModel.props.gapMargin" />
                        </div>
                    </el-form-item>
                    <el-form-item
                        label-width="6em"
                        :label="`${$$t('vmf_show_attribute', '显示属性')}: `"
                    >
                        <CheckboxGroupAndOr
                            :data="[{id:1,name:$$t('vmf_sub_title', '副标题')},{id:2,name:$$t('vmf_text_tag', '文本标签')},{id:4,name:$$t('vmf_image_tag', '图片标签')},{id:8,name:$$t('vmf_goods_type', '商品类型')},{id:16,name:$$t('vmf_crossed_price', '划线价')}]"
                            enable-select-all
                            v-model="formModel.props.shadowProp"
                        ></CheckboxGroupAndOr>
                    </el-form-item>
                    <draggable
                        class="form-goods-list"
                        v-bind="{draggable:'.item'}"
                        v-model="formModel.props.data"
                    >
                        <div
                            class="item"
                            v-for="(item,index) in formModel.props.data"
                            :key="item.id"
                        >
                            <div
                                class="inner"
                                :style="`background-image: url('${item.mainImageUrl}');`"
                            />

                            <div class="footer">
                                <el-button
                                    v-if="index>0"
                                    size="mini"
                                    type="warning"
                                    icon="el-icon-arrow-left"
                                    @click="onImgMoveUp(formModel.props.data,index)"
                                >
                                    <!--上移-->
                                </el-button>
                                <el-button
                                    v-if="index<formModel.props.data.length-1"
                                    size="mini"
                                    type="success"
                                    icon="el-icon-arrow-right"
                                    @click="onImgMoveDown(formModel.props.data,index)"
                                >
                                    <!--下移-->
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="onGoodsDelete(formModel.props,index)"
                                >
                                    <!--删除-->
                                </el-button>
                            </div>
                        </div>
                        <div
                            class="add-item"
                            @click="onGoodsAdd(formModel.props)"
                        >
                            <i class="el-icon-plus" />
                        </div>
                    </draggable>
                    <GoodsPicker
                        ref="GoodsPicker"
                        v-model="formModel.props.ids"
                        :api-query="formModel.props.apiQuery"
                    />
                </template>
                <template v-if="componentType === 'GoodsList'">
                    <el-form-item
                        :label="`${$$t('vmf_type', '类型')}: `"
                    >
                        <el-radio-group v-model="formModel.props.type">
                            <el-radio label="2">
                                {{ $$t('vmf_list', '列表') }}
                            </el-radio>
                            <el-radio
                                v-if='formModel.supportRowLayout'
                                label="4">
                                {{ $$t('vmf_horizontal', '横向') }}
                            </el-radio>
                            <el-radio label="1">
                                {{ $$t('vmf_two_columns', '小图(两列)') }}
                            </el-radio>
                            <el-radio
                                v-if='formModel.supportWaterfall'
                                label="3">
                                {{ $$t('vmf_waterfall_flow', '瀑布流') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        v-if="formModel.props.type==='4'"
                        :label="`${$$t('vmf_columns', '列数')}: `">
                        <el-input-number
                            controls-position="right"
                            :min="1"
                            :step="1"
                            v-model.number="formModel.props.columns"
                        />
                    </el-form-item>
                    <el-form-item
                        v-if="formModel.props.type==='2'"
                        label-width="6em"
                        :label="`${$$t('vmf_interval', '间距')}: `"
                    >
                        <el-radio-group v-model="formModel.props.gapType">
                            <el-radio label="2">{{ $$t('vmf_interval2', '间隔') }}</el-radio>
                            <el-radio label="1">{{ $$t('vmf_line', '线条') }}</el-radio>
                        </el-radio-group>
                        <div v-if="formModel.props.gapType==='2'">
                            <el-input v-model="formModel.props.gapMargin" />
                        </div>
                    </el-form-item>
                    <el-form-item
                        label-width="6em"
                        :label="`${$$t('vmf_show_attribute', '显示属性')}: `"
                    >
                        <CheckboxGroupAndOr
                            :data="[{id:1,name:$$t('vmf_sub_title', '副标题')},{id:2,name:$$t('vmf_text_tag', '文本标签')},{id:4,name:$$t('vmf_image_tag', '图片标签')},{id:8,name:$$t('vmf_goods_type', '商品类型')},{id:16,name:$$t('vmf_crossed_price', '划线价')}]"
                            enable-select-all
                            v-model="formModel.props.shadowProp"
                        ></CheckboxGroupAndOr>
                    </el-form-item>
                    <el-form-item :label="`${$$t('vmf_filter_type', '筛选类型')}: `">
                        <el-select v-model="formModel.props.orderBy">
                            <el-option
                                value=""
                                :label="`${$$t('vmf_goods_group', '商品分组')}: `"
                            />
                            <el-option
                                value="orderNum,asc"
                                :label="`${$$t('vmf_order_num_asc', '排序号-升序')}: `"
                            />
                            <el-option
                                value="orderNum,desc"
                                :label="`${$$t('vmf_order_num_asc', '排序号-降序')}: `"
                            />
                            <el-option
                                value="onSaleTime,asc"
                                :label="`${$$t('vmf_sale_time_asc', '上架时间-升序')}: `"
                            />
                            <el-option
                                value="onSaleTime,desc"
                                :label="`${$$t('vmf_sale_time_desc', '上架时间-降序')}: `"
                            />
                            <el-option
                                value="price,asc"
                                :label="`${$$t('vmf_price_asc', '价格-升序')}: `"
                            />
                            <el-option
                                value="price,desc"
                                :label="`${$$t('vmf_price_desc', '价格-降序')}: `"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if='!formModel.props.orderBy'
                        :label="$$t('vmf_goods_group', '商品分组')">
                        <RemoteSelect
                            remote="/sp/shopTag/select"
                            :placeholder="$$t('vmf_placeholder2', '请输入')"
                            :props="{id:'id',name:'tagName'}"
                            v-model="formModel.props.shopTagId"
                        ></RemoteSelect>
                    </el-form-item>
                </template>
                <template v-if="componentType==='Cms'">
                    <el-form-item :label="`${$$t('vmf_type', '类型')}: `">
                        <el-radio-group v-model="formModel.props.type">
                            <el-radio label="1">
                                {{ $$t('vmf_big_image', '大图') }}
                            </el-radio>
                            <el-radio label="2">
                                {{ $$t('vmf_right_image', '右图') }}
                            </el-radio>
                            <el-radio label="3">
                                {{ $$t('vmf_list_image', '列图') }}
                            </el-radio>
                            <el-radio label="4">
                                {{ $$t('vmf_left_image', '左图') }}
                            </el-radio>
                            <el-radio label="5">
                                {{ $$t('vmf_biserial', '双列') }}
                            </el-radio>
                            <el-radio label="7">
                                {{ $$t('vmf_list', '列表') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <draggable
                        class="form-goods-list"
                        v-bind="{draggable:'.item'}"
                        v-model="formModel.props.data"
                    >
                        <div
                            class="item"
                            v-for="(item,index) in formModel.props.data"
                            :key="item.id"
                        >
                            <div
                                class="inner"
                                :style="`background-image: url('${item.titleImageUrl}');`"
                            />

                            <div class="footer">
                                <el-button
                                    v-if="index>0"
                                    size="mini"
                                    type="warning"
                                    icon="el-icon-arrow-left"
                                    @click="onImgMoveUp(formModel.props.data,index)"
                                >
                                    <!--上移-->
                                </el-button>
                                <el-button
                                    v-if="index<formModel.props.data.length-1"
                                    size="mini"
                                    type="success"
                                    icon="el-icon-arrow-right"
                                    @click="onImgMoveDown(formModel.props.data,index)"
                                >
                                    <!--下移-->
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="onGoodsDelete(formModel.props,index)"
                                >
                                    <!--删除-->
                                </el-button>
                            </div>
                        </div>
                        <div
                            class="add-item"
                            @click="onCmsAdd"
                        >
                            <i class="el-icon-plus" />
                        </div>
                    </draggable>
                    <CmsPicker
                        ref="CmsPicker"
                        v-model="formModel.props.ids"
                    />
                </template>
                <template v-if="componentType === 'CmsList'">
                    <el-form-item :label="`${$$t('vmf_type', '类型')}: `">
                        <el-radio-group v-model="formModel.props.type">
                            <el-radio label="1">
                                {{ $$t('vmf_big_image', '大图') }}
                            </el-radio>
                            <el-radio label="2">
                                {{ $$t('vmf_right_image', '右图') }}
                            </el-radio>
                            <el-radio label="3">
                                {{ $$t('vmf_list_image', '列图') }}
                            </el-radio>
                            <el-radio label="4">
                                {{ $$t('vmf_left_image', '左图') }}
                            </el-radio>
                            <el-radio label="5">
                                {{ $$t('vmf_biserial', '双列') }}
                            </el-radio>
                            <el-radio label="7">
                                {{ $$t('vmf_list', '列表') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        :label="`${$$t('vmf_classify', '分类')}: `"
                    >
                        <CascaderPicker
                            check-strictly
                            :api-class="$api.Pt.CmsCatalog"
                            v-model="formModel.props.catId"
                        />
                    </el-form-item>
                </template>
                <!-- RichText form -->
                <template v-if="componentType === 'RichText'">
                    <el-form-item :label="`${$$t('vmf_inner_spacing', '内间距')}: `">
                        <el-input-number
                            controls-position="right"
                            v-model.number="formModel.props.data.padding"
                        />
                    </el-form-item>
                    <el-form-item :label="`${$$t('vmf_background_color', '背景颜色')}: `">
                        <el-color-picker
                            v-model="formModel.props.data.backgroundColor"
                        />
                    </el-form-item>
                    <el-form-item>
                        <Tinymce
                            :height="500"
                            :plugins="['textcolor']"
                            v-model="formModel.props.data.text"
                        />
                    </el-form-item>
                </template>
                <!-- CustomCode form -->
                <template v-if="componentType === 'CustomCode'">
                    <el-form-item :label="`${$$t('vmf_identification', '标识')}: `">
                        <el-input v-model="formModel.props.componentSign" />
                    </el-form-item>
                    <el-form-item :label="`${$$t('vmf_code', '代码')}: `">
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 3, maxRows: 20 }"
                            v-model="formModel.props.html"
                        />
                    </el-form-item>
                </template>
                <!-- Video form -->
                <template v-if="componentType === 'Video'">
                    <el-form-item :label="`${$$t('vmf_cover', '封面')}: `">
                        <upload
                            action="/rs/attachment/uploadShopDecoration"
                            :limit="1"
                            tips=""
                            v-model="formModel.props.cover"
                        />
                    </el-form-item>
                    <el-form-item :label="`${$$t('vmf_aspect_ratio', '宽高比')}: `">
                        <el-input v-model="formModel.props.aspectRatio" />
                    </el-form-item>
                    <el-form-item :label="`${$$t('vmf_autoplay', '自动播放')}: `">
                        <el-switch v-model="formModel.props.autoplay" />
                    </el-form-item>
                    <el-form-item :label="`${$$t('vmf_source', '来源')}: `">
                        <el-radio-group v-model="formModel.props.sourceType">
                            <el-radio label="1">url {{$$t('vmf_address', '地址')}}</el-radio>
                            <el-radio label="2">{{$$t('vmf_upload', '上传')}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        v-if="formModel.props.sourceType==='1'"
                        :label="$$t('vmf_address', '地址')"
                    >
                        <el-input v-model="formModel.props.src" />
                    </el-form-item>
                    <el-form-item
                        v-if="formModel.props.sourceType==='2'"
                        :label="`${$$t('vmf_please_upload', '请上传')}: `"
                    >
                        <upload
                            class='ma-t'
                            action="/rs/attachment/uploadShopDecoration"
                            :limit="1"
                            accept="video/*"
                            tips=""
                            v-model="formModel.props.source"
                        />
                    </el-form-item>
                </template>
                <!-- Video form -->
                <template v-if="componentType === 'Notification'">
                    <el-form-item
                        :label="`${$$t('vmf_font_color', '字体颜色')}: `"
                    >
                        <el-color-picker
                            v-model="formModel.props.color"
                        />
                    </el-form-item>
                    <el-form-item
                        :label="`${$$t('vmf_background_color', '背景颜色')}: `"
                    >
                        <el-color-picker
                            v-model="formModel.props.backgroundColor"
                        />
                    </el-form-item>
                    <draggable
                        class="notification-data-list"
                        v-bind="{draggable:'.item'}"
                        v-model="formModel.props.data"
                    >
                        <div
                            v-for="(item,index) in formModel.props.data"
                            :key="item.id"
                            class="item"
                        >
                            <div class="body">
                                <el-form-item
                                    label-width="3em"
                                    :label="`${$$t('vmf_title', '标题')}: `"
                                >
                                    <el-input
                                        type="textarea"
                                        autosize
                                        v-model="item.label"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label-width="3em"
                                    :label="`${$$t('vmf_link', '链接')}: `"
                                >
                                    <!--                                    <el-input v-model="item.href" />-->
                                    <LinkInput
                                        v-model="item.href"
                                        type='2'
                                    ></LinkInput>
                                </el-form-item>
                            </div>
                            <div class="footer">
                                <el-button
                                    v-if="index>0"
                                    size="mini"
                                    type="warning"
                                    icon="el-icon-arrow-up"
                                    @click="onImgMoveUp(formModel.props.data,index)"
                                >
                                    {{$$t('vmf_move_up', '上移')}}
                                </el-button>
                                <el-button
                                    v-if="index<formModel.props.data.length-1"
                                    size="mini"
                                    type="success"
                                    icon="el-icon-arrow-down"
                                    @click="onImgMoveDown(formModel.props.data,index)"
                                >
                                    {{$$t('vmf_move_down', '下移')}}
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="onImgDelete(formModel.props.data,index)"
                                >
                                    {{$$t('vmf_delete', '删除')}}
                                </el-button>
                            </div>
                        </div>
                        <el-button
                            v-if="hasNotificationListAddBtn"
                            class="ma-t w-100per"
                            icon="el-icon-plus"
                            @click="onNotificationAdd(formModel.props.data)"
                        >
                            {{$$t('vmf_add', '添加')}}
                        </el-button>
                    </draggable>
                </template>
                <!-- Video Recommend -->
                <template v-if="componentType === 'Recommend'">
                    <el-form-item
                        :label="`${$$t('vmf_selected_color', '选中色')}: `"
                    >
                        <el-color-picker
                            v-model="formModel.props.selectedColor"
                        />
                    </el-form-item>
                    <el-tabs
                        v-model="formModel.props.activeId"
                        type="card"
                        editable
                        @edit="(id,action)=>{onTabsEdit(id,action,formModel.props)}">
                        <el-tab-pane
                            v-for="(item) in formModel.props.data"
                            :key="item.id"
                            :label="item.label"
                            :name="item.id"
                        >
                            <el-form-item
                                label-width="6em"
                                :label="$$t('vmf_name', '名称')"
                            >
                                <el-input v-model="item.label" />
                            </el-form-item>
                            <el-form-item
                                label-width="6em"
                                :label="`${$$t('vmf_sub_title', '副标题')}: `"
                            >
                                <el-input v-model="item.subLabel" />
                            </el-form-item>
                            <el-form-item
                                label-width="6em"
                                :label="`${$$t('vmf_type', '类型')}: `"
                            >
                                <el-radio-group v-model="item.type">
                                    <el-radio label="2">
                                        {{ $$t('vmf_list', '列表') }}
                                    </el-radio>
                                    <el-radio label="1">
                                        {{ $$t('vmf_two_columns', '小图(两列)') }}
                                    </el-radio>
                                    <el-radio
                                        v-if='item.supportWaterfall'
                                        label="3">
                                        {{ $$t('vmf_waterfall_flow', '瀑布流') }}
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item
                                v-if="item.type==='2'"
                                label-width="6em"
                                :label="`${$$t('vmf_interval', '间距')}: `"
                            >
                                <el-radio-group v-model="item.gapType">
                                    <el-radio label="2">{{ $$t('vmf_interval2', '间隔') }}</el-radio>
                                    <el-radio label="1">{{ $$t('vmf_line', '线条') }}</el-radio>
                                </el-radio-group>
                                <div v-if="item.gapType==='2'">
                                    <el-input v-model="item.gapMargin" />
                                </div>
                            </el-form-item>
                            <el-form-item
                                label-width="6em"
                                :label="`${$$t('vmf_show_attribute', '显示属性')}: `"
                            >
                                <CheckboxGroupAndOr
                                    :data="[{id:1,name:$$t('vmf_sub_title', '副标题')},{id:2,name:$$t('vmf_text_tag', '文本标签')},{id:4,name:$$t('vmf_image_tag', '图片标签')},{id:8,name:$$t('vmf_goods_type', '商品类型')},{id:16,name:$$t('vmf_crossed_price', '划线价')}]"
                                    enable-select-all
                                    v-model="item.shadowProp"
                                ></CheckboxGroupAndOr>
                            </el-form-item>
                            <el-form-item
                                label-width="6em"
                                :label="`${$$t('vmf_filter_type', '筛选类型')}: `"
                            >
                                <el-select v-model="item.orderBy">
                                    <el-option
                                        value=""
                                        :label="`${$$t('vmf_optional_goods', '自选商品')}: `"
                                    />
                                    <el-option
                                        value="group_"
                                        :label="`${$$t('vmf_goods_group', '商品分组')}: `"
                                    />
                                    <el-option
                                        value="buyerRecommend,desc"
                                        :label="`${$$t('vmf_guess_recommend', '猜您喜欢')}: `"
                                    />
                                    <el-option
                                        value="orderNum,asc"
                                        :label="`${$$t('vmf_order_num_asc', '排序号-升序')}: `"
                                    />
                                    <el-option
                                        value="orderNum,desc"
                                        :label="`${$$t('vmf_order_num_asc', '排序号-降序')}: `"
                                    />
                                    <el-option
                                        value="onSaleTime,asc"
                                        :label="`${$$t('vmf_sale_time_asc', '上架时间-升序')}: `"
                                    />
                                    <el-option
                                        value="onSaleTime,desc"
                                        :label="`${$$t('vmf_sale_time_desc', '上架时间-降序')}: `"
                                    />
                                    <el-option
                                        value="price,asc"
                                        :label="`${$$t('vmf_price_asc', '价格-升序')}: `"
                                    />
                                    <el-option
                                        value="price,desc"
                                        :label="`${$$t('vmf_price_desc', '价格-降序')}: `"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                v-if="item.orderBy==='group_'"
                                :label="$$t('vmf_goods_group', '商品分组')">
                                <RemoteSelect
                                    remote="/sp/shopTag/select"
                                    :placeholder="$$t('vmf_placeholder2', '请输入')"
                                    :props="{id:'id',name:'tagName'}"
                                    v-model="item.shopTagId"
                                ></RemoteSelect>
                            </el-form-item>

                            <template v-if="!item.orderBy">
                                <draggable
                                    class="form-goods-list"
                                    v-bind="{draggable:'.item'}"
                                    v-model="item.data"
                                >
                                    <div
                                        class="item"
                                        v-for="(goods,index) in item.data"
                                        :key="goods.id"
                                    >
                                        <div
                                            class="inner"
                                            :style="`background-image: url('${goods.mainImageUrl}');`"
                                        />

                                        <div class="footer">
                                            <el-button
                                                v-if="index>0"
                                                size="mini"
                                                type="warning"
                                                icon="el-icon-arrow-left"
                                                @click="onImgMoveUp(item.data,index)"
                                            >
                                            <!--上移-->
                                            </el-button>
                                            <el-button
                                                v-if="index<item.data.length-1"
                                                size="mini"
                                                type="success"
                                                icon="el-icon-arrow-right"
                                                @click="onImgMoveDown(item.data,index)"
                                            >
                                            <!--下移-->
                                            </el-button>
                                            <el-button
                                                size="mini"
                                                type="danger"
                                                icon="el-icon-delete"
                                                @click="onGoodsDelete(item,index)"
                                            >
                                            <!--删除-->
                                            </el-button>
                                        </div>
                                    </div>
                                    <div
                                        class="add-item"
                                        @click="onGoodsAdd(item,`GoodsPicker_${formModel.id}_${item.id}`)"
                                    >
                                        <i class="el-icon-plus" />
                                    </div>
                                </draggable>
                                <GoodsPicker
                                    :ref="`GoodsPicker_${formModel.id}_${item.id}`"
                                    :api-query="formModel.props.apiQuery"
                                    v-model="item.ids"
                                />
                            </template>
                        </el-tab-pane>
                        <div
                            v-if="!formModel.props.data||!formModel.props.data.length"
                            style="text-align: right; margin-top: -4px;">{{ $$t('vmf_add_classify', '请点击加号添加分类') }}</div>
                    </el-tabs>
                </template>
                <!-- Video AffixTab -->
                <template v-if="componentType === 'AffixTab'">
                    <el-form-item
                        :label="`${$$t('vmf_background_color', '背景颜色')}: `"
                    >
                        <el-color-picker
                            v-model="formModel.props.backgroundColor"
                        />
                    </el-form-item>
                    <el-form-item
                        :label="`${$$t('vmf_select_color', '选中颜色')}: `"
                    >
                        <el-color-picker
                            v-model="formModel.props.selectedBackgroundColor"
                        />
                    </el-form-item>
                    <el-tabs
                        v-model="formModel.props.activeId"
                        type="card"
                        editable
                        @edit="(id,action)=>{onAffixTabsEdit(id,action,formModel.props)}">
                        <el-tab-pane
                            v-for="(item) in formModel.props.data"
                            :key="item.id"
                            :label="item.label"
                            :name="item.id"
                        >
                            <el-form-item
                                label-width="6em"
                                :label="$$t('vmf_name', '名称')"
                            >
                                <el-input v-model="item.label" />
                            </el-form-item>
                            <el-form-item
                                label-width="6em"
                                :label="`${$$t('vmf_start_identification', '起始标识')}: `"
                            >
                                <el-input
                                    v-model="item.href"
                                    placeholder="高亮响应起始标识，点击时定位到此处，也可为链接即跳转页面"/>
                            </el-form-item>
                            <el-form-item
                                label-width="6em"
                                :label="`${$$t('vmf_end_identification', '结束标识')}: `"
                            >
                                <el-input
                                    v-model="item.href2"
                                    :placeholder="$$t('vmf_end_identification_tips', '高亮响应结束标识，可空默认为起始标识')"/>
                            </el-form-item>

                        </el-tab-pane>
                        <div
                            v-if="!formModel.props.data||!formModel.props.data.length"
                            style="text-align: right; margin-top: -4px;">{{ $$t('vmf_add_classify', '请点击加号添加分类') }}</div>
                    </el-tabs>
                </template>
                <!-- LimitTimeBuyActivity -->
                <template v-if="componentType==='LimitTimeBuyActivity'">
                    <el-form-item
                        label-width="6em"
                        :label="$$t('vmf_activity', '活动')"
                    >
                        <ActivityPicker
                            v-model='formModel.props.activityId'
                            activity-type='10'
                        ></ActivityPicker>
                    </el-form-item>
                    <template v-if='formModel.props.activityId'>
                        <el-form-item
                            :label="`${$$t('vmf_type', '类型')}: `"
                        >
                            <el-radio-group v-model="formModel.props.type">
                                <el-radio label="2">
                                    {{ $$t('vmf_list', '列表') }}
                                </el-radio>
                                <el-radio
                                    v-if='formModel.supportRowLayout'
                                    label="4">
                                    {{ $$t('vmf_horizontal', '横向') }}
                                </el-radio>
                                <el-radio label="1">
                                    {{ $$t('vmf_two_columns', '小图(两列)') }}
                                </el-radio>
                                <el-radio
                                    v-if='formModel.supportWaterfall'
                                    label="3">
                                    {{ $$t('vmf_waterfall_flow', '瀑布流') }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item
                            v-if="formModel.props.type==='4'"
                            :label="`${$$t('vmf_columns', '列数')}: `">
                            <el-input-number
                                controls-position="right"
                                :min="1"
                                :step="1"
                                v-model.number="formModel.props.columns"
                            />
                        </el-form-item>
                        <el-form-item
                            v-if="formModel.props.type==='2'"
                            label-width="6em"
                            :label="`${$$t('vmf_interval', '间距')}: `"
                        >
                            <el-radio-group v-model="formModel.props.gapType">
                                <el-radio label="2">{{ $$t('vmf_interval2', '间隔') }}</el-radio>
                                <el-radio label="1">{{ $$t('vmf_line', '线条') }}</el-radio>
                            </el-radio-group>
                            <div v-if="formModel.props.gapType==='2'">
                                <el-input v-model="formModel.props.gapMargin" />
                            </div>
                        </el-form-item>
                        <el-form-item
                            label-width="6em"
                            :label="`${$$t('vmf_show_attribute', '显示属性')}: `"
                        >
                            <CheckboxGroupAndOr
                                :data="[{id:1,name:$$t('vmf_sub_title', '副标题')},{id:2,name:$$t('vmf_text_tag', '文本标签')},{id:4,name:$$t('vmf_image_tag', '图片标签')},{id:8,name:$$t('vmf_goods_type', '商品类型')},{id:16,name:$$t('vmf_crossed_price', '划线价')}]"
                                enable-select-all
                                v-model="formModel.props.shadowProp"
                            ></CheckboxGroupAndOr>
                        </el-form-item>
                        <draggable
                            class="form-goods-list"
                            v-bind="{draggable:'.item'}"
                            v-model="formModel.props.data"
                        >
                            <div
                                class="item"
                                v-for="(item,index) in formModel.props.data"
                                :key="item.id"
                            >
                                <div
                                    class="inner"
                                    :style="`background-image: url('${item.mainImageUrl}');`"
                                />

                                <div class="footer">
                                    <el-button
                                        v-if="index>0"
                                        size="mini"
                                        type="warning"
                                        icon="el-icon-arrow-left"
                                        @click="onImgMoveUp(formModel.props.data,index)"
                                    >
                                    <!--上移-->
                                    </el-button>
                                    <el-button
                                        v-if="index<formModel.props.data.length-1"
                                        size="mini"
                                        type="success"
                                        icon="el-icon-arrow-right"
                                        @click="onImgMoveDown(formModel.props.data,index)"
                                    >
                                    <!--下移-->
                                    </el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        icon="el-icon-delete"
                                        @click="onGoodsDelete(formModel.props,index)"
                                    >
                                    <!--删除-->
                                    </el-button>
                                </div>
                            </div>
                            <div
                                class="add-item"
                                @click="onGoodsAdd(formModel.props,`GoodsPicker_${formModel.componentType}`)"
                            >
                                <i class="el-icon-plus" />
                            </div>
                        </draggable>
                        <GoodsPicker
                            :ref="`GoodsPicker_${formModel.componentType}`"
                            v-model="formModel.props.ids"
                            :activity-id="formModel.props.activityId"
                            :api-query="formModel.props.apiQuery"
                        />
                    </template>
                </template>

                <template v-if='hasSupportAd'>
                    <el-form-item
                        :label="`${$$t('vmf_open_ad', '开启广告')}: `"
                    >
                        <el-switch
                            :value="isSupportAd"
                            @input='onSupportAdInput'/>
                    </el-form-item>
                </template>

                <template v-if="isFormImgList">
                    <draggable
                        class="form-img-list"
                        v-bind="{draggable:'.item'}"
                        v-model="formImgListModel"
                    >
                        <div
                            v-for="(item,index) in formImgListModel"
                            :key="item.id"
                            class="item"
                        >
                            <div class="body">
                                <upload
                                    action="/rs/attachment/uploadShopDecoration"
                                    :limit="1"
                                    tips=""
                                    v-model="item.imgModel"
                                />
                                <div class="inner">
                                    <el-form-item
                                        label-width="3em"
                                        :label="$$t('vmf_name', '名称')"
                                    >
                                        <el-input v-model="item.label" />
                                    </el-form-item>
                                    <el-form-item
                                        label-width="3em"
                                        :label="`${$$t('vmf_link', '链接')}`"
                                    >
                                        <!--                                        <el-input v-model="item.href" />-->
                                        <LinkInput
                                            v-model="item.href"
                                            type='2'
                                        ></LinkInput>
                                    </el-form-item>
                                    <el-form-item
                                        label-width="3em"
                                        :label="`${$$t('vmf_identification', '标识')}: `"
                                    >
                                        <el-input v-model="item.code" />
                                    </el-form-item>
                                    <el-form-item
                                        v-if="componentType === 'Ad'"
                                        label-width="5em"
                                        :label="`${$$t('vmf_support_long_press', '支持长按')}`"
                                    >
                                        <el-switch v-model="item.longpress" />
                                        <span class='tc-g6 ma-l fs-small'>{{$$t('vmf_support_long_press_tips', '是否支持长按事件(仅小程序)')}}</span>
                                    </el-form-item>
                                    <el-form-item
                                        v-if="formModel.supportItemBackgroundColor"
                                        label-width="4em"
                                        :label="`${$$t('vmf_background_color', '背景颜色')}`"
                                    >
                                        <el-color-picker
                                            v-model="item.backgroundColor"
                                        />
                                    </el-form-item>
                                </div>
                            </div>
                            <div class="footer">
                                <el-button
                                    v-if="index>0"
                                    size="mini"
                                    type="warning"
                                    icon="el-icon-arrow-up"
                                    @click="onImgMoveUp(formImgListModel,index)"
                                >
                                    {{$$t('vmf_move_up', '上移')}}
                                </el-button>
                                <el-button
                                    v-if="index<formImgListModel.length-1"
                                    size="mini"
                                    type="success"
                                    icon="el-icon-arrow-down"
                                    @click="onImgMoveDown(formImgListModel,index)"
                                >
                                    {{$$t('vmf_move_down', '下移')}}
                                </el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    @click="onImgDelete(formImgListModel,index)"
                                >
                                    {{$$t('vmf_delete', '删除')}}
                                </el-button>
                            </div>
                        </div>
                        <el-button
                            v-if="hasFormImgListAddBtn"
                            class="ma-t w-100per"
                            icon="el-icon-plus"
                            @click="onImgAdd(formImgListModel)"
                        >
                            {{ $$t('vmf_add_image', '添加图片') }}
                        </el-button>
                    </draggable>
                </template>

                <!--自定义-->
                <template v-for="(item,index) in (formModel.control||[])">
                    <el-form-item
                        :key="index"
                        :label="item.label"
                    >
                        <component
                            :is="item.formComponent"
                            v-model="formModel.props[item.name]"
                        ></component>
                    </el-form-item>
                </template>
            </el-form>
            <!--<slot/>-->
            <!--            <pre class="json-preview">{{ currentComponent }}</pre>-->
        </div>
    </div>
</template>

<script>
import { Utils } from 'vmf';
import LinkInput from './_linkInput';
import ActivityPicker from './_activityPicker';
import storeMixin from '../storeMixin';
import GoodsPicker from './_goodsPicker';
import CmsPicker from './_cmsPicker';

export default {
    name: 'ControlPanel',
    mixins: [storeMixin],
    components: { LinkInput, ActivityPicker, CmsPicker, GoodsPicker },
    computed: {
        formModel() {
            return this.currentComponent || { props: {} };
        },
        componentType() {
            return (this.currentComponent || {}).componentType;
        },
        componentName() {
            const { showComponentsMap, componentType } = this;
            if (componentType === 'Page') return '页面';
            return (showComponentsMap[componentType] || {}).name;
        },
        hasComponentMargin() {
            return Utils.isDef(this.formModel.componentMargin);
        },
        hasComponentPadding() {
            return Utils.isDef(this.formModel.componentPadding);
        },
        hasComponentRadius() {
            return Utils.isDef(this.formModel.componentRadius);
        },
        isShow() {
            if (!this.currentComponent) return false;
            return this.controlOffsetTop !== null;
        },
        hasTabs() {
            const { componentType } = this;
            return ['Recommend'].includes(componentType);
        },
        currentTab() {
            const { hasTabs, formModel } = this;
            if (!hasTabs) return null;
            const { props } = formModel;
            let res = null;
            props.data.some(item => {
                const b = item.id === props.activeId;
                if (b) res = item;
                return b;
            });
            return res;
        },
        formImgListModel: {
            get() {
                const { formModel, currentTab } = this;
                return (currentTab && currentTab.adList) || formModel.props.adList || formModel.props.data;
            },
            set(val) {
                const { formModel, currentTab } = this;
                const props = currentTab || formModel.props;
                if (props.adList) {
                    props.adList = val;
                } else {
                    props.data = val;
                }
            },
        },
        // 判断组件
        isFormImgList() {
            const { componentType, formModel, currentTab } = this;
            const props = currentTab || formModel.props;
            return (
                !!props.adList ||
                componentType === 'Ad' ||
                componentType === 'Toolbar' ||
                componentType === 'AdCube' ||
                componentType === 'MagicCube'
            );
        },
        hasFormImgListAddBtn() {
            const { componentType, isFormImgList, formModel } = this;
            if (!isFormImgList) return false;
            if (componentType === 'AdCube' && formModel.props.data.length > 2) {
                return false;
            }
            return true;
        },
        hasNotificationListAddBtn() {
            const { componentType, formModel } = this;
            return componentType === 'Notification' && formModel.props.data.length <= 5;
        },
        isSupportAd() {
            const { formModel, currentTab } = this;
            return !!((currentTab && currentTab.adList) || formModel.props.adList);
        },
        hasSupportAd() {
            const { /* componentType, */ formModel, hasTabs } = this;
            // if (!formModel.supportAd) return false;
            // if (componentType !== 'Recommend') return formModel.supportAd;
            if (hasTabs && (!formModel.props.data || !formModel.props.data.length)) return false;
            return formModel.supportAd;
        },
    },
    methods: {
        // 图片组件的事件
        onImgMoveUp(list, index) {
            const item = list.splice(index, 1);
            list.splice(index - 1, 0, ...item);
        },
        onImgMoveDown(list, index) {
            const item = list.splice(index, 1);
            list.splice(index + 1, 0, ...item);
        },
        onImgDelete(list, index) {
            list.splice(index, 1);
        },
        onGoodsDelete(data, index) {
            data.ids.splice(index, 1);
            this.onImgDelete(data.data, index);
        },
        onImgAdd(list) {
            const res = {
                id: this.$utils.getKey(),
                imgModel: [],
                src: '',
                href: '',
                alt: '',
                longpress: false, // 长按识别仅小程序
            };
            if (this.componentType === 'Ad') {
                res.backgroundColor = '';
            }
            list.push(res);
        },
        onNotificationAdd(list) {
            list.push({
                id: this.$utils.getKey(),
                href: '',
                label: '',
            });
        },
        onGoodsAdd(props, ref = 'GoodsPicker') {
            // const { props } = this.formModel;
            props.ids = props.data.reduce((p, c) => {
                p.push(c.goodsId);
                return p;
            }, []);
            let GoodsPicker_ = this.$refs[ref];
            if (!GoodsPicker_) return;
            GoodsPicker_ = GoodsPicker_[0] || GoodsPicker_;
            // const { GoodsPicker: GoodsPicker_ } = this.$refs;
            GoodsPicker_.open();
        },
        onCmsAdd() {
            const { props } = this.formModel;
            props.ids = props.data.reduce((p, c) => {
                p.push(c.id);
                return p;
            }, []);
            const { CmsPicker: CmsPicker_ } = this.$refs;
            CmsPicker_.open();
        },
        onSupportAdInput(val) {
            const { formModel, currentTab } = this;
            const props = currentTab || formModel.props;
            if (val) {
                this.$set(props, 'adList', []);
            } else {
                this.$delete(props, 'adList');
            }
        },
        onTabsEdit(tabId, action, tabs) {
            const { formModel } = this;
            if (action === 'add') {
                const id = Utils.getUniqueId('tab-');
                tabs.data.push({
                    id,
                    label: '',
                    subLabel: '',
                    orderBy: '',
                    shopTagId: '',
                    type: '1',
                    gapType: '1',
                    shadowProp: 0,
                    gapMargin: '',
                    ids: [],
                    data: [],
                    supportAd: formModel.supportAd,
                    supportWaterfall: formModel.supportWaterfall,
                    content: '',
                });
                tabs.activeId = id;
            } else if (action === 'remove') {
                let currentTab = null;
                let index = -1;
                tabs.data.some((item, i) => {
                    const b = item.id === tabId;
                    if (b) {
                        currentTab = item;
                        index = i;
                    }
                    return b;
                });
                if (!currentTab) return;
                const nextTab = tabs.data[index + 1] || tabs.data[index - 1];
                tabs.activeId = (nextTab || {}).id || '';
                tabs.data.splice(index, 1);
            }
        },
        onAffixTabsEdit(tabId, action, tabs) {
            if (action === 'add') {
                const id = Utils.getUniqueId('tab-');
                tabs.data.push({
                    id,
                    label: '',
                    subLabel: '',
                    href: '',
                    href2: '',
                });
                tabs.activeId = id;
            } else if (action === 'remove') {
                let currentTab = null;
                let index = -1;
                tabs.data.some((item, i) => {
                    const b = item.id === tabId;
                    if (b) {
                        currentTab = item;
                        index = i;
                    }
                    return b;
                });
                if (!currentTab) return;
                const nextTab = tabs.data[index + 1] || tabs.data[index - 1];
                tabs.activeId = (nextTab || {}).id || '';
                tabs.data.splice(index, 1);
            }
        },
    },
};
</script>

<style lang="scss">
.control-panel {
    position: relative;
    border-radius: $padding;
    border-left: 1px solid $color-border;
    margin-left: $margin;
    box-shadow: 0 0 16px -8px #000;
    background-color: #fff;
    &:before {
        content: '';
        position: absolute;
        right: 100%;
        top: 10px;
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-right: 10px solid #fff;
        border-bottom: 10px solid transparent;
    }

    > .header {
        padding: 0 $padding;
        font-weight: bold;
        cursor: pointer;
        > .inner {
            border-bottom: 1px solid $color-border;
            padding: $padding 0;
        }
    }
    > .body {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        padding: $padding;
        > form {
            width: 700px;
        }
        > .json-preview {
            width: 500px;
            overflow: auto;
            max-height: 600px;
            background-color: #343a40;
            color: #adb5bd;
            margin-left: 10px;
        }
    }
}

.form-img-list {
    background-color: $gray4;
    padding: $padding;
    border-radius: $padding-small;
    margin-bottom: 18px;
    > .item {
        border-radius: $padding-small;
        padding: $padding;
        background-color: #fff;
        + .item {
            margin-top: $margin;
        }
        > .body {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
            > .upload-wrap {
                flex: 0 0 auto;
            }
            > .inner {
                flex: 1 1 1%;
            }
        }
        > .footer {
            margin-top: $margin-small;
        }
    }
}

.form-goods-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    > .item {
        width: 120px;
        margin: $margin-small;
        > .inner {
            width: 100%;
            height: 0;
            padding-top: 100%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            border: 1px solid $color-border;
        }

        > .footer {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: $margin-small;
            > .el-button {
                flex: 0 0 30%;
                padding: 2px 2px;
                + .el-button {
                    margin-left: 0;
                }
            }
        }
    }
    > .add-item {
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
        margin: $margin-small;
        border: 1px solid $color-border;
        font-size: 40px;
        color: $gray5;
        cursor: pointer;
    }
}

.notification-data-list {
    background-color: $gray4;
    padding: $padding;
    border-radius: $padding-small;
    > .item {
        border-radius: $padding-small;
        padding: $padding;
        background-color: #fff;

        + .item {
            margin-top: $margin;
        }

        > .body {
        }

        > .footer {
            margin-top: $margin-small;
        }
    }
}
</style>
