<!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('魔方')" />
    <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, .first_content {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .function_btn .hot_title {
            font-size: 16px;
            font-weight: 600;
        }
        .function_btn .tags {
            display: flex;
            align-items: center;
        }
        .function_btn .tags_content {
            display: flex;
            flex-direction: column;
        }
        label {
            margin: 0;
            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;
            width: 100%;
        }
        .banner_item, .items {
            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;
        }
        .img_box {
            display: flex;
            flex-direction: column;
        }
    </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" value="1" id="optionsRadios1" name="optionsRadios"><span>一行一个</span></label>
                    <label>
                        <input type="radio" value="2" id="optionsRadios2" name="optionsRadios"><span>一行两个</span></label>
                    <label>
                        <input type="radio" value="3" id="optionsRadios3" name="optionsRadios"><span>一行三个</span></label>
                    <label>
                        <input type="radio" value="4" id="optionsRadios4" name="optionsRadios"><span>上一下三</span></label>
                </div>
            </div>
            <div class="function_btn">
                <div class="hot_title">
                    位置顺序：
                </div>
                <div class="tags">
                    <input type="text" class="layui-input form-control titleIpt" id="sorting" value="" autocomplete="off" placeholder="请输入模块顺序">
                </div>
            </div>
            <div class="function_btn">
                <div id="bannerList" class="banner_list">
                    
                </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-fileinput-js" />
    <th:block th:include="include :: bootstrap-suggest-js" />
    <script th:inline="javascript">
        var prefix2 = ctx + "local";
        var platformUrl = [[${platformUrl}]];
        let count = 1;
        let compilationsId = '';
        let createTime = '';
        let cubeId = '';
        let mid = '';
        let updateTime = '';
        $(function() {
            // addItem (1);
            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('/goblin-front-cube/list', 'post').then(res => {
                let { data } = res;
                if (data && data.length > 0) {
                    let arr = data[0].spuId.split(',');
                    if (data.length == 1) {
                        $("#optionsRadios1").attr('checked', true).parent().siblings().children().removeAttr('checked');
                    } else if (data.length == 2) {
                        $("#optionsRadios2").attr('checked', true).parent().siblings().children().removeAttr('checked');
                    } else if (data.length == 3) {
                        $("#optionsRadios3").attr('checked', true).parent().siblings().children().removeAttr('checked');
                    } else {
                        $("#optionsRadios4").attr('checked', true).parent().siblings().children().removeAttr('checked');
                    }
                    mid = data[0].mid;
                    for (var i = 0; i < data.length; i++) {
                        let str = '';
                        str += `<div class="items" data-id="${data[i].mid}">
                                <div class="first_content">
                                    <div class="hot_title">
                                        页面属性：
                                    </div>
                                    <div class="tags">
                                        <label>
                                            <input type="radio" checked value="1" id="pageAttribute${i}" name="pageAttribute${i}"><span>单商品</span></label>
                                    </div>
                                </div>
                                <div class="first_content" style="align-items: flex-start;">
                                    <div class="hot_title">
                                        选择商品：
                                    </div>
                                    <div class="tags_content" style="width: 553px;">
                                        <div class="input-group">
                                            <input id="goodsName${i}" data-id="${arr[i]}" type="text" class="form-control storeList" placeholder="${data[i].goblinGoods.name}">
                                            <div class="input-group-btn">
                                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="img_box">
                                            <img id="goodsImg${i}" src="${data[i].goblinGoods.coverPic}" alt="" style="max-height: 180px;max-width:180px;margin: 12px 0;">
                                            <p id="goodsTitle${i}" style="width:180px;">${data[i].goblinGoods.name}</p>
                                            <p id="goodsPrice${i}">${data[i].goblinGoods.priceLe}</p>
                                        </div>
                                        <button id="del${i}" type="button" class="btn btn-danger" style="width: 60px;" onclick="del('${i}')">删除</button>
                                    </div>
                                </div>
                                <div class="first_content" style="align-items: flex-start;">
                                    <div class="hot_title">
                                        推荐文案：
                                    </div>
                                    <div class="tags">`;
                                        if (i == 0) {
                                            str+= `<textarea id="text${i}" class="form-control txtIpt" value="" name="" style="width: 553px;height: 150px;">${data[i].informationA}</textarea>`
                                        } else if (i == 1) {
                                            str+= `<textarea id="text${i}" class="form-control txtIpt" value="" name="" style="width: 553px;height: 150px;">${data[i].informationB}</textarea>`
                                        } else if (i == 2) {
                                            str+= `<textarea id="text${i}" class="form-control txtIpt" value="" name="" style="width: 553px;height: 150px;">${data[i].informationC}</textarea>`
                                        } else {
                                            str+= `<textarea id="text${i}" class="form-control txtIpt" value="" name="" style="width: 553px;height: 150px;">${data[i].informationD}</textarea>`
                                        }
                                        
                                    str+=`</div>
                                </div>
                            </div>`
                        $("#bannerList").append(str);
                        common(i)
                    }
                }
                // refreshItem()
            })
        })
        $("input[name=optionsRadios]").change(function(e){
            $("#bannerList").empty();
            count = e.target.value;
            promiseMethods('/goblin-front-cube/list', 'post').then(res => {
                let { data } = res;
                if (data && data.length > 0) {
                    let arr = data[0].spuId.split(',');
                    if (count == data[0].rowType) {
                        for (var i = 0; i < data.length; i++) {
                            let str = '';
                            str += `<div class="items" data-id="${data[i].mid}">
                                    <div class="first_content">
                                        <div class="hot_title">
                                            页面属性：
                                        </div>
                                        <div class="tags">
                                            <label>
                                                <input type="radio" checked value="1" id="pageAttribute${i}" name="pageAttribute${i}"><span>单商品</span></label>
                                        </div>
                                    </div>
                                    <div class="first_content" style="align-items: flex-start;">
                                        <div class="hot_title">
                                            选择商品：
                                        </div>
                                        <div class="tags_content" style="width: 553px;">
                                            <div class="input-group">
                                                <input id="goodsName${i}" data-id="${arr[i]}" type="text" class="form-control storeList" placeholder="${data[i].goblinGoods.name}">
                                                <div class="input-group-btn">
                                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="img_box">
                                                <img id="goodsImg${i}" src="${data[i].goblinGoods.coverPic}" alt="" style="max-height: 180px;max-width:180px;margin: 12px 0;">
                                                <p id="goodsTitle${i}" style="width:180px;">${data[i].goblinGoods.name}</p>
                                                <p id="goodsPrice${i}">${data[i].goblinGoods.priceLe}</p>
                                            </div>
                                            <button id="del${i}" type="button" class="btn btn-danger" style="width: 60px;" onclick="del('${i}')">删除</button>
                                        </div>
                                    </div>
                                    <div class="first_content" style="align-items: flex-start;">
                                        <div class="hot_title">
                                            推荐文案：
                                        </div>
                                        <div class="tags">`;
                                            if (i == 0) {
                                                str+= `<textarea id="text${i}" class="form-control txtIpt" value="" name="" style="width: 553px;height: 150px;">${data[i].informationA}</textarea>`
                                            } else if (i == 1) {
                                                str+= `<textarea id="text${i}" class="form-control txtIpt" value="" name="" style="width: 553px;height: 150px;">${data[i].informationB}</textarea>`
                                            } else if (i == 2) {
                                                str+= `<textarea id="text${i}" class="form-control txtIpt" value="" name="" style="width: 553px;height: 150px;">${data[i].informationC}</textarea>`
                                            } else {
                                                str+= `<textarea id="text${i}" class="form-control txtIpt" value="" name="" style="width: 553px;height: 150px;">${data[i].informationD}</textarea>`
                                            }
                                            
                                        str+=`</div>
                                    </div>
                                </div>`
                            $("#bannerList").append(str);
                            common(i)
                        }
                    } else {
                        addItem (count);
                    }
                } else {
                    addItem (count);
                }
                // refreshItem()
            })
        })
        function addItem (num) {
            let str = '';
            for (var i = 0; i < num; i++) {
                str = `<div class="items">
                        <div class="first_content">
                            <div class="hot_title">
                                页面属性：
                            </div>
                            <div class="tags">
                                <label>
                                    <input type="radio" checked value="1" id="pageAttribute${i}" name="pageAttribute${i}"><span>单商品</span></label>
                            </div>
                        </div>
                        <div class="first_content" style="align-items: flex-start;">
                            <div class="hot_title">
                                选择商品：
                            </div>
                            <div class="tags_content" style="width: 553px;">
                                <div class="input-group">
                                    <input id="goodsName${i}" type="text" class="form-control storeList" placeholder="搜索商品名称">
                                    <div class="input-group-btn">
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                        </ul>
                                    </div>
                                </div>
                                <div class="img_box">
                                    <img id="goodsImg${i}" src="" alt="" style="max-height: 180px;max-width:180px;margin: 12px 0;">
                                    <p id="goodsTitle${i}" style="width:180px;"></p>
                                    <p id="goodsPrice${i}"></p>
                                </div>
                                <button id="del${i}" type="button" class="btn btn-danger" style="width: 60px;" onclick="del('${i}')">删除</button>
                            </div>
                        </div>
                        <div class="first_content" style="align-items: flex-start;">
                            <div class="hot_title">
                                推荐文案：
                            </div>
                            <div class="tags">
                                <textarea id="text${i}" class="form-control txtIpt" name="" id="" style="width: 553px;height: 150px;"></textarea>
                            </div>
                        </div>
                    </div>`
                $("#bannerList").append(str);
                common(i)
            }
        }
        function save () {
            let data = [{
                compilationsId: compilationsId || '',
                createTime: createTime || '',
                cubeId: cubeId|| '',
                goblinGoods: {},
                informationA: '',
                informationB: '',
                informationC: '',
                informationD: '',
                mid: mid || '0',
                delTag: '0',
                pageType: '1',
                rowType: $('input[name="optionsRadios"]:checked').val(),
                spuId: [],
                spuName: '',
                updateTime: updateTime || ''
            }];
            let domData = $('.items');
            
            Array.prototype.forEach.call(domData,function (item,index) {
                data[0].spuId.push(item.querySelector('.storeList').getAttribute('data-id') || '');
                if (index == 0) {
                    data[0].informationA = item.querySelector('.txtIpt').value;
                } else if (index == 1) {
                    data[0].informationB = item.querySelector('.txtIpt').value;
                } else if (index == 2) {
                    data[0].informationC = item.querySelector('.txtIpt').value;
                } else {
                    data[0].informationD = item.querySelector('.txtIpt').value;
                }
            });//foreach js6章封装
            data[0].spuId = data[0].spuId.toString();
            promiseMethods('/goblin-front-cube/updateOrCreate', 'post', JSON.stringify(data), 'application/json').then(() => {
                let data = {
                    "mid": 4,
                    "moudleIndexId": "708754120962334729772770",
                    "moudleName": "moFang",
                    "indexs": $('#sorting').val(),
                    "updateTime": "2022-01-06 13:55:31",
                    "createTime": "2022-01-06 13:55:34",
                    "delTag": 0,
                    "status": 0
                };
                return promiseMethods('/front-index/update', 'post', JSON.stringify(data), 'application/json')
            }).then(() => {
                layer.msg("保存成功！")
                refreshItem()
            })
            
        }
        function del (num) {
            $('#goodsImg'+num+'').attr('src', '');
            $('#goodsTitle'+num+'').html('');
            $('#goodsPrice'+num+'').html('');
            $('#del'+num+'').hide();
        }
        function common (num) {
            $(".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 ) { // 当前行的所有值都能拿到
                let index = e.target.id.replace(/[^\d]/g,''); // 选中的是第几组
                $("#goodsImg"+index+"").attr('src', selectedRawData.coverPic);
                $("#goodsTitle"+index+"").text(selectedRawData.name);
                $("#goodsPrice"+index+"").text('￥'+ selectedRawData.priceLe);
                $('#del'+index+'').show();
            }).on('onUnsetSelectValue', function (e) {
            });;
        }
        function promiseMethods(url,type,data,contentType) {
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url,
                    type,
                    data,
                    contentType,
                    success:function(res) {
                        resolve(res);
                    }
                })
            })
        }
    </script>
</body>
</html>