<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改活动</title>

    <style type="text/css">
        table {
            table-layout: fixed !important;
        }

        th {
            background: rgb(146, 208, 80);
        }

        td, th {
            max-width: 400px;
            word-wrap: break-word;
        }

        .table-hover > tbody > tr:hover {
            background-color: #c8bd6d;
        }

        #roleTable tr:nth-child(5n) {
            background: rgb(198, 239, 206);
        }

        /**隔五行*/

        .fixed-table-toolbar {
            display: none;
        }

        .fileinput-button {
            position: relative;
            top: -5px;
        }

        .fileinput-button input {
            position: absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
        }
    </style>
</head>

<body>
<div class="content_wrapper">
    <div id="msg-tip"></div>
    <div class="container-fluid ">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>新手收集活动配置</header>

                    <section>
                        <div class="container-fluid">
                            <div style="margin-bottom: 10px;">
                                <button type="button" style="width: 80px;" class="btn btn-primary" id="confSubmitBtn">提交</button>
                            </div>
                            <form method="post" class="form-horizontal" id="CollectFrom" enctype="multipart/form-data" action="#">
                                <div style="padding:25px 0;" class="col-sm-12">
                                    <div>
                                        <div class="form-group">
                                            <label class="col-sm-1 control-label m-b">开关：</label>
                                            <div class="col-sm-2">
                                                <select class="form-control m-b" name="conf[switch]">
                                                    <option value="0" <?php if ($conf['switch'] == 0) echo 'selected'; ?>>关闭</option>
                                                    <option value="1" <?php if ($conf['switch'] == 1) echo 'selected'; ?>>打开</option>
                                                </select>
                                            </div>
                                            <label class="col-sm-1 control-label m-b">触发等级：</label>
                                            <div class="col-sm-2">
                                                <input type="text" class="form-control" name="conf[lvStart]" value="<?php echo $conf['lvStart'] ?>">
                                            </div>

                                            <label class="col-sm-1 control-label">奖励配置：</label>
                                            <div class="col-sm-2">
                                                <select class="form-control m-b select2" name="conf[cid]">
                                                    <option value="0">选择奖励配置</option>
                                                    <?php if (!empty($list)) foreach ($list as $k => $v) { ?>
                                                        <option value="<?php echo $v['id'] ?>" <?php if ($conf['cid'] == $v['id']) echo 'selected'; ?>><?php echo $v['name'] ?></option>
                                                    <?php } ?>
                                                </select>
                                            </div>
                                        </div>
                                        <hr style="margin-top: 30px">
                                        <div>
                                            <label class="col-sm-1"></label>
                                            <span id="filespanXml" class="btn btn-success fileinput-button">
                                                <span>导入</span>
                                                <input type="file" id="uploadXml">
                                            </span>
                                            <input type="button" style="display: none;margin-bottom: 10px;width: 80px;" class="btn btn-success" value="上传" id="uploadConfigFileBtn"/>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-1 control-label m-b">奖励配置列表：</label>
                                            <div class="col-sm-11">
                                                <table id="roleTable" class="table table-bordered table-hover"
                                                       data-toggle="table"
                                                       data-classes="table table-hover"
                                                       data-show-columns="true"
                                                       data-striped="true"

                                                       data-height="700">
                                                    <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>备注</th>
                                                        <th>创建时间</th>
                                                        <th>更新时间</th>
                                                        <th>操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <?php
                                                    if (!empty($list) && is_array($list)) {
                                                        foreach ($list as $key => $vl) { ?>
                                                            <tr>
                                                                <td><?php echo $vl['id']; ?></td>
                                                                <td><?php echo $vl['name']; ?></td>
                                                                <td><?php echo $vl['createTime']; ?></td>
                                                                <td><?php echo $vl['updateTime']; ?></td>
                                                                <td>
                                                                    <button type="button" class="btn btn-primary active"
                                                                            onclick="openEdit(<?php echo $vl['id']; ?>)"
                                                                            data-toggle="modal"
                                                                            data-target="#goodsEditBtn"
                                                                            data-value='<?php echo json_encode($vl); ?>'>编辑
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        <?php }
                                                    } else { ?>
                                                        <tr>
                                                            <td colspan="14">暂无数据</td>
                                                        </tr>
                                                    <?php } ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</div>
</body>

