<div class="main" id="main" v-cloak>

    <el-form ref="form" label-width="130px" label-position="left">
        <el-form-item label="上传安装包" >
            <ui-file-upload action="@Url.ActionUrl("Upload")" v-model="Package" return-type="string" :limit="1" :max-size="102400" :file-list='[]' accept=".zip"
                            :data="{savePath:'upload/~temp',fileType:'file',deleteRepeat:true}"
                            v-validate="{data:Package,dataType:'*',nullMsg:'请上传的模板安装包'}">
  
            </ui-file-upload>
            <span class="help-block validate-tips-box">只能上传.zip格式的模板文件包,安装包名将作为模板目录</span>
        </el-form-item>
        <el-form-item label="覆盖同名目录">
            <el-radio-group v-model="OverlayFile">
                <el-radio :label="false">否</el-radio>
                <el-radio :label="true">是</el-radio>
            </el-radio-group>
            <span class="help-block validate-tips-box"></span>
        </el-form-item>

        <el-form-item label="" v-show="disabled==true && result=='success'">
            <el-alert title="模板安装成功!" type="success"  show-icon> </el-alert>
        </el-form-item>
        <el-form-item label="" v-show="disabled==true && result!='success'">
            <el-alert :title="result" type="error" show-icon> </el-alert>
        </el-form-item>
    </el-form>

    <div class="alert alert-warning alert-dismissible" role="alert">
        <strong>说明：</strong>
        <p>1、安装包建议用英文命名，不要带特殊覆盖或中文避免出现兼容性问题。</p>
        <p>2、模板安装成功后，/Templates目录下会创建一个和安装包同名的模板目录，并自动解压安装包。</p>
    </div>

    <div class="footer-submit-bar" style="padding-left:150px">
        <el-button type="primary" v-on:click="postSubmit" :disabled="disabled">安装</el-button>
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>
<script type="text/javascript">
    var formData = { Package: "", AppType: "template", Guid: "@Html.Guid()", OverlayFile: false, disabled: false, result:""};
    var vue = new Vue({
        el: "#main",
        data: formData ,
        methods: {
            postSubmit: function () {
                var _this = this;
                var validated = _this.validateForm();
                if (validated) {
                    _this.ajax({
                        type: "post", url: "@Url.ActionUrl()", data: formData, success: function (data) {
                            _this.disabled = true;
                            var state = data.State;
                            var msg = data.Msg;
                            if (state == 1) {
                                _this.result = "success"
                            }
                            else {
                                _this.result = msg;
                            }
                        }
                    });
                }
            }
        }
    });
</script>