<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
	<meta http-equiv="pragma" content="no-cache"/> 
	<meta http-equiv="cache-control" content="no-cache,must-revalidate"/>
	<meta http-equiv="expires" content="0"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {% include '/common/layui_css.html' %}
    <link rel="stylesheet" href="/static/lib/layuimini-2/js/lay-module/step-lay/step.css" media="all">
	<style>
        body {
            background-color: #ffffff;
        }
        .lay-step {
            padding-left: 100px!important;
        }
        .layui-form-select dl {
            max-height: 200px;
        }
        .layui-form-label {
            width: 80px;
        }
        .layui-form-label.required:after {
            content: ' *';
            color: red;
        }
    </style>
</head>
<body>
<div>
    <div class="layuimini-main">
        <div class="layui-fluid">
            <div class="layui-card-body">
                <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;padding-top: 20px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">指标名称:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="name" placeholder="请填写入指标名称" class="layui-input" lay-verify="required" value="新指标001" />
                                    </div>
                                </div>
                                
                                <div class="layui-form-item">
                                    <label class="layui-form-label">所在平台:</label>
                                    <div class="layui-input-inline" style="width:300px;">
                                        <select name="type" lay-verify="required">
                                            <option value=""></option>
                                            {% for pt in ptxx_list %}
                                            <option value="{{pt.id}}">{{pt.name}}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                
                                <div style="text-align: center;">
                                    <div class="layui-input-block" style="margin-left:0;">
                                        <button type="button" class="layui-btn layui-btn-primary exit">关闭</button>
                                        <button class="layui-btn" lay-submit lay-filter="formStep">下一步</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div>
                            <form class="layui-form" style="margin: 0 auto;padding-top: 20px;">
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">app_id:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="app_id" placeholder="" class="layui-input" lay-verify="required" value="maomingywtg_4409" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">app_secret</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="app_secret" placeholder="" class="layui-input" lay-verify="required" value="3pfe0wne6yp7iYyghgzIrPiL7RT25k" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">passid:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="passid" placeholder="" class="layui-input" lay-verify="required" value="C90-44001100" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">passtoken:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="passtoken" placeholder="" class="layui-input" lay-verify="required" value="f94a69b96ff74f1e8bd0b4dac0d4f28e" />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label required">service_id:</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="service_id" placeholder="" class="layui-input" lay-verify="required" value="" autocomplete="off" />
                                    </div>
                                </div>
                                <div style="text-align: center;">
                                    <div class="layui-input-block" style="margin-left:0;">
                                        <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                        <button class="layui-btn" lay-submit lay-filter="formStep2">下一步</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div>
                            <form class="layui-form" style="margin: 0 auto;padding-top: 20px;">
                                <div style="margin-bottom: 20px;">
                                    <div class="x-ce-xace-container" id="jscript-editor" style="height: 300px;width:100%;"></div>
                                </div>
                                <div style="text-align: center;">
                                    <div class="layui-input-block" style="margin-left:0;">
                                        <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                        <button class="layui-btn" lay-submit lay-filter="formStep3">确认保存</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% include '/common/layui_js.html' %}
<script>
    var post_url = "{{post_url}}";
    var editor;
    layui.use(['form', 'step', 'xAce'], function () {
        var $ = layui.jquery,
            form = layui.form,
            xAce = layui.xAce,
            step = layui.step,
			layer = layui.layer;

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%',
            stepWidth: '500px',
            height: '400px',
            stepItems: [{
                title: '基本信息'
            }, {
                title: '平台参数'
            }, {
                title: '数据处理'
            }]
        });

        form.on('submit(formStep)', function (data) {
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (data) {
            $.get("/static/js/blank.js?rnd="+new Date(), function(data, status) {
                xAce.render({
                    id: "jscript-editor",
                    theme: 'eclipse',
                    lang: "javascript",
                    initValue: data,
                    readOnly: false
                }).then(res => {
                    editor = res;
                    step.next('#stepForm');
                    return false;
                });
            }, "text");
            return false;
        });

        form.on('submit(formStep3)', function (data) {
            var param = {
                name: $("input[name='name']").val(),
                type: $("select[name='type']").val()
            };
            if (param['type'] == 'ztn_data') {
                param['app_id'] = $("input[name='app_id']").val();
                param['app_secret'] = $("input[name='app_secret']").val();
                param['passid'] = $("input[name='passid']").val();
                param['passtoken'] = $("input[name='passtoken']").val();
                param['service_id'] = $("input[name='service_id']").val();                
            }
            param['params'] = editor.getValue();
            console.log(param);
            
            $.post(post_url, JSON.stringify(param), function(r) {
                if(r.ret == 0) {
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }
                else {
                    layer.alert(r.msg, { icon: 2 });
                }
                return false;
            });
            return false;
        });

        $('.exit').click(function () {
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        });

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

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

</body>
</html>