{% 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="/batch" 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">
                    <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>
                                        <input id="domain" name="domain" type="text" class="form-control"
                                               placeholder="请输入你的域名，不带http://或https://">
                                    </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" value=0 name="sitemodel" style="width:100%;"
                                                    class="form-control" data-plugin="select2" data-option="{}"
                                                    data-minimum-results-for-search="Infinity"
                                                    data-placeholder="请选择网站模型">
                                                <option></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="请选择网站类别">
                                                <option></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>
                                                <option></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>

                                        <div class="form-group">
                                            <label>网站名字</label>
                                            <input id="sitename" name="sitename" type="text" class="form-control"
                                                   placeholder="请输入网站名字">
                                        </div>

                                        <div class="form-group">
                                            <label>网站描述</label>
                                            <input id="sitedesc" name="sitedesc" type="text" class="form-control"
                                                   placeholder="请输入网站描述">
                                        </div>

                                        <div class="form-group">
                                            <label>网站关键词</label>
                                            <input id="sitekeys" name="sitekeys" type="text" class="form-control"
                                                   placeholder="请输入网站关键词">
                                        </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="modal" class="modal fade" data-backdrop="static">
            <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();
            ws = new WebSocket(websocket_url);
            ws.onmessage = function (evt) {
                var result = JSON.parse(evt.data);
                $("#status-msg>code").text(result['message']);
                if(result['state']==3){
                    setTimeout(function () {
                        window.location.href="single";
                    }, 1000)
                }
                if (result['state']==1){
                    window.location.href="sitelist";
                }};

            $(document).on("click","#build",function(){
                $.ajaxSettings.async = true;
                $('#modal').modal();
                $("#status-msg>code").text('即将开始...');
                var dataArray = {
                    domain:$("#domain").val(),
                    sitemodel:$("#sitemodel").val(),
                    sitetype:$("#sitetype").val(),
                    sitename:$("#sitename").val(),
                    sitedesc:$("#sitedesc").val(),
                    sitekeys:$("#sitekeys").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'] = 'single';
                dataArray = JSON.stringify(dataArray);


                $.ajax({
                   url:"build",
                   type:"post",
                   dataType:"text",
                   data:dataArray,
                   timeout:30000,
                   success:function(data){
                     if (data == 3){
                        $('#modal-backdrop-dark').modal();
                     }else{
                        //$('#modal').modal();
                        //ws.send(data);
                     }
                   },
                   error:function(){
                    console.log(data);
                  }
                });
            });


            var model_id = '';
            $.ajaxSettings.async = false;
            $(document).on("change","#sitemodel",function(e){
                model_id = $('#sitemodel').val();
                $('#sitetype').empty();
                $('#sitetype').append('<option>请选择一个分类</option>');
                $('#sitecat').empty();

                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').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 %}