<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>

<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" style="padding-top: 40px;">
            <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                <div carousel-item>
                    <div>
                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">编译类型</label>
                                <div class="layui-input-block">
                                    <select name="type" lay-verify="required">
                                        <option th:each="item : ${compileTypes}" th:value="${item.key}">[[${item.value}]]</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">编译名字</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" name="name" placeholder="请输入编译名字" lay-verify="required">
                                </div>
                            </div>
                            <div id="compileCmd" class="layui-form-item">
                                <label class="layui-form-label required">编译命令</label>
                                <div class="layui-input-inline">
                                    <textarea class="layui-textarea" name="compileCmd" placeholder="请输入编译命令" lay-verify="required"></textarea>
                                </div>
                            </div>
                            <div id="versionCmd" class="layui-form-item">
                                <label class="layui-form-label required">编译器版本命令</label>
                                <div class="layui-input-inline">
                                    <textarea class="layui-textarea" name="versionCmd" placeholder="请输入编译器版本命令" lay-verify="required"></textarea>
                                </div>
                            </div>
                            <div id="compilerImage" class="layui-form-item">
                                <label class="layui-form-label required">编译器镜像</label>
                                <div class="layui-input-inline">
                                    <input class="layui-input" type="text" name="compilerImage" placeholder="请输入 Docker 编译使用的镜像" lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formStep2">
                                        &emsp;提交&emsp;
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div>
                        <div style="text-align: center;margin-top: 90px;">
                            <i class="layui-icon layui-circle"
                               style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                            <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                编译器配置已添加
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/step-lay/step.js}"></script>
<script type="text/javascript">
    // 引入 step-lay 模块
    layui.config({
        base:'/lib/step-lay/'
    }).use([ 'form', 'step'], function () {
        var form = layui.form
        var step = layui.step

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '720px',
            height: '480px',
            stepItems: [{
                title: '选择打包类型'
            }, {
                title: '填写打包配置'
            }, {
                title: '结果'
            }]
        });

        var compilerType
        form.on('submit(formStep)', function (data) {
            compilerType = data.field.type
            if (compilerType === 'shell') {
                document.getElementById("compilerImage").remove()
            } else if (compilerType === 'docker') {
                document.getElementById("compileCmd").remove()
                document.getElementById("versionCmd").remove()
            } else {
                document.getElementById("compilerImage").remove()
                document.getElementById("compileCmd").remove()
                document.getElementById("versionCmd").remove()
            }

            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            data.field.type = compilerType
            // 手动提交表单
            $.ajax({
                type: 'POST',
                url: '/api/build/compiler',
                contentType: "application/x-www-form-urlencoded",
                data: data.field,
                success: function(jsonData) {
                    if (jsonData.code === 0) {
                        layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 1});
                    } else {
                        layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 2});
                    }
                },
                error: function(xhr, status, error) {
                    // 处理表单提交失败后的错误
                    layer.msg(jsonData.msg, {offset: '15px', time: 5000, icon: 2});
                }
            });

            step.next('#stepForm');
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });
    })
</script>
</body>
</html>