<!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('顶部banner')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <style>
        .home_page {
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .right_content {
            font-size: 16px;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
        }
        .left_content {
            flex: 1;
        }
        .left_title, .right_title {
            margin-bottom: 12px;
        }
        .function_btn {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .function_btn .hot_title {
            font-size: 16px;
            font-weight: 600;
        }
        .function_btn .tags {
            display: flex;
            align-items: center;
        }
        .function_btn .tags label {
            display: flex;
            align-items: center;
        }
        .function_btn .tags label input {
            margin: 0 4px 0 12px;
        }
        .function_btn .tags .tag {
            padding: 6px 12px 4px;
            border: 1px solid #ccc;
            border-radius: 5px;
            position: relative;
            margin-right: 12px;
        }
        .function_btn .tags .tag span {
            display: inline-block;
            position: absolute;
            top: -8px;
            right: -8px;
            width: 18px;
            height: 18px;
            line-height: 16px;
            border: 1px solid #aaa;
            border-radius: 50%;
            background: #fff;
            text-align: center;
            cursor: pointer;
        }
        .banner_list {
            display: flex;
            flex-direction: column;
        }
        .banner_item {
            border: 1px dashed #ccc;
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 20px;
        }
        .img_show, .set_method, .set_function {
            display: flex;
        }
        .title {
            font-size: 16px;
            font-weight: 600;
            width: 80px;
            text-align: right;
        }
        .kv-upload-progress {
            display: none !important;
        }
        .ibox-content .imgBox {
            width: 350px;
            max-height: 180px;
        }
        .jump, .ticket_name, .set_function_time {
            display: flex;
            flex-grow: 1;
            align-items: center;
        }
        .iptOrSelect {
            flex: 1;
        }
        label {
            margin: 0;
        }
        .list_title {
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        /* .ibox-content {
            padding: 0;
            border: none;
        } */
        .ibox {
            height: 85vh;
            overflow-y: auto;
        }
        .footer_btn {
            position: fixed;
            bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="home_page">
        <div class="left_content">
            <div class="left_title">
                
            </div>
            <div class="function_btn">
                <div class="hot_title">
                    商品排序：
                </div>
                <div class="tags">
                    <label>
                        <input type="radio" checked value="1" id="optionsRadios1" name="optionsRadios"><span>上架时间</span></label>
                    <label>
                        <input type="radio" value="2" id="optionsRadios1" name="optionsRadios"><span>销量</span></label>
                    <label>
                        <input type="radio" value="2" id="optionsRadios1" name="optionsRadios"><span>价格高</span></label>
                    <label>
                        <input type="radio" value="2" id="optionsRadios1" name="optionsRadios"><span>价格低</span></label>
                </div>
            </div>
            <div class="list_title">
                <div class="hot_title">
                    商品列表<span>(1998)</span>：
                </div>
                <div class="tags">
                    拖动排序
                </div>
            </div>
            <div class="ibox">
                <div class="ibox-content">
                    <ul class="sortable-list connectList agile-list">

                    </ul>
                </div>
            </div>
            
            <div class="footer_btn">
                <button type="button" class="btn btn-success" onclick="save()">保存</button>
            </div>
        </div>
        <div class="right_content">
            <div class="right_title">
                
            </div>
            <div class="function_area">
                <iframe src="http://m.zhengzai.tv" width="375" height="896" frameborder="0"></iframe>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer"/>
    <script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
    <script th:inline="javascript">
        var prefix2 = ctx + "local";
        var platformUrl = [[${platformUrl}]];
        let num = 0;
        $(function() {
            let str = '';
            for (var i = 0; i < 100; i++) {
                str+= `<li id="${i+1}" class="info-element">
                            <span>制定工作日程表</span>
                            <div class="agile-detail">
                                <a href="#" class="pull-right btn btn-xs btn-white" style="margin-top:-15px;background: none;border: none;"><i class="fa fa-navicon"></i></a>
                                <i class="fa fa-clock-o"></i> 2018.09.10
                            </div>
                        </li>`
            }
            $(".connectList").append(str);
        })
        $(document).ready(function () {
	        $(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection()
	    });
        $("input[name=optionsRadios]").change(function(e){
            $("#bannerList").empty();
            if (e.target.value == 2) {
                addItem (8);
            } else {
                addItem (4);
            }
        })
        function addItem (num) {
            let str = '';
            for (var i = 0; i < num; i++) {
            }
            
        }
        function save () {
            // refreshItem()
            // $(".info-element").forEach(item => {
            //     console.log(item)
            // })
            let lis = $(".info-element");
            for(var i = 0; i < lis.length; i++) {
                console.log(i,lis[i].getAttribute('id'), 'id')
            }
        }
    </script>
</body>
</html>