{% extends "../main.html" %}
{% block title %}批量建站{% end %}
{% block content %}
<div>
                    <div class="page-hero page-container " id="page-hero">
                        <div class="padding d-flex">
                            <div class="page-title">
                                <h2 class="text-md text-highlight">批量建站</h2>
                                <p id="wsurl" style="display: none">{{ ws_url }}</p>
                                <small class="text-muted">批量建立多个网站</small>
                            </div>
                            <div class="flex"></div>
                            <div>
                                <a href="/single" class="btn btn-md text-muted">
                                    <span class="d-none d-sm-inline mx-1">独立建站</span>
                                    <i data-feather="arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="page-content page-container" id="page-content">
                        <div class="padding">
                            <div class="card">
                                <div class="card-header text-center">
                                    <strong>建站向导</strong>
                                </div>
                                <div class="card-body m-auto">

                                    <div style="display:none;" id="result" class="padding">
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <h6>成功域名</h6>
                                                <div id="success-domain" class="list list-row block" style="min-width:400px;">
                                                    <div class="success-item list-item " data-id="1">
                                                        <div class="text-success">
                                                            <i data-feather="check-circle" width="15" height="15"></i>
                                                        </div>
                                                        <div class="flex">
                                                            <code class="domain item-except text-color"></code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <h6>失败域名</h6>
                                                <div id="err-domain" class="list list-row block" style="min-width:400px;">
                                                    <div class="error-item list-item ">
                                                        <div class="text-danger">
                                                            <i data-feather="x-circle" width="15" height="15"></i>
                                                        </div>
                                                        <div class="flex">
                                                            <code class="domain item-author text-color "></code>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <form id="form" data-plugin="parsley" data-option="{}">
                                        {% module xsrf_form_html() %}
                                        <div id="rootwizard" data-plugin="bootstrapWizard" data-option="{
            tabClass: '',
            nextSelector: '.button-next',
            previousSelector: '.button-previous',
            firstSelector: '.button-first',
            lastSelector: '.button-last',
            onTabClick: function(tab, navigation, index) {
              return false;
            },
            onNext: function(tab, navigation, index) {
              var instance = $('#form').parsley();
              instance.validate();
              if(!instance.isValid()) {
                return false;
              }
            }
          }">
                                            <ul class="nav mb-3 justify-content-center">
                                                <li class="nav-item">
                                                    <a class="nav-link text-center" href="#tab1" data-toggle="tab">
                                                        <span class="w-32 d-inline-flex align-items-center justify-content-center circle bg-light active-bg-success">1</span>
                                                        <div class="mt-2">
                                                            <div class="text-muted">绑定域名</div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link text-center" href="#tab2" data-toggle="tab">
                                                        <span class="w-32 d-inline-flex align-items-center justify-content-center circle bg-light active-bg-success">2</span>
                                                        <div class="mt-2">
                                                            <div class="text-muted">配置网站</div>
                                                        </div>
                                                    </a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link text-center" href="#tab3" data-toggle="tab">
                                                        <span class="w-32 d-inline-flex align-items-center justify-content-center circle bg-light active-bg-success">3</span>
                                                        <div class="mt-2">
                                                            <div class="text-muted">生成网站</div>
                                                        </div>
                                                    </a>
                                                </li>
                                            </ul>
                                            <div class="tab-content p-3">
                                                <div class="tab-pane active" id="tab1">
                                                    <div class="form-group">
                                                        <div class="alert alert-warning" role="alert">
                                                            <i data-feather="info"></i>
                                                            <span class="mx-2">只允许建立子域名，主域名请做cname指向</span>
                                                        </div>
                                                        <label>请导入域名</label>
                                                        <textarea id="domain" class="form-control" rows="6" data-minwords="6" data-parsley-required-message="不能为空" required placeholder="一行一个，每次最多可以导入500个"></textarea>
                                                    </div>
                                                </div>
                                                <div class="tab-pane" id="tab2">
                                                    <form>
                                                        <div class="alert alert-warning" role="alert">
                                                            <i data-feather="info"></i>
                                                            <span class="mx-2">网站名字、描述、关键词默认会随机生成</span>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>网站模型
                                                                <a data-toggle="tooltip" data-placement="right" title="网站模型决定了你的网站类别">
                                                                    <i style="margin-bottom:4px;margin-left:3px;" data-feather="help-circle"></i>
                                                                </a>
                                                            </label>

                                                            <select id="sitemodel" name="sitemodel" style="width:100%;" class="form-control" data-plugin="select2" data-option="{}" data-minimum-results-for-search="Infinity" data-placeholder="请选择网站模型">
                                                                <option value="0">默认随机</option>
                                                                {% for m in model %}
                                                                <option value="{{m['model_id']}}">{{m['model_name']}}</option>
                                                                {%end%}
                                                            </select>
                                                        </div>

                                                        <div class="form-group">
                                                            <label>网站类别
                                                                <a data-toggle="tooltip" data-placement="right" title="网站类别决定了你的网站分类">
                                                                    <i style="margin-bottom:4px;margin-left:3px;" data-feather="help-circle"></i>
                                                                </a>
                                                            </label>
                                                            <select id="sitetype" name="sitetype" style="width:100%;" class="form-control" data-plugin="select2" data-option="{}" data-minimum-results-for-search="Infinity" data-placeholder="默认随机" disabled>
                                                                <option value="0">默认随机</option>
                                                            </select>
                                                        </div>

                                                        <div class="form-group">
                                                            <label>网站栏目
                                                                <a data-toggle="tooltip" data-placement="right" title="网站栏目最好不要超过10个">
                                                                    <i style="margin-bottom:4px;margin-left:3px;" data-feather="help-circle"></i>
                                                                </a>
                                                            </label>

                                                            <select id="sitecat" name="sitecat" style="width:100%;" class="form-control" data-plugin="select2" data-option="{}" data-minimum-results-for-search="Infinity" data-placeholder="默认随机" data-allow-clear="true" multiple disabled>
                                                                <option value="0">默认随机</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group">
                                                            <label>初始化文章数量
                                                                <a data-toggle="tooltip" data-placement="right" title="初始化文章数量越多，需要的时间越长">
                                                                    <i style="margin-bottom:4px;margin-left:3px;" data-feather="help-circle"></i>
                                                                </a>
                                                            </label>

                                                            <select id="article_num" name="article_num" style="width:100%;" class="form-control" data-plugin="select2" data-option="{}" data-minimum-results-for-search="Infinity" data-placeholder="请选择初始化文章数量">
                                                                <option value="0">默认不获取文章</option>
                                                                <option value="1">每个栏目获取1篇</option>
                                                                <option value="3">每个栏目获取3篇</option>
                                                                <option value="5">每个栏目获取5篇</option>
                                                            </select>
                                                        </div>

                                                        <button type="submit" class="btn btn-primary hide">Submit</button>
                                                    </form>
                                                </div>
                                                <div class="tab-pane" id="tab3">
                                                    <div class="form-group text-center">
                                                        <a id="build" class="btn btn-raised mb-2 w-md green text-white">点击生成</a>
                                                    </div>
                                                </div>
                                                <div class="row py-3">
                                                    <div class="col-6">
                                                        <a href="#" class="btn btn-white button-previous">
                                                            <i data-feather="arrow-left"></i>上一步
                                                        </a>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="d-flex justify-content-end">
                                                            <a href="#" class="btn btn-white button-next">
                                                                下一步<i data-feather="arrow-right"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        <!-- .xpost modal -->
        <div id="xpost-modal" class="modal bg-dark fade" data-backdrop="false">
            <div class="modal-dialog">
                <div class="modal-content ">
                    <div class="modal-header ">
                        <div class="modal-title text-md">创建中</div>
                    </div>
                    <div class="modal-body">
                        <div class="p-4 text-center">
                            <div class="loading m-4 m-auto"></div>
                            <p id="status-msg" style="margin-top:1rem;"><code class="text-dark"></code></p>
                        </div>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
        <!-- / .xpost modal -->        
{% end %}
{% block js %}
<script>
            websocket_url = $('#wsurl').text();
            var ws = new WebSocket(websocket_url);
            ws.onmessage = function (evt) {
                $('#xpost-modal').modal('show');
                var result = JSON.parse(evt.data);
                $("#status-msg>code").text(result['message']);
                if (result['state']==1){
                    setTimeout(function(){
                        $('#xpost-modal').modal('hide');
                        $("#form").hide();
                        console.log(result['success_domain']);
                        $.each(result['success_domain'], function(i, v){
                            var domain = v['domain'].replace(/_/g,".");
                            var success_item = $(".success-item").get(0);
                            success_item.querySelector(".domain").textContent = domain;
                            var $success_item = $(success_item);
                            $("#success-domain").append($success_item.prop("outerHTML"));
                        });
                        $("#success-domain .success-item:eq(0)").remove();
                        $("#result").show(1000);
                    }, 1000);

                }
                if (result['state']==3){
                    setTimeout(function(){$('#xpost-modal').modal('hide')}, 1000);
                    window.location.href="batch";
                }
            };


            $(document).on("click","#build",function(){
                $.ajaxSettings.async = true;
                $('#xpost-modal').modal('show');
                $("#status-msg>code").text('即将开始...');
                var dataArray = {
                    domain:$("#domain").val(),
                    sitemodel:$("#sitemodel").val(),
                    sitetype:$("#sitetype").val(),
                    _xsrf:$("[name='_xsrf']").val(),
                    sitecat:"",
                    sitestype:$("#sitetype").attr('parent_id'),
                    sitetypename:$("#sitetype option:selected").text(),
                    article_num: $("#article_num").val()
                };
                var sitecat = $("#sitecat").serializeArray();
                for (i = 0; i < sitecat.length; i++) {
                    dataArray['sitecat'] += sitecat[i]['value'];
                    if (i+1 != sitecat.length){
                        dataArray['sitecat'] += ",";
                    }
                }
                
                dataArray['pattern'] = 'batch';
                $.post('/build', JSON.stringify(dataArray));

            });

            var model_id = '';
            $.ajaxSettings.async = false;
            $(document).on("change","#sitemodel",function(e){
                model_id = $('#sitemodel').val();
                $('#sitetype').empty();
                $('#sitecat').empty();
                $('#sitetype').append('<option value="0">默认随机</option>');
                $('#sitecat').append('<option value="0">默认随机</option>');

                if (model_id==0){
                    $('#sitetype').attr("disabled",true);
                    $('#sitecat').attr("disabled",true);
                }else{
                    $('#sitetype').attr("disabled",false);
                    $('#sitecat').attr("disabled",true);
                }
                var url = '/categorys?level=1&model_id=' + model_id;
                $.get(url, function(data, status){
                var largedata = data['data'];
                $.each(largedata, function (i, value) {
                    $("#sitetype").append('<optgroup value="'+largedata[i]['type_id']+'"'+ 'label="'+ largedata[i]['type_name'] + '"' + '>');
                    $.get('/categorys?parent_id='+largedata[i]['type_id'], function (data, status){
                        var small_data = data['data'];
                        $.each(small_data, function (j, value) {
                            $("#sitetype").append('<option value="'+small_data[j]['type_id']+'"'+'parent_id="'+small_data[j]['parent_id']+'"'+'">'+small_data[j]['type_name']+'</option>');
                        })
                    });
                    $("#sitetype").append('</optgroup>');
                });

            })
            });

    $(document).on('change', '#sitetype', function () {
        $('#sitecat').empty();
        if ($('#sitetype').val()==0){
            $('#sitecat').append('<option value="0">默认随机</option>');
            $('#sitecat').attr("disabled",true);

        }else {
            $('#sitecat').attr("disabled",false);
            var sitetype = $('#sitetype').val();
            $.get('/categorys?parent_id='+sitetype, function (data, status) {
            var small_data = data['data'];
            $.each(small_data, function (i, value) {
                $('#sitecat').append('<option value="'+value['type_id']+'">'+value['type_name']+'</option>');
            })
        })
        }
    })
        </script>
{% end %}

{% block css %}
<link rel="stylesheet" href="{{ static_url('css/buildsite.css') }}">
{% end %}