<!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="tagType1" name="optionsRadios"><span>上架时间</span></label>
                    <label>
                        <input type="radio" value="2" id="tagType2" name="optionsRadios"><span>销量</span></label>
                    <label>
                        <input type="radio" value="3" id="tagType3" name="optionsRadios"><span>价格高</span></label>
                    <label>
                        <input type="radio" value="4" id="tagType4" name="optionsRadios"><span>价格低</span></label>
                </div>
            </div>
            <div class="function_btn">
                <div class="hot_title">
                    商品搜索：
                </div>
                <div class="tags">
                    <div class="input-group iptOrSelect">
                        <input id="searchIpt" data-id="" value="" type="text" class="form-control storeList" onFocus="focusMethod(this)" placeholder="请输入查询信息">
                        <div class="input-group-btn">
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
                <button type="button" class="btn btn-primary" onclick="addBox()">添加</button>
            </div>
            <div class="list_title">
                <div class="hot_title">
                    商品列表<span class="goodsNumber">(0)</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 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"/>
    <th:block th:include="include :: bootstrap-suggest-js" />
    <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;
        let type = 1;
        let createTime = '';
        let mid = '';
        let selectGoodsId = '';
        let updateTime = '';
        let selectObj = {};
        $(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 {

            }
            promiseMethods('/selectGoods/getList', 'post').then(res => {
                let { data } = res;
                if (data.length<=0) {
                    creatDom(1);
                    return;
                }
                $("input[name="+data[0].orderType+"]").attr('checked', true).parent().siblings().children().removeAttr('checked');
                
                createTime = data[0].createTime;
                mid = data[0].mid;
                selectGoodsId = data[0].selectGoodsId;
                updateTime = data[0].updateTime;
                if (data[0].goblinGoodsList && data[0].goblinGoodsList.length > 0) {
                    $('.goodsNumber').text(data[0].goblinGoodsList.length);
                    let str = '';
                    data[0].goblinGoodsList.forEach((item,index)=>{
                        str+= `<li id="item${index}" class="info-element" data-spuId="${item.spuId}">
                                <span>${item.name}</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>
                                    <span>￥</span>${item.priceGe}
                                </div>
                            </li>`
                    })
                    $(".connectList").html(str);
                } else {
                    creatDom(1);
                }
            })
        })
        $(document).ready(function () {
	        $(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection()
	    });
        function focusMethod (e) {
            let index = $(e).attr('id').replace(/[^\d]/g,''); // 选中的是第几组
            let url = '';
            $(".storeList").bsSuggest({
                idField: 'spuId',                 // data.value 的第几个数据，作为input输入框的内容
	            keyField: 'name',                // data.value 的第几个数据，作为input输入框的内容
                allowNoKeyword: false, //是否允许无关键字时请求数据
                showBtn:false,
                multiWord: true, //以分隔符号分割的多关键字支持
                hideOnSelect: true,
                getDataMethod: "url", //获取数据的方式，总是从 URL 获取
                effectiveFields: ['name'],
                url: '/compilations/goodsList?name=',
                /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
                processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                    //字符串转化为 js 对象
                    let data = {};
                    data.value = json.data
                    return data
                }
            }).on('onDataRequestSuccess', function (e, result) {
            }).on('onSetSelectValue', function (e, selectedData,selectedRawData ) { // 当前行的所有值都能拿到
                selectObj['title'] = selectedRawData.name;
                selectObj['spuId'] = selectedRawData.spuId;
                selectObj['priceGe'] = selectedRawData.priceGe;
            }).on('onUnsetSelectValue', function (e) {
            });;
        }
        function creatDom (num) {
            promiseMethods('/selectGoods/goodsList?type=' + num, 'get').then(res => {
                let { data } = res;
                // $('.goodsNumber').text(data.length);
                // let str = '';
                // data.forEach((item,index)=>{
                //     str+= `<li id="item${index}" class="info-element" data-spuId="${item.spuId}">
                //             <span>${item.name}</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>
                //                 <span>￥</span>${item.priceGe}
                //             </div>
                //         </li>`
                // })
                // $(".connectList").html(str);
            })
        }
        function addBox () {
            let str = '';
            if (!selectObj.spuId) {
                return layer.msg('输出不能为空！')
            }
            let num = Number($('.goodsNumber').text()) + 1;
            $('.goodsNumber').text(num)
            str+= `<li id="item${Number($('.goodsNumber').text())-1}" class="info-element" data-spuId="${selectObj.spuId}">
                <span>${selectObj.title}</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>
                    <span>￥</span>${selectObj.priceGe}
                </div>
            </li>`
            $(".connectList").append(str);
        }
        $("input[name=optionsRadios]").change(function(e){
            type = e.target.value;
            creatDom (type);
        })
        function save () {
            let domBody = $(".info-element");
            let arr = [];
            let data = {
                delTag: '0',
                orderType: type,
                createTime,
                mid: mid || 0,
                selectGoodsId,
                updateTime,
                spuId: ''
            }
            Array.prototype.forEach.call(domBody,function(item,index){
                arr.push(item.getAttribute('data-spuId'))
            })
            data.spuId = arr.toString();
            promiseMethods('/selectGoods/createOrUpdate','post',JSON.stringify(data),'application/json').then(res => {
                if (res.code == 0) {
                    layer.msg('保存成功！')
                    $.operate.successCallback(res);
                }
            })
        }
        function promiseMethods(url,type,data,contentType) {
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url,
                    type,
                    data,
                    contentType,
                    success:function(res) {
                        resolve(res);
                    }
                })
            })
        }
    </script>
</body>
</html>