<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增活动')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <link rel="stylesheet" href="">
    <style>
        input {
            height: 34PX;
            line-height: 34PX;
        }
        .required {
            font-style: normal;
            color: red;
        }
        .content_item {
            padding: 20px;
        }
        /* .content_item .content_title {
            display: flex;
        } */
        .content_item .content_title h3 span {
            display: inline-block;
            width: 4px;
            height: 18px;
            background: skyblue;
            margin-right: 6px;
            vertical-align: top;
        }
        .basis_data {
            display: flex;
            font-size: 14px;
            padding: 0 20px;
            margin-top: 20px;
            /* align-items: center; */
        }
        .basis_data span {
            width: 100px;
            text-align: right;
            
        }
        #startTime, #endTime {
            width: 272px;
            margin-right: 10px;
        }
        .storeList, #selectShow, .dropdown-menu, .input-group {
            width: 270px !important;
        }
        .activityStore_item {
            display: flex;
            margin-bottom: 12px;
        }
        #basis_data {
            align-items: flex-start;
        }
        .add_footer {
            width: 100%;
            height: 45px;
            line-height: 45px;
            padding-left: 60px;
        }

        .form-control,.layui-input {
            height: 34PX;
            line-height: 34PX;
        }
        .kv-upload-progress {
            display: none !important;
        }
        .ibox-content .imgBox {
            max-width: 350px;
            max-height: 180px;
        }
    </style>
