<!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"/>
    <style>
        .icheckbox, .icheckbox-blue, .iradio, .iradio-blue, .iradio-purple {
            top: 5px !important;
        }
        .layui-input {
            height: 34px;
            line-height: 1.3;
            line-height: 38px\9;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            color: rgba(0,0,0,.85);
            border-radius: 2px;
            border-color: #d2d2d2!important;
        }
        input:focus, .layui-textarea:focus {
            border-color: #d2d2d2!important;
            outline: none;
        }
        input:focus-visible, .layui-textarea:focus-visible {
            border-color: #d2d2d2!important;
            outline: none;
        }
        .ibox-content {
            padding-left: 0;
            padding-right: 0;
        }
        .btn:focus {
            outline: none;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">

    <!--退票规则-->
    <h4 style="margin-bottom: 20px;">退票规则<span style="color: red;">( 规则上限10条，且多个规则的'申请退票时间'均需按顺序设置，否则无效)</span></h4>
    <div class="ladder_box" id="ladder_box" style="width: 100%; background: #f5f5f5; padding: 10px 6px;overflow-x: auto">
        <button type="button" class="btn btn-primary" style="margin-bottom: 12px;" onclick="add()">新增</button>
    </div>
    <div style="display: flex; justify-content: end; margin-top: 20px;">
        <button type="button" class="btn btn-primary" onclick="save()">保存</button>
    </div>
    <div style="border-top: 1px solid #e7eaec; width: 100%; margin-top: 20px;"></div>
    <div class="" style="margin: 12px 0;">
        <h4 style="margin: 12px 0;">注意事项</h4>
        <div>
            <textarea name="details" class="form-control layui-textarea" id="wrningText" placeholder="注意事项字符不得超过200个" style="height: 200px;" onblur="wrningBlur()"></textarea>
        </div>
        <div style="display: flex; justify-content: end; margin-top: 20px;">
            <button type="button" class="btn btn-primary" onclick="saveExplain()">保存</button>
        </div>
    </div>
    <!--注意事项-->

</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "kylin/performances";
    /**
     * 演出ID
     *
     * @type {*[String][]}
     */
     var performancesId = [[${performancesId}]];
    /**
     * 退票规则列表
     *
     * @type {*[Array][]}
     */
    var refundPoundageList = [[${refundPoundageList}]];
    /**
     * 注意事项
     *
     * @type {*[String][]}
     */
    var refundPoundageExplain = [[${refundPoundageExplain}]];
    $("#wrningText").val(refundPoundageExplain)
    function wrningBlur() {
        if ($("#wrningText").val().length > 200) {
            $("#wrningText").val($("#wrningText").val().substring(0, 200))
            layer.msg('注意事项限制字数为200字以内，已为您删掉多余文字！')
        }
    }
     let ex = {day: '', content: '', present: 0, isCanRefund: 0}
     if (refundPoundageList && refundPoundageList.length > 0) {
        let dom = ''
        for(var i = 0; i < refundPoundageList.length; i++) {
            refundPoundageList[i].index = i
            dom += `<div class="ladder_items" id="ladder_items${i}" style="width: 100%; display: flex; align-items: center; margin-bottom: 12px;">
                <div class="" style="display: flex; align-items: center; margin-right: 12px; width: 260px;">
                    <span class="control-label is-required" style="padding-top: 0px; width: 106px;">截至退票时间：</span>
                    <input type="text" class="layui-input form-control test" id="test${i}" value="${refundPoundageList[i].day}" style="width: 154px">
                </div>
                <div class="" style="display: flex; align-items: center; margin-right: 12px; width: 202px;">
                    <span class="control-label is-required" style="padding-top: 0px; width: 106px">是否支持退票：</span>
                    <p style="dispaly: flex; align-items: center; margin-bottom: 0px; width: 48px"><input type="radio" class="performance_isRefundPoundage" value="0" style="flex: 1; margin-top: 0; margin-right: 4px; cursor: pointer" name="performance_isRefundPoundage${i}" ${refundPoundageList[i].isCanRefund == 0 ? 'checked' : false}> <span>关闭</span></p>
                    <p style="dispaly: flex; align-items: center; margin-bottom: 0px; width: 48px"><input type="radio" class="performance_isRefundPoundage" value="1" style="flex: 1; margin: 0 4px 0; cursor: pointer" name="performance_isRefundPoundage${i}" ${refundPoundageList[i].isCanRefund ? 'checked' : false}><span>开启</span></p>
                </div>
                <div class="" style="display: flex; align-items: center; margin-right: 12px; width: 148px; position: relative">
                    <span class="control-label is-required" style="padding-top: 0px; width: 88px">扣除手续费：</span>
                    <input type="number" class="layui-input form-control handlingCharge" id="handlingCharge${i}" value="${refundPoundageList[i].present}" name="" style="width: 60px;" onblur="presentBlur(${i})">
                    <span style="width: 20px; height: 24px; position: absolute; right: 2px; top: 4px; background: #fff"></span>
                </div>
                <div class="" style="flex: 1; display: flex; align-items: center;">
                    <span class="control-label is-required" style="padding-top: 0px; width: 74px;">规则描述：</span>
                    <input type="text" class="layui-input form-control description" value="${refundPoundageList[i].content}" placeholder="规则描述限制在50分字符以内" name="" style="width: 400px; flex: 1;" id="description${i}" onBlur="descriptionBlurClick(${i})">
                    <button class="btn btn-danger del-btn" style="width: 58px; margin-left: 12px;" onclick="del(${i})">删除</button>
                </div>
            </div>`
            createLay(`#test${i}`)
        }
        $("#ladder_box").append(dom)
    } else {
        add()
    }
    
    function add () {
        if (refundPoundageList.length >= 10) return layer.msg('规则最多可添加十条！');
        let num = refundPoundageList.length
        let dom = `<div class="ladder_items" id="ladder_items${num}" style="width: 100%; display: flex; align-items: center; margin-bottom: 12px;">
                <div class="" style="display: flex; align-items: center; margin-right: 12px; width: 260px;">
                    <span class="control-label is-required" style="padding-top: 0px; width: 106px;">截至退票时间：</span>
                    <input type="text" class="layui-input form-control test" id="test${num}" value="" style="width: 154px">
                </div>
                <div class="" style="display: flex; align-items: center; margin-right: 12px; width: 202px;">
                    <span class="control-label is-required" style="padding-top: 0px; width: 106px">是否支持退票：</span>
                    <p style="dispaly: flex; align-items: center; margin-bottom: 0px; width: 48px"><input type="radio" class="performance_isRefundPoundage" value="0" style="flex: 1;margin-top: 0; margin-right: 4px; cursor: pointer" name="performance_isRefundPoundage${num}" checked> <span>关闭</span></p>
                    <p style="dispaly: flex; align-items: center; margin-bottom: 0px; width: 48px"><input type="radio" class="performance_isRefundPoundage" value="1" style="flex: 1;margin: 0 4px 0; cursor: pointer" name="performance_isRefundPoundage${num}"><span>开启</span></p>
                </div>
                <div class="" style="display: flex; align-items: center; margin-right: 12px; width: 148px; position: relative">
                    <span class="control-label is-required" style="padding-top: 0px; width: 88px">扣除手续费：</span>
                    <input type="number" id="handlingCharge${num}" class="layui-input form-control handlingCharge" value="" name="" style="width: 60px;" onblur="presentBlur(${num})">
                    <span style="width: 20px; height: 24px; position: absolute; right: 2px; top: 4px; background: #fff"></span>
                </div>
                <div class="" style="flex: 1; display: flex; align-items: center;">
                    <span class="control-label is-required" style="padding-top: 0px; width: 74px;">规则描述：</span>
                    <input type="text" id="description${num}" class="layui-input form-control description" placeholder="规则描述限制在50分字符以内" value="" name="" style="width: 400px; flex: 1;" onBlur="descriptionBlurClick(${num})">
                    <button class="btn btn-danger del-btn" style="width: 58px; margin-left: 12px;" onclick="del(${num})">删除</button>
                </div>
            </div>`
        
        $("#ladder_box").append(dom)
        createLay(`#test${num}`)
        ex['index'] = num
        refundPoundageList.push(JSON.parse(JSON.stringify(ex)))
    }
    function del(num) {
        refundPoundageList.splice(refundPoundageList.findIndex(item=> item.index == num), 1)
        $(`#ladder_items${num}`).remove()
    }
    function descriptionBlurClick(num) {
        if ($(`#description${num}`).val().length > 50) {
            $(`#description${num}`).val($(`#description${num}`).val().substring(0, 50))
            layer.msg('描述字数不得超过50字，已将超出部分进行删除！')
        }
    }
    function presentBlur(num) {
        if ($(`#handlingCharge${num}`).val() > 1 || $(`#handlingCharge${num}`).val() < 0) {
            $(`#handlingCharge${num}`).val(0)
            layer.msg('手续费比例为大于0小于1的数值！')
        }
    }
    function save() {
        let data = {
            "orderRefundPoundage": [],
            "performanceId": performancesId
        }
        const doms = $('.ladder_items')
        let flag = false
        for(var i = 0; i < doms.length; i++) {
            let item = doms[i]
            let description, test, handlingCharge
            [description, test, handlingCharge] = [$(item).find('.description').val(), $(item).find('.test').val(), $(item).find('.handlingCharge').val()]
            if (!description || !test || !handlingCharge) {
                flag = true
            }
            data['orderRefundPoundage'].push({
                content: description,
                day: test,
                isCanRefund: $(item).find('.performance_isRefundPoundage:checked').val(),
                present: handlingCharge
            })
        }
        if (flag) return layer.msg('存在未填写的必填项，请输入后再次保存!')
        ajaxMethd('/kylin/performances/refundConfig/poundage', 'post', JSON.stringify(data), 'application/json').then(resp => {
            if (resp.code == 0) {
                layer.msg('保存成功')
            } else {
                layer.msg(resp.msg)
            }
        }).catch(err => {
            layer.msg(resp.msg)
        })
    }
    function saveExplain() {
        if (!$("#wrningText").val()) layer.msg('注意事项内容为空！')
        let data = {
            explain: $("#wrningText").val(),
            performancesId: performancesId
        }
        ajaxMethd('/kylin/performances/refundConfig/explain', 'post', data).then(resp => {
            if (resp.code == 0) {
                layer.msg('保存成功')
            } else {
                layer.msg(resp.msg)
            }
        }).catch(err => {
            layer.msg(resp.msg)
        })
    }
    function createLay(dom) {
        layui.use('laydate', function(){
        var laydate = layui.laydate;
            laydate.render({
                elem: dom, //指定元素
                type: 'datetime'
            });
    
        });
    }
    function ajaxMethd(url, type, data, contentType) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url,
                type,
                data,
                contentType,
                success: function(res) {
                    resolve(res)
                }
            })
        })
    }
</script>
</body>
</html>