<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('主题配置')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-select-css" />
    <th:block th:include="include :: cropbox-css"/>
    <th:block th:include="include :: colorpicker-css"/>
    <style>
        .file-wraps{
            width: 80px;
            height: 80px;
            flex-direction: row;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            border: 1px solid #f5f5f5;
            position: relative;
            cursor: pointer;
        }
        .file-wraps input{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
        }
        .file-wraps-small-icon{
            width: 50px;
            height: 50px;
            flex-direction: row;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            border: 1px solid #f5f5f5;
            position: relative;
            cursor: pointer;
        }
        .file-wraps-small-icon input{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0;
        }
        .smallIconBox{
            flex-direction: row;
            display: flex;
            align-items: center;
            position: relative;
        }
        .smallIconItem{
            width: 80px;
            height: 80px;
            flex-direction: column;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .activityIconBox{
            flex-direction: row;
            display: flex;
            align-items: center;
            position: relative;
        }
        .activityIconItem{
            width: 50px;
            height: 50px;
            flex-direction: column;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            position: relative;
        }
        .activityIconItemClear{
            position: absolute;
            top: -8px;
            right: 0px;
            font-size: 20px;
            z-index: 100;
            cursor: pointer;
        }
        .uploadImage{
            cursor: pointer;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-configuration-add">
        <div class="form-group" id="bgImageItem">
            <label class="col-sm-3 control-label">门户背景：</label>
            <div class="col-sm-8">
                <div class="file-wraps">
                    <div id="bgImageDiv" style="width: 80px;height: 80px;display: none;"></div>
                    <i id="bgImageIcon" class="fa fa-plus" style="font-size: 40px"></i>
                    <input type="file" class="uploadImage" id="bgImage" name="bgImage" accept="image/*"/>
                </div>
                <div style="font-size: 12px;color: #999999;margin-top: 10px;">建议图片宽度640px,高度800px</div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">小图标设置：</label>
            <div class="col-sm-8">
                <div class="smallIconBox">
                    <div class="smallIconItem" th:each="dict : ${@dict.getType('home_icon_type')}">
                        <div class="file-wraps-small-icon">
                            <div th:id="${dict.dictValue}" style="width: 50px;height: 50px;display: none;"></div>
                            <i th:id="${dict.dictValue}+'Icon'" class="fa fa-plus" style="font-size: 30px"></i>
                            <input type="file" class="uploadImage" th:id="${dict.dictCode}" th:name="${dict.dictValue}" accept="image/*"/>
                        </div>
                        <span th:text="${dict.dictLabel}" style="margin-top: 10px;"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">活动图标设置：</label>
            <div class="col-sm-8" style="flex-direction: row;display: flex;">
                <div class="activityIconBox" id="activityIconBox"></div>
                <div class="file-wraps-small-icon">
                    <i id="activityImageIcon" class="fa fa-plus" style="font-size: 30px"></i>
                    <input type="file" class="uploadImage" id="activityImage" name="activityImage" accept="image/*"/>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">活动图标开始时间：</label>
            <div class="col-sm-8">
                <input id="alertStartTime" name="alertStartTime" class="form-control" type="datetime-local">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">活动图标结束时间：</label>
            <div class="col-sm-8">
                <input id="alertEndTime" name="alertEndTime" class="form-control" type="datetime-local">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">提示文字：</label>
            <div class="col-sm-8">
                <input id="alertTitle" name="alertTitle" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">提示文字颜色：</label>
            <div class="col-sm-8">
                <input id="alertTitleColor" name="alertTitleColor" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-8">
                <input type="color" name="color" id="color" onchange="changeColor()">
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: bootstrap-select-js" />
<th:block th:include="include :: cropbox-js"/>
<th:block th:include="include :: colorpicker-js"/>
<script type="text/javascript">
    var prefix = ctx + "system/configuration"
    var domain = window.location.host;
    var ht = domain.indexOf('localhost') != -1 ? 'http://' : 'https://';
    var prefixEdit = ht + domain + "/oneportal/wxportal/magnet";

    var bgImageUrl = '';
    var smallImageUrlArray = {};
    var activityImageUrlArray = [];
    var options = {
        thumbBox: '.thumbBox',
        spinner: '.spinner',
        imgSrc: ctx + 'img/profile.jpg'
    }

    $(document).ready(function () {
        getThemeInfo();
    })

    var color = document.getElementById("color");
    var colorInfo = document.getElementById("alertTitleColor");
    colorInfo.value = color.value;
    function changeColor(){
        colorInfo.value = color.value;
    }

    $('.activityIconBox').on('click','.activityIconItemClear', function (res) {
        activityImageUrlArray.splice(res.currentTarget.dataset.index,1);
        document.getElementById('activityIconBox').innerHTML = '';
        activityImageUrlArray.forEach((item,index)=>{
            $(".activityIconBox").append("<div class='activityIconItem'><img src='" + item + "' style='width: 50px;height: 50px;'><div class='activityIconItemClear'data-index='" + index + "'>×</div></div>")
        })
    })

    $('.uploadImage').on('change', function (res) {
        var reader = new FileReader();
        reader.onload = function (e) {
            options.imgSrc = e.target.result;
            //根据MIME判断上传的文件是不是图片类型
            if ((options.imgSrc).indexOf("image/") == -1) {
                $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
            }
        }
        reader.readAsDataURL(this.files[0]);
        upBg(this.files[0],res.currentTarget.name);
    })

    $("#alertStartTime").on('change',function () {
        if ($(this).val() != -1){
            var startTimeChange1 = $('#alertStartTime').val().replace('T',' ');
            var endTimeChange1 = $('#alertEndTime').val().replace('T',' ');
            if (new Date(startTimeChange1).getTime() - new Date(endTimeChange1).getTime() >= 0){
                $.modal.alertWarning("弹框结束时间不能小于开始时间");
            }
        }
    })

    $("#alertEndTime").on('change',function () {
        if ($(this).val() != -1){
            var startTimeChange2 = $('#alertStartTime').val().replace('T',' ');
            var endTimeChange2 = $('#alertEndTime').val().replace('T',' ');
            if (new Date(startTimeChange2).getTime() - new Date(endTimeChange2).getTime() >= 0){
                $.modal.alertWarning("弹框结束时间不能小于开始时间");
            }
        }
    })

    $("#form-configuration-add").validate({
        focusCleanup: true,
        // rules:{
        //     alertStartTime:{
        //         required:true
        //     },
        //     alertEndTime:{
        //         required:true
        //     }
        // },
    });

    function upBg(imgFile,imgType) {
        var formdata = new FormData();
        formdata.append("file", imgFile);
        $.ajax({
            url: ctx + "common/upload",
            data: formdata,
            type: "post",
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.code == 0) {
                    if (imgType == 'bgImage'){
                        bgImageUrl = result.data.url;
                        $("#bgImageDiv").html("<img src='" + result.data.url + "' style='width:100%;height:100%;'>");
                        document.getElementById("bgImageDiv").style.display = 'block';
                        document.getElementById("bgImageIcon").style.display = 'none';
                    } else if (imgType == 'activityImage'){
                        activityImageUrlArray.push(result.data.url);
                        document.getElementById('activityIconBox').innerHTML = '';
                        activityImageUrlArray.forEach((item,index)=>{
                            $(".activityIconBox").append("<div class='activityIconItem'><img src='" + item + "' style='width: 50px;height: 50px;'><div class='activityIconItemClear'data-index='" + index + "'>×</div></div>")
                    })
                    } else {
                        smallImageUrlArray[imgType] = result.data.url;
                        $("#"+imgType).html("<img src='" + result.data.url + "' style='width:100%;height:100%;'>");
                        document.getElementById(imgType).style.display = 'block';
                        document.getElementById(imgType+'Icon').style.display = 'none';
                    }
                } else {
                    $.modal.alertWarning(result.msg);
                }
            }
        })
    }

    function getThemeInfo() {
        var config = {
            url: prefixEdit + '/getHomeIconInfo',
            type: "post",
            dataType: "json",
            data: {},
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                console.log('result',result);
                if (result.data.portal_background != ''){
                    bgImageUrl = result.data.portal_background;
                    $("#bgImageDiv").html("<img src='" + result.data.portal_background + "' style='width:100%;height:100%;'>");
                    document.getElementById("bgImageDiv").style.display = 'block';
                    document.getElementById("bgImageIcon").style.display = 'none';
                }
                if (Object.keys(result.data.smallIconObject).length > 0){
                    var keyArray = Object.keys(result.data.smallIconObject);
                    keyArray.forEach(item => {
                        smallImageUrlArray[item] = result.data.smallIconObject[item];
                        $("#"+item).html("<img src='" + result.data.smallIconObject[item] + "' style='width:100%;height:100%;'>");
                        document.getElementById(item).style.display = 'block';
                        document.getElementById(item+'Icon').style.display = 'none';
                    })
                }
                if (result.data.activityIconObject.length > 0){
                    activityImageUrlArray = result.data.activityIconObject;
                    activityImageUrlArray.forEach((item,index)=>{
                        $(".activityIconBox").append("<div class='activityIconItem'><img src='" + item + "' style='width: 50px;height: 50px;'><div class='activityIconItemClear'data-index='" + index + "'>×</div></div>")
                })
                }
                if (result.data.bottom_prompt_text != null){
                    document.getElementById("alertTitle").value = result.data.bottom_prompt_text;
                }
                if (result.data.prompt_text_color != null){
                    document.getElementById("alertTitleColor").value = result.data.prompt_text_color;
                    document.getElementById("color").value = result.data.prompt_text_color;
                }
                if (result.data.activity_icon_starttime != null){
                    document.getElementById("alertStartTime").value = result.data.activity_icon_starttime;
                }
                if (result.data.activity_icon_endtime != null){
                    document.getElementById("alertEndTime").value = result.data.activity_icon_endtime;
                }
            }
        };
        $.ajax(config)
    }

    function submitHandler() {
        if ($.validate.form()) {
            var alertTitle = $('#alertTitle').val();
            var alertTitleColor = $('#alertTitleColor').val();
            var startTime = $('#alertStartTime').val().replace('T',' ');
            var endTime = $('#alertEndTime').val().replace('T',' ');
            if (new Date(startTime).getTime() - new Date(endTime).getTime() >= 0){
                $.modal.alertWarning("弹框结束时间不能小于开始时间");
            }else {
                var objSubmit = {
                    id:'1',
                    portal_background:bgImageUrl,
                    small_icon_extra:JSON.stringify(smallImageUrlArray),
                    activity_icon_extra:JSON.stringify(activityImageUrlArray)
                }
                if (alertTitle != ''){
                    objSubmit.bottom_prompt_text = alertTitle
                }
                if (alertTitleColor != ''){
                    objSubmit.prompt_text_color = alertTitleColor
                }
                if (startTime != ''){
                    objSubmit.activity_icon_starttime = startTime
                }
                if (endTime != ''){
                    objSubmit.activity_icon_endtime = endTime
                }
                console.log('objSubmit', objSubmit);
                var configSubmit = {
                    url: prefixEdit + "/editHome",
                    type: "post",
                    dataType: "json",
                    data: objSubmit,
                    beforeSend: function () {
                        $.modal.loading("正在处理中，请稍后...");
                    },
                    success:function (result) {
                        $.modal.closeLoading();
                        $.operate.successCallback(result);
                    }
                }
                $.ajax(configSubmit)
            }
        }
    }
</script>
</body>
</html>