</head>
<body>
<div>
    <div class="content_item">
        <div class="content_title">
            <h3><span></span>基础信息</h3>
        </div>
        <div class="basis_data">
            <span>
                <em class="required">*</em>
                选择演出：
            </span>
            <div class="input-group" style="width: 300px;">
                <input type="text" class="form-control select-show editDisabled" id="selectShow" placeholder="">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                    </ul>
                </div>
                <!-- /btn-group 11 -->
            </div>
        </div>
        <div class="basis_data ibox-content" style="border: none;display: flex;">
            <span>
                <em class="required">*</em>
                演出图片：
            </span>
            <div>
                <img id="viewImg" class="imgBox" src="" alt="">
                <div class="form-group">
                    <div class="file-loading">
                        <input id="fileinput" type="file" name="file" data-browse-on-zone-click="true" data-theme="fas">
                        
                    </div>
                    <span style="color: #ccc; font-size: 12px;">适配图片尺寸：660*344</span>
                </div>
            </div>
        </div>
        <div class="basis_data">
            <span>
                <em class="required">*</em>
                有效期：
            </span>
            <input type="text" class="layui-input form-control editDisabled" id="startTime" autocomplete="off" placeholder="请选择活动开始时间">
            ~  
            <input type="text" class="layui-input form-control editDisabled"  id="endTime" style="margin-left: 10px;" autocomplete="off" placeholder="请选择活动结束时间">
        </div>
       <div class="first_footer editshow" style="padding-left: 60px;margin-top: 12px;">
           <button class="btn btn-primary" onclick="nextBtn()">确定</button>
       </div>
    </div>
    <div class="content_item" style="display: none;">
        <div class="content_title">
            <h3><span></span>设置</h3>
        </div>
        <div class="basis_data" id="basis_data">
            <span>
                <em class="required">*</em>
                选择店铺：
            </span>
            <div class="activityStore">
                <button class="btn btn-primary" onclick="addItem()" style="margin-bottom: 12px;">新增</button>
                <div class="activityStore_item activityStore_item_first" id="activityStore_item1" data-newTag="1">
                    <div class="input-group" style="margin-right: 12px;">
                        <input type="text" class="form-control storeList item1" placeholder="搜索店铺名称">
                        <div class="input-group-btn">
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="layui-input form-control timeSp" id="startTime" autocomplete="off" placeholder="配置活动时间">
                    <button type="button" class="btn btn-danger" onclick="delItem('1')">删除</button>
                </div>
               
            </div>
        </div>
    </div>
    <div class="add_footer" style="display: none;">
        <button class="btn btn-success" onclick="save()">保存</button>
        <!-- <button class="btn" onclick="addItem()">取消</button> -->
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<th:block th:include="include :: bootstrap-suggest-js" />
</body>
<script th:inline="javascript">
    let count = 1;
    var prefix2 = ctx + "local";
    let marketId = '';
    let editDatas = 0;
    var platformUrl = [[${platformUrl}]];
    $(function() {
        let name = 'id';
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#startTime', //指定元素
                type: 'datetime'
            });
            laydate.render({
                elem: '#endTime', //指定元素
                type: 'datetime'
            });
        });
        common ();
        if (r) {
            marketId =  unescape(r[2]);
            // $(".editDisabled").attr('disabled', true);
            // $(".editshow").hide()
            let data = {
                marketId
            }
            let searchActivity = promiseMethods('/goblin/marketing/zhengzai/details', 'post', data);
            let searchActivityStore = promiseMethods('/goblin/marketing/zhengzai/store/list', 'post', data);
            Promise.all([searchActivity,searchActivityStore]).then(res => {
                let basisData = res[0];
                let { data } = res[1];
                editDatas = data.length;
                $("#selectShow").val(basisData.data.name);
                $("#selectShow").attr('data-id', basisData.data.performanceId);
                $("#viewImg").attr('src', basisData.data.performanceImg);
                $("#startTime").val(basisData.data.startTime);
                $("#endTime").val(basisData.data.endTime);
                $(".content_item").show();
                $(".add_footer").show();
                $(".activityStore_item_first").remove();
                data.forEach((item,index)=>{
                    addItem(item)
                })
            })
        }
        $("#fileinput").fileinput({
            'theme': 'explorer-fas',
            // 'uploadUrl':  "https://devplatform.zhengzai.tv/platform/basicServices/alOss/upload",
            'uploadUrl':  platformUrl + "/platform/basicServices/alOss/upload",
            "uploadExtraData": {
                "pathName" : "banner",
                "buckType" : 1
            },
            autoReplace: true,
            showCaption: false,
            showPreview: false,
            showRemove: false,
            showUpload: false,
            showCancel: false,
            showClose: false,
            autoReplace: true,
            dropZoneTitle: "请上传文件",
            maxFileCount: 1
        }).on("filebatchselected", function (event, files) {         //默认上传
            $(this).fileinput("upload");
        })
        .on("fileuploaded", function (event, data) {       //上传回调事件
            let showPicture = 'https://img.zhengzai.tv/' + data.response.data.ossPath;
            $("#viewImg").attr('src', showPicture)
        })

    })
    function common () {
        $("#selectShow").bsSuggest({
            idField: 'performancesId',
	        keyField: 'title',
            allowNoKeyword: false, //是否允许无关键字时请求数据
            showBtn:false,
            multiWord: true, //以分隔符号分割的多关键字支持
            hideOnSelect: true,
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            effectiveFields: ['title'],
            url: '/kylin/performances/recommend/performance/status?status=(3,6,7,9,10)&title=',
            /*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                //字符串转化为 js 对象
                return json;
            }
        }).on('onSetSelectValue', function (e, result, selectedRawData) {
        });
        $(".storeList").bsSuggest({
            idField: 'storeId',
	        keyField: 'storeName',
            allowNoKeyword: false, //是否允许无关键字时请求数据
            showBtn:false,
            multiWord: true, //以分隔符号分割的多关键字支持
            hideOnSelect: true,
            effectiveFields: ['storeName'],
            getDataMethod: "url", //获取数据的方式，总是从 URL 获取
            url: '/goblin/store/list?storeName=',
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
                //字符串转化为 js 对象
                // return json.rows;
                let data = {};
                data.value = json.rows;
                return data
            }
        });
    }
    function addItem (item) {
        count++;
        let body = '';
        if (item) {
            body+=`<div class="activityStore_item" id="activityStore_item${count}" data-newTag="">
                <div class="input-group" style="margin-right: 12px;">
                    <input type="text" class="form-control storeList item${count} itemDisabled" data-id="${item.storeId}" value="${item.storeName}" placeholder="搜索店铺名称">
                    <div class="input-group-btn">
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                </div>
                <input type="text" class="layui-input form-control timeSp startTime${count} itemDisabled" id="startTime" value="${item.showTime}" autocomplete="off" placeholder="配置活动时间">
                <button type="button" class="btn btn-danger" onclick="delItem('${count}')">删除</button>
                
            </div>`
        } else {
            body+=`<div class="activityStore_item" id="activityStore_item${count}" data-newTag="1">
                <div class="input-group" style="margin-right: 12px;">
                    <input type="text" class="form-control storeList item${count}" placeholder="搜索店铺名称">
                    <div class="input-group-btn">
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                </div>
                <input type="text" class="layui-input form-control timeSp startTime${count}" id="startTime" autocomplete="off" placeholder="配置活动时间">
                <button type="button" class="btn btn-danger" onclick="delItem('${count}')">删除</button>
            </div>`
        }
        $(".activityStore").append(body)
        common ()
        // $(".itemDisabled").attr('disabled', true);
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: `.startTime${count}`, //指定元素
                type: 'datetime'
            });
        });
    }
    function delItem (num) {
        let domData = $(".activityStore_item");
        let arr = [];
        Array.prototype.forEach.call(domData,function(item,index){
            if (!item.getAttribute('data-id')) {
                arr.push(item)
            }
        })
        if (arr.length < 2) return layer.msg('最少保留一个店铺！')
        $.modal.loading("请稍等...");
        // console.log(domData.length)
        console.log(document.querySelector('#activityStore_item'+num+'').querySelector('.storeList').getAttribute('data-id'), '????')
        let storeId = document.querySelector('#activityStore_item'+num+'').querySelector('.storeList').getAttribute('data-id');
        if (!document.querySelector('#activityStore_item'+num+'').getAttribute('data-newTag')) {
            let data = {};
            data.marketId = marketId;
            data.storeId = storeId;
            console.log(data, 'dsasadasd')
            promiseMethods('/goblin/marketing/zhengzai/store/del','post',data).then(res => {
                $.modal.closeLoading();
                if (res.code == 0) {
                    $('#activityStore_item'+num+'').remove();
                    layer.msg('修改活动成功，请配置活动对应店铺！')
                } else {
                    layer.msg(res.message)
                }
            })
        } else {
            $('#activityStore_item'+num+'').remove();
            $.modal.closeLoading();
        };
        
    }
    function nextBtn (params) {
        if (!$("#selectShow").attr('data-id')) {
            return layer.msg('请选择演出进行创建！')
        }
        if (!$("#viewImg").attr('src')) {
            return layer.msg('请上传演出图片！')
        }
        if (!$("#endTime").val() || !$("#startTime").val()) {
            return layer.msg('请将有效期输入完整！')
        }
        let data = {
            endTime: $("#endTime").val(),
            startTime: $("#startTime").val(),
            name: $("#selectShow").val(),
            performanceId: $("#selectShow").attr('data-id'),
            performanceImg: $("#viewImg").attr('src')
        } // endTime
        if (marketId) {
            data.marketId = marketId;
            promiseMethods('/goblin/marketing/zhengzai/change','post',data).then(res => {
                if (res.code == 0) {
                    layer.msg('修改活动成功，请配置活动对应店铺！')
                } else {
                    layer.msg(res.message)
                }
            })
            
        } else {
            promiseMethods('/goblin/marketing/zhengzai','post',data).then(res => {
                if (res.code == 0) {
                    marketId = res.data;
                    layer.msg('添加活动成功，请配置活动对应店铺！')
                    $(".content_item").show();
                    $(".add_footer").show();
                } else {
                    layer.msg(res.message)
                }
            })
        }
        
    }
    function save () {
        let obj = {};
        let data = []; // 新增集合
        let data2 = []; // 修改集合
        let domData = $(".activityStore_item");
        let flag = false;
        Array.prototype.forEach.call(domData,function(item,index){
            console.log(item)
            obj['marketId'] = marketId;
            
            obj['showTime'] = item.querySelector('.timeSp').value;
            obj['storeId'] = item.querySelector('.storeList').getAttribute('data-id');
            if (!item.querySelector('.timeSp').value || !item.querySelector('.storeList').getAttribute('data-id')) {
                flag = true;
            }
            obj['delTag'] = 0;
            if (item.getAttribute('data-newTag')) {
                obj['newTag'] = 1;
            } else {
                obj['newTag'] = 0;
            }
            data.push({...obj});
            // if (index < editDatas) {
                
            // } else {
            //     data2.push({...obj});
            // }
            
        })
        if (flag) {
            layer.msg('请将选项填写完整！')
            flag = false
            return
        }
        promiseMethods('/goblin/marketing/zhengzai/store','post', JSON.stringify(data), 'application/json').then(res => {
            if (res.code == 0) {
                $.operate.successCallback(res);
            } else {
                layer.msg(res.message)
            }
            
        })
    }
    function promiseMethods(url,type,data,contentType) {
        return new Promise((resolve,reject)=>{
            $.ajax({
                url,
                type,
                data,
                contentType,
                success:function(res) {
                    resolve(res);
                }
            })
        })
    }
</script>
</html>
