<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('添加活动')"/>
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <style>
        .layui-form {
            padding: 20px;
        }
        .main_type, .money, .scope_application, .sendType,.phoneNumber,.playMethod {
            margin-bottom: 20px;
        }

        .phoneNumber,.playMethod {
            display: none;
        }
        .labelName {
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        input {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            padding-left: 5px;
            height: 30px;
        }
        .main_type .form-control.kv-fileinput-caption {
            height: 42px !important;
        }
        .prompt {
            margin-left: 100px !important;
        }

        .main_type input, .sendType input,.playMethod input {
            margin-top: -2px;
            margin-right: 5px;
        }
        .main_type span, .sendType span, .playMethod span {
            margin-right: 12px;
            line-height: 28px;
        }
        .layui-form .money input {
            width: 60px;
        }
        .main_bottom .describe, .main_bottom .sendTime {
            margin-bottom: 20px;
        }
        .describe,.main_type {
            display: flex;
        }
        .sendTime {
            display: flex;
        }
        .sendTime input {
            margin-top: -6px;
            margin-right: 5px;
        }
        .bottom_btn {
            width: 25%;
            text-align: center;
        }
        select {
            border: 1px solid #ddd;
            border-radius: 4px;
            background: transparent;
            outline: none;
            height: 30px;
            width: 200px;
        }
        .required {
            font-style: normal;
            color: red;
        }
        .ibox-content {
            border-style: none;
            border-width: 0px;
        }
        .main_type .file-footer-buttons .kv-file-remove {
            display: none !important;
        }
        .selectScore {
            display: flex;
            align-items: center;
        }
        .selectScore p {
            margin: 0;
        }
        .selectScore button {
            margin: 0 12px;
        }
        .selectScore span {
            color: #ccc;
        }
        .scoreTable {
            margin-bottom: 12px;
        }
    </style>
</head>
<body class="white-bg">
<form id="form-user-add"  class="layui-form">
    <div>
        基础信息
    </div>
    <div class="main_type">
        <span class="labelName"><i class="required">*</i>活动名称：</span>
        <div class="layui-input-block" style="display: flex">
            <input type="text" id="ActivityName" autocomplete="off" class="layui-input" placeholder="请输入名称">
        </div>
    </div>
    <div class="main_type">
        <span class="labelName"><i class="required">*</i>活动类型：</span>
        <div class="layui-input-block" style="display: flex">
            <input type="text" id="ActivityType" autocomplete="off" class="layui-input" value="转盘" disabled placeholder="请输入类型">
        </div>
    </div>
    <input id="ceshi" class="scoreFile" type="file" name="scoreFile" style="display: none;">
    <input id="selectCeshi" class="scoreFile" type="file" name="scoreFile" style="display: none;">
    <div class="main_type">
        <span class="labelName"><i class="required">*</i>banner图：</span>
        <div class="layui-input-block" style="display: flex;flex-direction: column;">
            <img id="viewImg" src="" alt="" style="max-height:242px;">
            <div class="ibox-content">
                <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>
                </div>
            </div>
        </div>
    </div>
    <div class="main_type">
        <span class="labelName"><i class="required">*</i>所需积分：</span>
        <div class="layui-input-block" style="display: flex">
            <input type="text" id="integral" autocomplete="off" class="layui-input" placeholder="请输入所需积分">
        </div>
    </div>
    <div class="sendType">
        <div style="display: flex;align-items: center;">
            <span class="labelName"><i class="required">*</i>活动时间：</span>
            <div class="layui-input-block" style="display: flex">
                <input type="radio" value="1" name="sendType" checked><span>长期</span>
                <input type="radio" value="2" name="sendType"><span>选择开始结束时间</span>
                <div class="selectTime">
                    <input type="text" class="layui-input" id="startTime" autocomplete="off" placeholder="请选择起始时间">
                    <span>~</span>
                    <input type="text" class="layui-input" id="endTime" autocomplete="off" placeholder="请选择结束时间">
                </div>
            </div>
        </div>
    </div>
    <div class="selectScore">
        <p><i class="required">*</i>选择商品</p>
        <!-- <button type="button" class="btn btn-primary" onclick="addColumn()">新增商品</button>
        <span>最多可上传6个</span> -->
    </div>
    <!-- <img src="img/select.png" alt=""> -->
    <div class="scoreTable">
        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="main_bottom">
        <div class="describe">
                <span class="labelName">
                    <i class="required">*</i>活动规则：
                </span>
            <textarea id="activityRule" class="form-control" style="min-height: 160px;"></textarea>
        </div>
        <div class="sendTime">
            <span class="labelName"><i class="required">*</i>是否上线：</span>
            <div class="layui-input-block" style="display: flex">
                <input type="radio" name="online" value="1" checked><span>未上线</span>
                <input type="radio" name="online" value="2" style="margin-left: 12px;"><span>已上线</span>
            </div>
        </div>
        <div class="sendTime">
            <span class="labelName"><i class="required">*</i>快递费用：</span>
            <div class="layui-input-block" style="display: flex">
                <input type="radio" name="sex" value="1" checked><span>包邮</span>
                <input type="radio" name="sex" value="2" style="margin-left: 12px;"><span>到付</span>
            </div>
            <!-- <span style="margin-right:12px;"><p>输入金额</p></span>
            <input type="text" id="courierMoney" autocomplete="off" class="layui-input" placeholder="请输入金额"> -->
        </div>
        <div class="bottom_btn">
            <!-- <button type="button" class="layui-btn btn btn-primary" lay-filter="formDemo" onclick="create()">创建代金券</button> -->
            <button type="button" class="btn btn-primary" onclick="create()">确  定</button>
        </div>
    </div>
    
</form>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery.tmpl.js}"></script>
<th:block th:include="include :: bootstrap-fileinput-js" />
<script type="text/javascript">
    var platformUrl = `[[${platformUrl}]]`
    var prefix = ctx + "sweet/sweetIntegralActivity";
    let showIndex = null;
    // 初始化数据, 可以由后台传过来
    var data = []; // 表格内数据集合
    let activityName = ''; // 活动名称
    let activityType = ''; // 活动类型
    let timeType = '1'; // 活动时间类型
    let startTime = ''; // 开始时间
    let endTime = ''; // 结束时间
    let activityRule = ''; // 活动规则
    let courierType = '1'; // 快递类型
    let courierMoney = ''; // 快递费用
    let showPicture = ''; // banner
    let online = '1'; // 是否上线
    let itemId = '';
    let activitySize = false;
    var options = {
        data: data,
        pagination: false,
        showSearch: false,
        showRefresh: false,
        showToggle: false,
        showColumns: false,
        sidePagination: "client",
        columns: [
            {
                field: 'index',
                align: 'center',
                title: "序号",
                formatter: function (value, row, index) {
                    return index+1;
                }
            },
            {
                field: 'prizeTitle',
                align: 'center',
                title: '奖品名称',
                formatter: function(value, row, index) {
                    let str = '';
                    if (data[index].prizeTitle) {
                        str = "<input id='prizeTitle"+index+"' class='form-control' type='text' name='' value='"+data[index].prizeTitle+"'>"
                    } else {
                        str = "<input id='prizeTitle"+index+"' class='form-control' type='text' name='' value=''>"
                    }
                    var html = $.common.sprintf(str, index, value);
                    return html;
                }
            },
            {
                field: 'prizeImgInit',
                align: 'center',
                title: '商品图片',
                formatter: function(value, row, index) { // 
                    let str = '';
                    if (data[index].prizeImgInit) {
                        str = `<img id="showPic${index}" onclick=upFile(${index}) src="${data[index].prizeImgInit}" alt="" style="max-height:50px;">`
                    } else {
                        str = `<img id="showPic${index}" onclick=upFile(${index}) src="${value}" alt="点击上传" style="max-height:50px;">`
                    }
                    var html = $.common.sprintf(str, index, value);
                    return html;
                }
            },
            {
                field: 'prizeImgSelect',
                align: 'center',
                title: '选中图片',
                formatter: function(value, row, index) { // 
                    let str = '';
                    if (data[index].prizeImgSelect) {
                        str = `<img id="showPicSelect${index}" onclick=upFileSelect(${index}) src="${data[index].prizeImgSelect}" alt="" style="max-height:50px;">`
                    } else {
                        str = `<img id="showPicSelect${index}" onclick=upFileSelect(${index}) src="${value}" alt="点击上传" style="max-height:50px;">`
                    }
                    var html = $.common.sprintf(str, index, value);
                    return html;
                }
            },
            {
                field: 'prizeType',
                align: 'center',
                title: '奖品类型',
                formatter: function(value, row, index) {
                    let arr = ['谢谢惠顾', '积分', '代金券', '满减券', '优先购买', '实物'];
                    let str = '';
                    arr.forEach((item,i)=> {
                        i++
                        if (i == data[index].prizeType) {
                            str += `<option value="${i}" selected>${item}</option>`
                        } else {
                            str += `<option value="${i}">${item}</option>`
                        }
                    })
                    let dom = `<select id='prizeType${index}' class='form-control' name=''>
                        ${str}
                    </select>`
                    return dom;
                }
            },
            {
                field: 'winningProbability',
                align: 'center',
                title: '概率',
                formatter: function(value, row, index) {
                    let str = '';
                    if (data[index].winningProbability) {
                        str = `<input id='winningProbability${index}' class='form-control' type='text' name='' value='${data[index].winningProbability}'>`
                    } else {
                        str = `<input id='winningProbability${index}' class='form-control' type='text' name='' value=''>`
                    }
                    var html = $.common.sprintf(str, index, value);
                    return html;
                }
            },
            {
                field: 'prizeNum',
                align: 'center',
                title: '数量',
                formatter: function(value, row, index) {
                    let str = '';
                    if (data[index].prizeNum) {
                        str = `<input id='prizeNum${index}' class='form-control' type='text' name='' value='${data[index].prizeNum}'>`
                    } else {
                        str = `<input id='prizeNum${index}' class='form-control' type='text' name='' value=''>`
                    }
                    var html = $.common.sprintf(str, index, value);
                    return html;
                }
            },
            {
                field: 'winnersNum',
                align: 'center',
                title: '中奖人数',
                formatter: function(value, row, index) {
                    let str = '';
                    if (data[index].winnersNum) {
                        str = `<input id='winnersNum${index}' class='form-control' type='text' name='' value='${data[index].winnersNum}'>`
                    } else {
                        str = `<input id='winnersNum${index}' class='form-control' type='text' name='' value=''>`
                    }
                    var html = $.common.sprintf(str, index, value);
                    return html;
                }
            },
            {
                field: 'WinPrizeNum',
                align: 'center',
                title: '已发出',
                formatter: function(value, row, index) {
                    if (value) {
                        return value;
                    } else {
                        return '-'
                    }
                }
            },
            {
                field: 'residue',
                align: 'center',
                title: '奖品剩余',
                formatter: function(value, row, index) {
                    if (itemId) {
                        return (row.prizeNum - row.WinPrizeNum) || '-'
                    } else {
                        return '-'
                    }
                }
            }
        ]
    };
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#startTime', //指定元素
            type: 'datetime'
        });
        laydate.render({
            elem: '#endTime', //指定元素
            type: 'datetime'
        });
    });
    $("#ActivityName").blur(function(e) {
        if (e.target.value.length > 20) {
            activitySize = true;
            layer.msg('活动名称限制在20个字符以内！')
            return
        } else {
            activitySize = false;
        }
    })
    $(function() {
        itemId = getUrlParms('id')
        function getUrlParms(name){
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if(r!=null)
                return unescape(r[2]);
                return null;
        }
        if (itemId) {
            $.ajax({
                type: 'get',
                url: '/sweet/integralActivity/details',
                data: {integralActivityId: itemId},
                success:function(e) {
                    if (e.code == 0) {
                        let res = e.data;
                        showPicture = res.activityImg;
                        $("#viewImg").attr('src', showPicture);
                        $("#integral").val(res.activityNum);
                        $("#activityRule").val(res.activityRules);
                        $("#ActivityName").val(res.activityTitle);
                        // activityType: 1,
                        courierType = res.expressFeeType;
                        if (courierType == 2) {
                            $("input[name='sex'][value='2']").attr('checked', true).siblings().removeAttr('checked');
                        }
                        integralActivityId = res.integralActivityId;
                        $("#endTime").val($.common.dateFormat(res.endTime, 'yyyy-MM-dd HH:mm:ss'));
                        online = res.isOnline;
                        if (online == 2) {
                            $("input[name='online'][value='2']").attr('checked', true).siblings().removeAttr('checked');
                        }
                        // prizeList: data,
                        $("#startTime").val($.common.dateFormat(res.startTime, 'yyyy-MM-dd HH:mm:ss'));
                        timeType = res.timeType;
                        if (timeType == 2) {
                            $("input[name='sendType'][value='2']").attr('checked', true).siblings().removeAttr('checked');
                        }
                        data = [...res.prizeList]
                        options.data = data;
                        setTimeout(()=>{
                            $.table.init(options);
                        }, 500)
                    }
                }
            })
        } else {
            let obj = {
                prizeTitle: "",
                prizeImgInit: "",
                prizeImgSelect: "",
                winnersNum: "",
                WinPrizeNum: "",
                prizeType: "",
                winningProbability: "",
                residue: "",
                prizeNum: ""
            };
            for( var i = 0; i < 12; i++) {
                data.push(obj)
            }
            $.table.init(options);
        }
        
    });
        
    $("input[name=sendType]").change((e)=>{
        timeType = e.target.value;
        if (timeType == 1) {
            $("#endTime").val("");
            $("#startTime").val("");
        }
    })
    $("input[name=sex]").change((e)=>{
        courierType = e.target.value;
    })
    $("input[name=online]").change((e)=>{
        online = e.target.value;
    })
    function upFile(e) {
        showIndex = e;
        $("#ceshi").click();
    }
    function upFileSelect(e) {
        showIndex = e;
        $("#selectCeshi").click();
    }
    $("#ceshi").change((e) => {
        if (!e.target.files[0]) {
            return
        }
        var formData = new FormData();
        formData.append("file", e.target.files[0]);
        $.ajax({
            url: platformUrl + "/platform/basicServices/alOss/upload",//路径是你控制器中上传图片的方法，下面controller里面我会写到
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (res) {
                $("#showPic"+showIndex).attr('src','https://img.zhengzai.tv/' + res.data.ossPath)
                data[showIndex].prizeImgInit = 'https://img.zhengzai.tv/' + res.data.ossPath;
                $("#ceshi").val("");
                // $summernote.summernote('insertImage', 'https://img.zhengzai.tv/' + data.data.ossPath)
            }
        });
    })
    $("#selectCeshi").change((e) => {
        if (!e.target.files[0]) {
            return
        }
        var formData = new FormData();
        formData.append("file", e.target.files[0]);
        $.ajax({
            url: platformUrl + "/platform/basicServices/alOss/upload",//路径是你控制器中上传图片的方法，下面controller里面我会写到
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function (res) {
                $("#showPicSelect"+showIndex).attr('src','https://img.zhengzai.tv/' + res.data.ossPath)
                data[showIndex].prizeImgInit = 'https://img.zhengzai.tv/' + res.data.ossPath;
                $("#selectCeshi").val("");
                // $summernote.summernote('insertImage', 'https://img.zhengzai.tv/' + data.data.ossPath)
            }
        });
    })
    $("#fileinput").fileinput({
        'theme': 'explorer-fas',
        '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) {       //上传回调事件
        showPicture = 'https://img.zhengzai.tv/' + data.response.data.ossPath;
        $("#viewImg").attr('src', showPicture)
    })
    function create() {
        if (!$("#ActivityName").val() || !$("#ActivityType").val() || !showPicture || !$("#integral").val() || !$("#activityRule").val() || !$("#viewImg").attr('src')) {
            return layer.msg('请将必填信息填写完整！')
        }
        if (timeType == 2) {
            if (!$("#startTime").val() || !$("#endTime").val()) {
                return layer.msg('请选择时间！')
            }
        } else {
            $("#startTime").val("")
            $("#endTime").val("")
        }
        if (activitySize) {
            layer.msg("活动名称限制在20个字符以内！")
            return
        }
        let flag = false;
        data = data.map((item,index)=>{
            if (!$("#prizeTitle"+index).val()||!$("#showPic"+index).attr('src')||!$("#showPicSelect"+index).attr('src')||!$("#winnersNum"+index).val()||!$("#prizeType"+index).val()||!$("#winningProbability"+index).val()||!$("#prizeNum"+index).val()) {
                flag = true
            } else {
                item.prizeTitle = $("#prizeTitle"+index).val();
                item.prizeImgInit = $("#showPic"+index).attr('src');
                item.prizeImgSelect = $("#showPicSelect"+index).attr('src');
                item.winnersNum = $("#winnersNum"+index).val();
                item.prizeType = $("#prizeType"+index).val();
                item.winningProbability = $("#winningProbability"+index).val();
                item.prizeNum = $("#prizeNum"+index).val();
            }
            return {...item};
        })
        if (flag) {
            return layer.msg('请将表格内容填写完整！')
        }
        let datas = {
            activityImg: showPicture,
            activityNum: $("#integral").val(),
            activityRules: $("#activityRule").val(),
            activityTitle: $("#ActivityName").val(),
            activityType: 1,
            expressFeeType: courierType,
            integralActivityId: itemId || '',
            endTime: $.common.dateFormat($("#endTime").val(), 'yyyy-MM-dd HH:mm:ss') , // 
            isOnline: online,
            prizeList: data,
            startTime: $.common.dateFormat($("#startTime").val(), 'yyyy-MM-dd HH:mm:ss'),
            timeType: timeType
        }
        let url = '/sweet/integralActivity/create';
        let type = 'post';
        if (itemId) {
            url = '/sweet/integralActivity/update'
            type = 'put'
        }
        $.ajax({
            type,
            url,
            contentType: "application/json;charset=UTF-8",
            data: JSON.stringify(datas),
            success:function(res) {
                layer.msg('' + res);
                if (res.code != undefined && res.code != web_status.SUCCESS) {
                    $.modal.alertWarning(res.msg);
                    return [];
                } else if (res.code == web_status.SUCCESS) {
                    $.operate.successTabCallback(res);
                    closeItem();
                }
            }
        })
    }
        
</script>
</body>
</html>