<div class="modal" id="goodsEditBtn" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 70%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">修改配置</h4>
            </div>
            <form class="form-horizontal" method="post" id="goodForm" action="">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">ID:</label>
                        <div class="col-sm-2">
                            <input type="text" readonly class="form-control" name="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">活动皮肤：</label>
                        <div class="col-sm-3">
                            <select class="form-control" name="act_skin">
                                <option value="0">选择活动皮肤</option>
                                <?php if (!empty($imgNames)) foreach ($imgNames as $k => $v) { ?>
                                    <option value="<?php echo $v['type'] ?>"><?php echo $v['name'] ?></option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注:</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" placeholder="填写备注" name="tag_name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label m-b">收集类型：</label>
                        <div class="col-sm-2">
                            <select onchange='handleCollectTypeChange(CollectConf["basic_conf"])' id="selectCollectType" class="form-control" name="basic_conf[groupId]">
                                <?php if (!empty($collectType)) foreach ($collectType as $k => $v) { ?>
                                    <option value="<?php echo $k ?>"><?php echo $v ?></option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label m-b"></label>
                        <div class="col-sm-10">
                            <div id="selectCollectConf"></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label m-b">奖励配置:</label>
                        <div class="col-sm-10 control-label m-b">
                            <div id="selectCollectReward"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="goodsSubmitBtn">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    const Debug = <?php echo $debug ?>;
    let CollectConf = {}
    let CollectRewardCnt = 0

    $(function () {
        $('#confSubmitBtn').click(() => {
            const data = $('#CollectFrom').toObject()
            $.ajax({
                url: 'collect/updateConfig',
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function (data) {
                    alert(data.msg);
                    if (data.ret === 0) {
                        window.location.reload();
                    }
                },
                error: function (data) {
                    alert(data.msg);
                }
            });
        });

        $('#goodsSubmitBtn').click(function () {
            var data = new FormData(document.getElementById("goodForm"));
            $.ajax({
                url: rootPath + 'collect/updateDetail',
                type: 'POST',
                data: data,
                dataType: 'json',
                contentType: false, //必须
                processData: false, //必须
                success: function (data) {
                    alert(data.msg);
                    // confirm(data.msg);
                    window.location.reload();
                },
                error: function (data) {
                    alert(data.msg);
                }
            });
        });

        $("#uploadConfigFileBtn").click(function () {
            var formData = new FormData();
            formData.append("file", document.getElementById("uploadXml").files[0]);

            $.ajax({
                type: "POST", // 数据提交类型
                url: "import/collect", // 发送地址
                data: formData, //发送数据
                async: true, // 是否异步
                processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                contentType: false, //
                success: function (data) { // 成功回调
                    data = JSON.parse(data);
                    if (data.ret == 0) {
                        // console.log(data)
                        alert(data.msg);
                        window.location.reload();
                    } else {
                        // msgTip = $('#msg-tip');
                        alert(data.msg);
                        // window.location.reload();
                    }
                }
            });
        });

        $("#filespanXml").on("change", "input[type='file']", function () {
            var filePath = $(this).val();
            //如果仅上传图片 if(filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {
            if (filePath) {
                $('#filespanXml').hide();
                $('#uploadConfigFileBtn').show();
            } else {
                return false
            }
        });
    });

    function handleCollectTypeChange(collectConf, ctype = 0) {
        if (ctype === 0) {
            ctype = Number($('#selectCollectType').val());
        }
        const node = $('#selectCollectConf')

        let hitHtml = ""
        hitHtml += `<label class="col-sm-1 control-label">一连击:</label><div class="col-sm-1"><input type="text" name="basic_conf[one_hit]" value="${collectConf['one_hit'] ?? 0}" class="form-control"></div>`;
        hitHtml += `<label class="col-sm-1 control-label">二连击:</label><div class="col-sm-1"><input type="text" name="basic_conf[two_hit]" value="${collectConf['two_hit'] ?? 0}" class="form-control"></div>`;
        hitHtml += `<label class="col-sm-1 control-label">三连击:</label><div class="col-sm-1"><input type="text" name="basic_conf[three_hit]" value="${collectConf['three_hit'] ?? 0}" class="form-control"></div>`;

        node.empty();

        let html = ""
        switch (ctype) {
            case 2:
                html += hitHtml
                break;
            case 3:
                html += hitHtml
                html += `<label class="col-sm-1 control-label">偷:</label><div class="col-sm-1"><input type="text" name="basic_conf[steal_success]" value="${collectConf['steal_success'] ?? 0}" class="form-control"></div>`;
                break;
            case 4:
                html += hitHtml
                html += `<label class="col-sm-1 control-label">打:</label><div class="col-sm-1"><input type="text" name="basic_conf[attack_success]" value="${collectConf['attack_success'] ?? 0}" class="form-control"></div>`;
                break;
            case 8:
                html += `<label class="col-sm-1 control-label">一个偷:</label><div class="col-sm-1"><input type="text" name="basic_conf[one_steal]" value="${collectConf['one_steal'] ?? 0}" class="form-control"></div>`;
                html += `<label class="col-sm-1 control-label">两个偷:</label><div class="col-sm-1"><input type="text" name="basic_conf[two_steal]" value="${collectConf['two_steal'] ?? 0}" class="form-control"></div>`;
                html += `<label class="col-sm-1 control-label">三个偷:</label><div class="col-sm-1"><input type="text" name="basic_conf[steal_success]" value="${collectConf['steal_success'] ?? 0}" class="form-control"></div>`;
                break;
            case 9:
                html += `<label class="col-sm-1 control-label">一个打:</label><div class="col-sm-1"><input type="text" name="basic_conf[one_attack]" value="${collectConf['one_attack'] ?? 0}" class="form-control"></div>`;
                html += `<label class="col-sm-1 control-label">两个打:</label><div class="col-sm-1"><input type="text" name="basic_conf[two_attack]" value="${collectConf['two_attack'] ?? 0}" class="form-control"></div>`;
                html += `<label class="col-sm-1 control-label">三个打:</label><div class="col-sm-1"><input type="text" name="basic_conf[attack_success]" value="${collectConf['attack_success'] ?? 0}" class="form-control"></div>`;
                break;
        }
        node.append(html);
    }

    function initReward() {

        $(`input[name="id"]`).val(CollectConf['id'])
        $(`input[name="tag_name"]`).val(CollectConf['tag_name'])
        $(`select[name="act_skin"]`).val(CollectConf['act_skin'])
        $(`select[name="basic_conf[groupId]"]`).val(CollectConf['basic_conf']['groupId'])

        handleCollectTypeChange(CollectConf['basic_conf'], CollectConf['basic_conf']['groupId'])

        const rewardNode = $("#selectCollectReward")

        rewardNode.empty();

        CollectRewardCnt = 0;

        rewardNode.append(CollectWrapStageTable());

        // 奖励回写
        console.log('CollectConf', CollectConf)
        CollectConf['reward'] && $.each(CollectConf['reward'], function (i, o) {
            $('.addCollectRewardTrBtn:last').click()

            $(`input[name="reward[${i}][stepnum]"]`).val(o.stepnum)
            $('.propsRewardsTag:last').data("value", o.prize)
        })
    }

    function CollectWrapStageTable() {

        return `
        <div class="form-group CollectRewardWrap " style="margin:10px;padding:10px;border:solid 1px black;">
            <table class="table table-bordered" >
            <thead>
                <tr>
                    <th width="120">阶段</th>
                    <th width="120">阶段值</th>
                    <th>奖品</th>
                    <th width="100">奖励设置</th>
                </tr>
            </thead>
            <tbody id="CollectRewardBody"> </tbody>
            <tr>
                <td colspan="4">
                    <div class="text-center">
                        <botton class="btn btn-primary addCollectRewardTrBtn" onclick="addCollectRewardTr(this)">添加</botton>
                        <botton class="btn btn-danger del-tr" onclick="delCollectRewardTr(this)">删除</botton>
                    </div>
                </td>
            </tr>
        </table>
        </div>
`
    }

    function addCollectRewardTr() {

        const rIdx = CollectRewardCnt++

        let html = `
        <tr id="collectRewardInfo_${rIdx}" data-idx="${rIdx}">
            <td>
                <input type="text" class="form-control" readonly name="reward[${rIdx}][stage]" value="${rIdx + 1}">
            </td>
            <td>
                <input type="text" class="form-control"  name="reward[${rIdx}][stepnum]" value="0">
            </td>
            <td class="propsRewardsTag" data-value="[]" data-name="reward[${rIdx}][prize]"></td>
            <td>
                <button type="button" class="btn btn-outline btn-success" onclick="propsJs.initEdit(this, 'propsRewardsTag')">
                奖励配置
                </button>
            </td>
        </tr>
    `;

        $('#CollectRewardBody').append(html)
    }

    function delCollectRewardTr() {

        if (CollectRewardCnt < 1) return;

        const rIdx = --CollectRewardCnt

        $('#collectRewardInfo_' + rIdx).remove()
    }

    function openEdit(id) {
        CollectRewardCnt = 0
        $.ajax({
            url: 'collect/detail/' + id,
            type: 'POST',
            data: {},
            async: false, // 是否异步
            dataType: 'json',
            success: function (data) {
                if (data.ret === 0) {
                    CollectConf = data.data
                } else {
                    alert(data.msg);
                }
            },
            error: function (data) {
                alert(data.msg);
            }
        });

        initReward()
        propsJs.initTag('propsRewardsTag')

        if (!Debug) {
            $(`#goodsSubmitBtn`).attr("disabled", CollectConf['status'] === 1);
        }
    }

</script>
