{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" href="STATIC_EXT/colorPicker/css/colorpicker.css" />
<link rel="stylesheet" href="STATIC_EXT/diyview/css/diyview.css" />
<link rel="stylesheet" href="SHOP_CSS/guess_you_like.css"/>
{/block}
{block name="main"}
<div id="diyView" v-if="lazyLoad">

    <div class="preview-wrap">

        <div class="preview-restore-wrap">

            <div class="div-wrap">

                <div class='diy-view-wrap layui-form' :style="{ backgroundColor : global.pageBgColor }">

                    <div class="preview-head">
                        <tabbar :global="global"></tabbar>
                    </div>

                    <div class="preview-block">

                        <div class="preview-draggable">

                            <h3 class="goods-recommend-title" v-if="data.title">
                                <span>{{ data.title }}</span>
                            </h3>
                            <div class="goods-list row1-of2 style-2">
                                <div class="goods-item" v-for="(index) in [1,2,3,4]" :key="index">
                                    <div class="goods-img">
                                        <img :src="changeImgUrl('public/static/img/default_img/square.png')" />
                                    </div>

                                    <div class="info-wrap">

                                        <div class="goods-name">商品名称</div>

                                        <div class="pro-info">
                                            <div class="discount-price">
                                                <div class="price-wrap">
                                                    <span class="unit text-color">¥</span>
                                                    <span class="price text-color">{{ index * 100 }}</span>
                                                    <span class="unit text-color">.00</span>
                                                </div>
                                                <div class="delete-price">¥198</div>
                                                <div class="sale">已售63件</div>
                                            </div>

                                            <template v-if="data.control">

                                                <!-- 购物车图标 -->
                                                <div v-if="data.style == 'icon-cart'" class="cart shopping-cart-btn iconfont icongouwuche" :style="{ color : data.textColor }"></div>

                                                <!--加号图标 -->
                                                <div v-else-if="data.style == 'icon-add'" class="cart plus-sign-btn iconfont iconjia2" :style="{ color : data.textColor }"></div>

                                                <!-- 按钮 -->
                                                <div v-else-if="data.style == 'button'" class="cart buy-btn" :style="{fontWeight: (data.fontWeight ? 'bold' : 'normal'), backgroundColor : data.bgColor, color : data.textColor,borderRadius : data.aroundRadius + 'px',padding : ('0 '+  data.padding + 'px') }">{{ data.text }}</div>

                                                <!-- 自定义图标 -->
                                                <div v-else-if="data.style == 'icon-diy'" class="icon-diy">
                                                    <iconfont :icon="data.iconDiy.icon" v-if="data.iconDiy.icon" :value="data.iconDiy.style ? data.iconDiy.style : ''"></iconfont>
                                                </div>

                                            </template>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="edit-attribute">
                            <div class="attr-wrap">
                                <div class="restore-wrap">

                                    <div class="attr-title">
                                        <span class="title">商品推荐</span>
                                        <div class="tab-wrap">
                                            <span class="active bg-color" data-type="content">内容</span>
                                            <span data-type="style">样式</span>
                                        </div>
                                    </div>

                                    <div class="edit-content-wrap">

                                        <div class="layui-form-item">
                                            <label class="layui-form-label sm">标题名称</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" v-model="data.title" maxlength="15" placeholder="请输入标题" class="layui-input" autocomplete="off" lay-verify="required" />
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <label class="layui-form-label sm">适用页面</label>
                                            <div class="layui-input-block">

                                                <div @click="addSupportPage('goods_detail')" class="layui-unselect layui-form-checkbox" :class="{ 'layui-form-checked' : data.supportPage.indexOf('goods_detail') != -1 }" lay-skin="primary">
                                                    <span>商品详情</span>
                                                    <i class="layui-icon layui-icon-ok"></i>
                                                </div>

                                                <div @click="addSupportPage('cart')" class="layui-unselect layui-form-checkbox" :class="{ 'layui-form-checked' : data.supportPage.indexOf('cart') != -1 }" lay-skin="primary">
                                                    <span>购物车</span>
                                                    <i class="layui-icon layui-icon-ok"></i>
                                                </div>

                                                <div @click="addSupportPage('collect')" class="layui-unselect layui-form-checkbox" :class="{ 'layui-form-checked' : data.supportPage.indexOf('collect') != -1 }" lay-skin="primary">
                                                    <span>关注页面</span>
                                                    <i class="layui-icon layui-icon-ok"></i>
                                                </div>

                                                <div @click="addSupportPage('pay')" class="layui-unselect layui-form-checkbox" :class="{ 'layui-form-checked' : data.supportPage.indexOf('pay') != -1 }" lay-skin="primary">
                                                    <span>支付结果页</span>
                                                    <i class="layui-icon layui-icon-ok"></i>
                                                </div>

                                                <div @click="addSupportPage('order_detail')" class="layui-unselect layui-form-checkbox" :class="{ 'layui-form-checked' : data.supportPage.indexOf('order_detail') != -1 }" lay-skin="primary">
                                                    <span>订单详情</span>
                                                    <i class="layui-icon layui-icon-ok"></i>
                                                </div>

                                                {if addon_is_exit('supermember')}
                                                <div @click="addSupportPage('super_member')" class="layui-unselect layui-form-checkbox" :class="{ 'layui-form-checked' : data.supportPage.indexOf('super_member') != -1 }" lay-skin="primary">
                                                    <span>超级会员卡</span>
                                                    <i class="layui-icon layui-icon-ok"></i>
                                                </div>
                                                {/if}

                                                {if addon_is_exit('divideticket')}
                                                <div @click="addSupportPage('guafen')" class="layui-unselect layui-form-checkbox" :class="{ 'layui-form-checked' : data.supportPage.indexOf('guafen') != -1 }" lay-skin="primary">
                                                    <span>好友瓜分券</span>
                                                    <i class="layui-icon layui-icon-ok"></i>
                                                </div>
                                                {/if}

                                                {if addon_is_exit('fenxiao')}
                                                <div @click="addSupportPage('fenxiao_level')" class="layui-unselect layui-form-checkbox" :class="{ 'layui-form-checked' : data.supportPage.indexOf('fenxiao_level') != -1 }" lay-skin="primary">
                                                    <span>分销等级页</span>
                                                    <i class="layui-icon layui-icon-ok"></i>
                                                </div>
                                                {/if}
                                            </div>
                                        </div>

                                        <div class="word-aux diy-word-aux">控制猜你喜欢模块在页面中的显示与隐藏</div>

                                        <div class="layui-form-item">
                                            <label class="layui-form-label sm">数据来源</label>
                                            <div class="layui-input-block">

                                                <div @click="data.sources = 'sort'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.sources == 'sort') }">
                                                    <i class="layui-anim layui-icon">{{ data.sources == 'sort' ? "&#xe643;" : "&#xe63f;" }}</i>
                                                    <div>按排序获取</div>
                                                </div>

                                                <div @click="data.sources = 'browse'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.sources == 'browse') }">
                                                    <i class="layui-anim layui-icon">{{ data.sources == 'browse' ? "&#xe643;" : "&#xe63f;" }}</i>
                                                    <div>按最近浏览</div>
                                                </div>

                                                <div @click="data.sources = 'sale'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.sources == 'sale') }">
                                                    <i class="layui-anim layui-icon">{{ data.sources == 'sale' ? "&#xe643;" : "&#xe63f;" }}</i>
                                                    <div>按销量获取</div>
                                                </div>

                                                <div @click="data.sources = 'diy'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.sources == 'diy') }">
                                                    <i class="layui-anim layui-icon">{{ data.sources == 'diy' ? "&#xe643;" : "&#xe63f;" }}</i>
                                                    <div>手动设置</div>
                                                </div>

                                            </div>
                                            <div class="word-aux diy-word-aux js-sources-tips"></div>
                                        </div>

                                        <div class="layui-form-item js-diy-select-goods"  v-if="data.sources == 'diy'">
                                            <label class="layui-form-label sm">手动选择</label>
                                            <div class="layui-input-block">
                                                <div class="selected-style">
                                                    <span @click="addGoods()" :class="{ 'text-color' : data.goodsIds.length > 0 }">{{ data.goodsIds.length > 0 ? '已选' + data.goodsIds.length + '个' : '选择商品' }}</span>
                                                    <i class="iconfont iconyoujiantou"></i>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="template-edit-title">
                                            <h3>购买按钮</h3>
                                            <div class="layui-form-item">
                                                <label class="layui-form-label sm">是否显示</label>
                                                <div class="layui-input-block">
                                                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="data.control = !data.control" :class="{ 'layui-form-checked' : data.control }">
                                                        <span>{{ data.control ? '显示' : '隐藏' }}</span>
                                                        <i class="layui-icon layui-icon-ok"></i>
                                                    </div>
                                                </div>
                                            </div>

                                            <template v-if="data.control">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label sm">购物车事件</label>
                                                    <div class="layui-input-block">
                                                        <div @click="data.cartEvent='detail'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.cartEvent=='detail') }">
                                                            <i class="layui-anim layui-icon">{{ data.cartEvent=='detail' ? "&#xe643;" : "&#xe63f;" }}</i>
                                                            <div>跳转商品详情</div>
                                                        </div>
                                                        <div @click="data.cartEvent='cart'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.cartEvent=='cart') }">
                                                            <i class="layui-anim layui-icon">{{ data.cartEvent=='cart' ? "&#xe643;" : "&#xe63f;" }}</i>
                                                            <div>加入购物车</div>
                                                        </div>
                                                    </div>
                                                    <p class="word-aux" style="margin-left: 100px;" v-if="data.cartEvent=='cart'">只有实物商品才能加入购物车，虚拟商品会跳转到商品详情</p>
                                                </div>
                                                <div class="layui-form-item btn-style">
                                                    <label class="layui-form-label sm">样式</label>
                                                    <div class="layui-input-block">
                                                        <div class="item" :class="{ 'border-color' : data.style == 'button' }" @click="data.style = 'button';data.textColor= data.textColor == '#FF6A00' ? '#FFFFFF' : data.textColor">
                                                            <span class="buy-btn bg-color">按钮</span>
                                                        </div>
                                                        <div class="item" :class="{ 'border-color' : data.style == 'icon-cart' }" @click="data.style = 'icon-cart';data.textColor= data.textColor == '#FFFFFF' ? '#FF6A00' : data.textColor">
                                                            <span class="shopping-cart-btn iconfont icongouwuche text-color border-color"></span>
                                                        </div>
                                                        <div class="item" :class="{ 'border-color' : data.style == 'icon-add' }" @click="data.style = 'icon-add';data.textColor= data.textColor == '#FFFFFF' ? '#FF6A00' : data.textColor">
                                                            <span class="plus-sign-btn iconfont iconjia2 text-color border-color"></span>
                                                        </div>
                                                        <div class="item" :class="{ 'border-color' : data.style == 'icon-diy' }" @click="data.style = 'icon-diy';data.textColor= data.textColor == '#FFFFFF' ? '#FF6A00' : data.textColor">
                                                            <span class="diy-btn text-color border-color">自定义</span>
                                                        </div>
                                                    </div>

                                                    <div class="layui-input-block diy-icon" v-show="data.style == 'icon-diy'">
                                                        <img-icon-upload :data="{data : data.iconDiy, displayType : 'icon'}"></img-icon-upload>
                                                        <div class="action-box">
                                                            <div class="action" @click="iconStyle($event)"><i class="iconfont iconpifu"></i></div>
                                                            <div class="action" id="goods-list-color"><i class="iconfont iconyanse"></i></div>
                                                        </div>
                                                    </div>

                                                </div>

                                                <div class="layui-form-item" v-show="data.style == 'button'">
                                                    <label class="layui-form-label sm">文字</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" v-model="data.text" maxlength="6" placeholder="请输入按钮文字" class="layui-input">
                                                    </div>
                                                </div>

                                            </template>
                                        </div>

                                    </div>

                                    <div class="edit-style-wrap" style="display: none;">
                                        <div class="template-edit-title">
                                            <h3>购买按钮</h3>
                                            <template v-if="data.style == 'button'">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label sm">是否加粗</label>
                                                    <div class="layui-input-block">
                                                        <div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="data.fontWeight = !data.fontWeight" :class="{ 'layui-form-checked' : data.fontWeight }">
                                                            <span>{{ data.fontWeight ? '加粗' : '常规' }}</span>
                                                            <i class="layui-icon layui-icon-ok"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                                <slide :data="{ field : 'padding', label : '按钮边距', min: 0, max : 20 }"></slide>
                                                <slide :data="{ field : 'aroundRadius', label: '圆角', min:0, max: 50 }"></slide>
                                            </template>

                                            <div class="layui-form-item">
                                                <label class="layui-form-label sm">色调</label>
                                                <div class="layui-input-block">
                                                    <div @click="data.theme='default'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.theme == 'default') }">
                                                        <i class="layui-anim layui-icon">{{ data.theme == 'default' ? "&#xe643;" : "&#xe63f;" }}</i>
                                                        <div>跟随主题风格</div>
                                                    </div>
                                                    <div @click="data.theme='diy'" :class="{ 'layui-unselect layui-form-radio' : true,'layui-form-radioed' : (data.theme == 'diy') }">
                                                        <i class="layui-anim layui-icon">{{ data.theme == 'diy' ? "&#xe643;" : "&#xe63f;" }}</i>
                                                        <div>自定义</div>
                                                    </div>
                                                </div>
                                            </div>

                                            <template v-if="data.theme == 'diy'">
                                                <color v-if="data.style == 'button'" :data="{ field : 'bgColor', 'label' : '背景颜色', defaultColor : '#FF6A00' }"></color>
                                                <color :data="{ field : 'textColor', 'label' : '文字颜色', defaultColor : '#FFFFFF' }"></color>
                                            </template>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>

    <div class="custom-save js-bottom-custom-save">
        <button class="layui-btn save" lay-submit lay-filter="save">保存</button>
    </div>
</div>

<input id="guessYouLikeConfig" type="hidden" value="{$config|json_encode}">
{/block}
{block name="script"}
<script>
    var storeIsExit = '{$store_is_exit}';
</script>
<script src="STATIC_JS/vue.js"></script>
<script src="STATIC_EXT/colorPicker/js/colorpicker.js"></script>
<script src="STATIC_EXT/diyview/js/components.js"></script>
<script src="SHOP_JS/guess_you_like.js"></script>
{include file="app/shop/view/diy/iconfont_component.html"/}
{/block}