@{
    Layout = "_Layout.cshtml";
}
<div  id="main">
    <div class="set-box">
        <el-form ref="form" label-width="120px">
            <div class="pr-title"><h3>基本设置</h3></div>
            <div class="set">
                <el-form ref="form" label-width="120px">
                    <el-form-item label="系统主域名" v-validate="{data:Domain,focusTarget:'#Domain',dataType:'*',nullMsg:'网站主域名必须填写！'}">
                        <el-input id="Domain" v-model="Domain" placeholder="网站绑定的主域名，格式为：http://wwww.domain.com"></el-input>
                    </el-form-item>


                    <el-form-item label="域名约束方式">
                        <el-select v-model="DomainConstraint" placeholder="请选择" style="width:100%">
                            <el-option value="equal" label="1、绑定域名和打开域名完全匹配"></el-option>
                            <el-option value="equal-exclude-port" label="2、只匹配域名部分，端口不检测（适用进行端口映射的网站"></el-option>
                            <el-option value="contain" label="3、绑定域名包含打开域名即可匹配"></el-option>
                            <el-option value="contain-exclude-port" label="4、绑定域名包含打开域名即可匹配，端口部分不检测"></el-option>
                            <el-option value="reverse-contain" label="5、打开域名包含绑定域名即可匹配"></el-option>
                            <el-option value="reverse-contain-exclude-port" label="6、打开域名包含绑定域名即可匹配，端口部分不检测"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="网站后台目录" >
                        <el-input id="AdminPath" v-model="AdminPath" placeholder="建议不要用admin，master这类比较容易猜解的目录" v-validate="{data:AdminPath,dataType:'string',nullMsg:'请填写后台目录!',errorMsg:'后台目录只能由数字和字符串组成!'}"></el-input>
                    </el-form-item>

            </div>

            <div class="pr-title"><h3>数据库设置</h3></div>
            <div class="set">
                <el-form-item label="服务器地址" v-validate="{data:dbServer,focusTarget:'#dbServer',dataType:'*',nullMsg:'请填写数据库服务器地址!'}">
                    <el-input id="dbServer" v-model="dbServer" maxlength="50" placeholder="推荐Sql Server2008或以上版本，非1433端口，必须带上端口号"></el-input>
                </el-form-item>
                <el-form-item label="数据库名称" v-validate="{data:dbName,focusTarget:'#dbName',dataType:'*',nullMsg:'请填写数据库名称!'}">
                    <el-input id="dbName" v-model="dbName"  maxlength="50" placeholder="数据库名称，请确保数据库名已经存在"></el-input>
                </el-form-item>
                <el-form-item label="数据库用户名" v-validate="{data:dbUser,focusTarget:'#dbUser',dataType:'*',nullMsg:'请填写数据库用户名!'}">
                    <el-input id="dbUser"  v-model="dbUser" maxlength="50" placeholder="数据库用户名，如果是自己服务器，不建议用sa这类高权限用户"></el-input>
                </el-form-item>

                <el-form-item label="数据库密码" v-validate="{data:dbPass,focusTarget:'#dbPass',dataType:'*',nullMsg:'请填写数据库用户密码!'}">
                    <el-input id="dbPass"  v-model="dbPass" maxlength="50" placeholder="数据库密码"></el-input>
                </el-form-item>
                <div>备注：如果不是第一次安装，默认将使用已经存在的数据，如果需要全新安装，需先手工清除第一次安装时的数据库数据</div>
            </div>
        </el-form>
</div>
    <div class="btn-box">
        <button class="el-button el-button--primary" onclick="location.href='@Url.ActionUrl("Step2")'">上一步</button>
        <button class="el-button el-button--primary" v-on:click="next">下一步</button>
    </div>
</div>


<script type="text/javascript">
    document.getElementById("progressBar").style.width = "600px";
    var sysTemInfo =@Html.Raw(ViewBag.SysTemInfo);
    var dbInfo=@Html.Raw(ViewBag.DbInfo);
    var formData = extend(sysTemInfo, dbInfo);
    function setConfigBack()
    {
         location.href = "@Url.ActionUrl("Step4")";
    }
      var vue= new Vue({
          el: "#main",
          data: formData,
            methods: {
                next: function () {
                    var validated = this.validateForm();//jquery表单验证
                    if (validated)
                    {
                        this.submit({
                            url: "@Url.ActionUrl("SetConfig")", data: formData,showSuccessMsg:false,success:setConfigBack
                            });
                            }
                },
          },
    });

</script>
