<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('首页排版')" />
    <style>
        .home_page {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .left_content, .right_content {
            font-size: 16px;
            font-weight: 600;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 100vh;
            position: relative;
        }
        .gitHot {
            position: fixed;
            bottom: 40px;
        }
        .left_title, .right_title {
            margin-bottom: 12px;
        }
        .function_area {
            position: relative;
            width: 375px;
            height: 1190px;
            border: 1px solid #ccc;
        }
        .function_area .banner {
            position: absolute;
            width: 373px;
            height: 244px;
            background: rgba(0,0,0,0);
            left: 1px;
            top: 104px;
            cursor: pointer;
            background: burlywood;
            text-align: center;
            line-height: 244px;
        }
        
        .banner span, .searchAreaModeSp {
            /* display: inline-block; */
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            border: 2px solid yellowgreen;
            right: -358px;
            top: -10px;
            color: yellowgreen;
            cursor: pointer;
            display: none;
        }
        .huDongBanner {
            height: 160px;
            position: absolute;
            width: 373px;
            background: rgba(0,0,0,0);
            cursor: pointer;
            /* text-align: center; */
            /* line-height: 160px; */
            background: chocolate;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .moFang span, .jinGangWei span, .huDongBanner span, .XINPINTUIJIAN span {
            /* display: inline-block; */
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            text-align: center;
            line-height: 18px;
            border: 2px solid yellowgreen;
            right: -135px;
            top: -80px;
            color: yellowgreen;
            cursor: pointer;
            display: none;
            z-index: 100;
        }
        .XINPINTUIJIAN span {
            /* display: inline-block; */
            top: -225px;
            right: -152px;
        }
        .moFang span {
            right: -168px;
            top: -225px;
        }
        .jinGangWei span {
            right: -162px;
            top: -122px;
        }
        .function_area .moFang {
            position: absolute;
            width: 373px;
            height: 450px;
            background: rgba(0,0,0,0);
            left: 1px;
            cursor: pointer;
            background: cyan;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .function_area .jinGangWei {
            position: absolute;
            width: 373px;
            height: 250px;
            background: rgba(0,0,0,0);
            left: 1px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            background: deepskyblue;
        }
        .function_area .XINPINTUIJIAN {
            position: absolute;
            width: 373px;
            height: 450px;
            background: rgba(0,0,0,0);
            left: 1px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            background: deeppink;
        }
        .banner:hover,.searchAreaMode:hover,.moFang:hover,.jinGangWei:hover,.huDongBanner:hover,.XINPINTUIJIAN:hover {
            border-radius: 8px;
            border: 2px dashed yellowgreen;
        }
        .banner:hover .bannerSp,.searchAreaMode:hover .searchAreaModeSp, .moFang:hover .mofangSp, .jinGangWei:hover .jinGangWeiSp, .huDongBanner:hover .huDongBannerSp, .XINPINTUIJIAN:hover .XINPINTUIJIANSp {
            display: inline-block;
        }
        .searchAreaMode {
            position: absolute;
            width: 373px;
            height: 46px;
            background: rgba(0,0,0,0);
            left: 1px;
            top: 56px;
            cursor: pointer;
            background: bisque;
            text-align: center;
            line-height: 46px;
        }
        body .layer-ext-moon .layui-layer-btn {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="home_page">
        <div class="left_content">
            <div class="left_title">
                营销组件
            </div>
            <div class="function_btn">
                <button type="button" class="btn btn-primary" onclick="goArea(1)">焦点</button>
                <button type="button" class="btn btn-warning" onclick="goArea(2)">活动banner</button>
                <button type="button" class="btn btn-success" onclick="goArea(4)">魔方</button>
                <button type="button" class="btn btn-info" onclick="goArea(7)">精选商品</button>
                <button type="button" class="btn btn-info" onclick="goArea(8)">新品推荐</button>
                <!-- <button type="button" class="btn" disabled onclick="goArea(3)">限时秒杀</button> -->
            </div>
            <button type="button" class="btn btn-danger gitHot" onclick="git()">上线</button>
        </div>
        <div class="right_content">
            <div class="right_title">
                选择区域
            </div>
            <div class="function_area" style="position: relative;">
                <div class="searchAreaMode" onclick="goArea(5)">
                    搜索位
                    <!-- <span class="searchAreaModeSp" onclick="delSearchAreaModeSpp()">X</span> -->
                </div>
                <div class="banner" onclick="goArea(6)">
                    顶部BANNER
                    <!-- <span class="bannerSp" onclick="delbannerSp()">X</span> -->
                </div>
                <div class="moFang" onclick="goArea(4)">
                    <div>
                        魔方位
                    </div>
                    <span class="mofangSp" onclick="delSp(4)">X</span>
                </div>
                <div class="jinGangWei" onclick="goArea(1)">
                    <div>
                        焦点
                    </div>
                    <span class="jinGangWeiSp" onclick="delSp(1)">X</span>
                </div>
                <div class="XINPINTUIJIAN" onclick="goArea(8)">
                    <div>
                        新品推荐
                    </div>
                    <span class="XINPINTUIJIANSp" onclick="delSp(5)">X</span>
                </div>
                <div class="huDongBanner" onclick="goArea(2)">
                    <div>
                        活动BANNER
                    </div>
                    <span class="huDongBannerSp" onclick="delSp(2)">X</span>
                </div>
                <!-- <iframe id="iframe" src="http://172.16.3.82:8080/#/goods/home?place=admin" width="375" height="1190" frameborder="0"></iframe> -->
            </div>
            
        </div>
    </div>
    <th:block th:include="include :: footer"/>
    <script th:inline="javascript">
        var prefix2 = ctx + "local";
        $(function() {
            let url = window.location.hostname;
            if (url.includes('test')) {
                $("#iframe").attr('src', 'https://ttestm.zhengzai.tv/#/goods/home?place=admin');
            } else if (!url.includes('test') && url.includes('admin')) {
                $("#iframe").attr('src', 'https://m.zhengzai.tv/#/goods/home?place=admin');
            } else {

            }
            modalPx()
        })
        function goArea (num) {
            switch(num) {
                case 1:
                    // $.modal.open('添加用户', prefix2 + "/form", '900', '320', callback);
                    $.modal.open('金刚位', prefix2 + "/kingArea?id=" + 1212,900,800, cancel)
                    break;
                case 5:
                    $.modal.open('商品搜索', prefix2 + "/searchStore?id=" + 1212,900,800, cancel)
                    // $.modal.openTab('商品搜索', prefix2 + "/searchStore?id=" + 1212)
                    break;
                case 6:
                    $.modal.open('顶部banner', prefix2 + "/topBanner?id=" + num,900,800, cancel)
                    // $.modal.openTab('顶部banner', prefix2 + "/topBanner?id=" + num)
                    break;
                case 2:
                    $.modal.open('活动banner', prefix2 + "/topBanner?id=" + num,900,800, cancel)
                    // $.modal.openTab('活动banner', prefix2 + "/topBanner?id=" + num)
                    break;
                case 4:
                    $.modal.open('魔方位', prefix2 + "/RubikArea?id=" + num,900,800, cancel)
                    // $.modal.openTab('魔方位', prefix2 + "/RubikArea?id=" + num)
                    break;
                case 7:
                    $.modal.open('精选商品', prefix2 + "/carefullyGoods?id=" + num,900,800, cancel)
                    // $.modal.openTab('精选商品', prefix2 + "/carefullyGoods?id=" + num)
                    break;
                case 8:
                    $.modal.open('新品推荐', prefix2 + "/newRecommended?id=" + num,900,800, cancel)
            }
        }
        function delSp (num) {
            event.stopPropagation()
            let arr = [
                {"mid":2,"moudleIndexId":"708754120962334729770775","moudleName":"jinGangWei","indexs":2,"updateTime":"2022-01-11 17:40:03","createTime":"2022-01-06 13:53:45","delTag":0,"status":0},
                {"mid":1,"moudleIndexId":"708753099180072962244503","moudleName":"huDongBanner","indexs":1,"updateTime":"2022-01-06 13:52:22","createTime":"2022-01-06 13:52:19","delTag":0,"status":0},
                {"mid":3,"moudleIndexId":"708754120962334729770777","moudleName":"xianShiMiaoSha","indexs":3,"updateTime":"2022-01-06 13:55:04","createTime":"2022-01-06 13:55:07","delTag":0,"status":0},
                {"mid":4,"moudleIndexId":"708754120962334729772770","moudleName":"moFang","indexs":3,"updateTime":"2022-01-14 13:32:40","createTime":"2022-01-06 13:55:34","delTag":0,"status":0},
                {"mid":5,"moudleIndexId":"70875412096233472977232","moudleName":"XINPINTUIJIAN","indexs":4,"updateTime":"2022-02-21 18:20:35","createTime":"2022-01-06 13:55:34","delTag":0,"status":0}
            ]
            arr[num-1].delTag = 1;
            $.ajax({
                type: 'post',
                url: '/front-index/update',
                contentType: 'application/json',
                data: JSON.stringify(arr[num-1]),
                success:function (res) {
                    modalPx();
                }
            })
        }
        function cancel () {
            modalPx()
        }
        function git () {
            $.ajax({
                type: 'post',
                url: '/frontBanner/online',
                success:function(res) {
                    if (res.code == 0) {
                        layer.msg('上线成功！')
                    }
                }
            })
        }
        function modalPx(params) {
            $.ajax({
                type: 'post',
                url: '/front-index/list',
                success: function (res) {
                    let {data} = res;
                    let firstHeight = '';
                    let secondHeight = '';
                    let threeHeight = '';
                    let datas = []
                    data.map(item => {
                        if (item.moudleIndexId != "708754120962334729770777") {
                            datas.push({...item})
                        }
                    })
                    datas.forEach((item,index)=>{
                        if (item.delTag) {
                            $('.'+item.moudleName+'').hide()
                        }
                        if (index == 0) {
                            $('.'+item.moudleName+'').css('top', 341)
                            if (item.moudleName == "huDongBanner") {
                                firstHeight = 501;
                            } else if (item.moudleName == "jinGangWei") {
                                firstHeight = 591;
                            } else if (item.moudleName == "moFang") {
                                firstHeight = 791;
                            } else if (item.moudleName == "XINPINTUIJIAN") {
                                firstHeight = 791;
                            }
                        } else if (index == 1) {
                            $('.'+item.moudleName+'').css('top', firstHeight)
                            if (item.moudleName == "huDongBanner") {
                                secondHeight = firstHeight+160;
                            } else if (item.moudleName == "jinGangWei") {
                                secondHeight = firstHeight+250;
                            } else if (item.moudleName == "moFang") {
                                secondHeight = firstHeight+450;
                            } else if (item.moudleName == "XINPINTUIJIAN") {
                                secondHeight = firstHeight+450;
                            }
                        } else if (index == 2) {
                            $('.'+item.moudleName+'').css('top', secondHeight)
                            if (item.moudleName == "huDongBanner") {
                                threeHeight = secondHeight+160;
                            } else if (item.moudleName == "jinGangWei") {
                                threeHeight = secondHeight+250;
                            } else if (item.moudleName == "moFang") {
                                threeHeight = secondHeight+450;
                            } else if (item.moudleName == "XINPINTUIJIAN") {
                                threeHeight = secondHeight+450;
                            }
                        } else {
                            $('.'+item.moudleName+'').css('top', threeHeight)
                        }
                    })
                }
            })
        }
    </script>
</body>
</html>