<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-config-edit" th:object="${config}">
			<div class="form-group">
				<label class="col-sm-3 control-label">存储类型：</label>
				<div class="col-sm-8">
					<label class="radio-box"> <input type="radio" th:field="*{type}" name="type" value="1" /> 七牛 </label> 
					<label class="radio-box"> <input type="radio" th:field="*{type}" value="2" /> 阿里云 </label> 
					<label class="radio-box"> <input type="radio" th:field="*{type}" value="3" /> 腾讯云 </label>
				</div>
			</div>
			<div id="qiniuDiv">
				<div class="form-group">
					<label class="col-sm-3 control-label">域名：</label>
					<div class="col-sm-8">
						<input class="form-control" type="text" name="qiniuDomain" id="qiniuDomain" th:field="*{qiniuDomain}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">路径前缀：</label>
					<div class="col-sm-8">
						<input id="qiniuPrefix" name="qiniuPrefix" class="form-control" type="text" th:field="*{qiniuPrefix}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">AccessKey：</label>
					<div class="col-sm-8">
						<input id="qiniuAccessKey" name="qiniuAccessKey" class="form-control" type="text" th:field="*{qiniuAccessKey}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">SecretKey：</label>
					<div class="col-sm-8">
						<input id="qiniuSecretKey" name="qiniuSecretKey" class="form-control" type="text" th:field="*{qiniuSecretKey}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">空间名：</label>
					<div class="col-sm-8">
						<input id="qiniuBucketName" name="qiniuBucketName" class="form-control" type="text" th:field="*{qiniuBucketName}">
					</div>
				</div>
			</div>
			<div id="aliyunDiv">
				<div class="form-group">
					<label class="col-sm-3 control-label">域名：</label>
					<div class="col-sm-8">
						<input id="aliyunDomain" name="aliyunDomain" class="form-control" type="text" th:field="*{aliyunDomain}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">路径前缀：</label>
					<div class="col-sm-8">
						<input id="aliyunPrefix" name="aliyunPrefix" class="form-control" type="text" th:field="*{aliyunPrefix}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">EndPoint：</label>
					<div class="col-sm-8">
						<input id="aliyunEndPoint" name="aliyunEndPoint" class="form-control" type="text" th:field="*{aliyunEndPoint}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">AccessKeyId：</label>
					<div class="col-sm-8">
						<input id="aliyunAccessKeyId" name="aliyunAccessKeyId" class="form-control" type="text" th:field="*{aliyunAccessKeyId}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">AccessKeySecret：</label>
					<div class="col-sm-8">
						<input id="aliyunAccessKeySecret" name="aliyunAccessKeySecret" class="form-control" type="text" th:field="*{aliyunAccessKeySecret}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">BucketName：</label>
					<div class="col-sm-8">
						<input id="aliyunBucketName" name="aliyunBucketName" class="form-control" type="text" th:field="*{aliyunBucketName}">
					</div>
				</div>
			</div>
			<div id="qcloudDiv">
				<div class="form-group">
					<label class="col-sm-3 control-label">域名：</label>
					<div class="col-sm-8">
						<input id="qcloudDomain" name="qcloudDomain" class="form-control" type="text" th:field="*{qcloudDomain}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">路径前缀：</label>
					<div class="col-sm-8">
						<input id="qcloudPrefix" name="qcloudPrefix" class="form-control" type="text" th:field="*{qcloudPrefix}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">腾讯云AppId：</label>
					<div class="col-sm-8">
						<input id="qcloudAppId" name="qcloudAppId" class="form-control" type="text" th:field="*{qcloudAppId}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">腾讯云SecretId：</label>
					<div class="col-sm-8">
						<input id="qcloudSecretId" name="qcloudSecretId" class="form-control" type="text" th:field="*{qcloudSecretId}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">腾讯云BucketName：</label>
					<div class="col-sm-8">
						<input id="qcloudBucketName" name="qcloudBucketName" class="form-control" type="text" th:field="*{qcloudBucketName}">
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-3 control-label">Bucket所属地区：</label>
					<div class="col-sm-8">
						<input id="qcloudRegion" name="qcloudRegion" class="form-control" type="text" th:field="*{qcloudRegion}" placeholder="如：sh()可选值 ，华南：gz 华北：tj 华东：sh)"/>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div th:include="include::footer"></div>
	 <script>
        var prefix = ctx + "system/oss";

        $(function() {
            var menuType = $('input[name="type"]:checked').val();
            menuVisible(menuType);
        });

        function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/saveConfig", $('#form-config-edit').serialize());
	        }
	    }

        $(function() {
            $('input').on('ifChecked',
            function(event) {
                var menuType = $(event.target).val();
                menuVisible(menuType);
            });
        });

        function menuVisible(menuType) {
            if (menuType == "1") {
                $("#qiniuDiv").show();
                $("#aliyunDiv").hide();
                $("#qcloudDiv").hide();
            } else if (menuType == "2") {
                $("#qiniuDiv").hide();
                $("#aliyunDiv").show();
                $("#qcloudDiv").hide();
            } else if (menuType == "3") {
                $("#qiniuDiv").hide();
                $("#aliyunDiv").hide();
                $("#qcloudDiv").show();
            }
        }
    </script>
</body>
</html>
