#@mgr("第三方平台管理")

#define content()
<section class="content container-fluid">
	
	<div class="row">
		<div class="col-xs-12 col-md-3">
			<div class="list-container"></div>
		</div>
		<div class="col-xs-12 col-md-9">
			<blockquote class="summary"></blockquote>
			<div class="form-container"></div>
			<blockquote>
			<h4>接入方式说明：</h4>
			<li><b>云端代理：</b>某些第三方平台要求在接入时配置安全域名，且对该域名有非常严格的审核要求。为了便于快速集成，上游在云端部署了符合安全域名的接入环境，可将其作为代理直接引用。该模式仅适用于部分第三方平台，优点是不需要注册第三方平台账号，也不需要进行安全域名等配置；缺点是接口配额固定，如果请求量特别大，可能会出现配额超限的情况。</li>
			<li><b>本地共享：</b>如果没有自己的第三方平台账号，可直接使用我们提供的共享账号来引用第三方平台的相关功能。该模式仅适用于部分平台，且如果平台方要求安全域名配置，需要自行完成。</li>
			<li><b>自有账号：</b>该模式的使用效果最好，无需和其他用户共享接口配额，前提是已在第三方平台注册并拥有API接口调用权限，且如果平台方要求安全域名配置，需要自行完成。</li>
			</blockquote>
		</div>
	</div>
	
</section>
#end

#define after()
<script>
require(['kit', 'ez-list', 'ez-form', 'ez-mask'], function(Kit, List, Form, Mask){

	var code = '#(code)';
	var tps = #(tps);
	
	var list = List('.list-container', {
		title: '第三方平台列表',
		active: function(ind, row){
			return row.code === code;
		},
		event: {
			selected: function(ind, row){
				code = row.code;
				load();
			}
		}
	}).load(tps);
	
	var load = function(){
		$.get(ATTR.ctrl + '/getItem?code=' + code, function(res){
			renderForm(res.data);
		});
	}
	
	var renderForm = function(data){
		var cfgCols = JSON.parse(data.cols);
		if(Kit.isEmpty(cfgCols)){ Mask().alert('该平台还未添加配置，无法引用。'); return; }
		
		$('.summary').html(data.summary);
		
		var cfgFields = [];
		$.each(cfgCols, function(i, col){
			cfgFields.push(col.field);
			col.autocomplete = false;
			if(col.type == 'password'){
				col.safeMode = true;
				if(null == data.data){
					col.required = true;
				}else{
					col.required = false;
					col.placeholder = '此处为敏感数据已隐藏。如果无需修改请留空';
				}
			}
		});
		
		var modeOpts = [];
		if(data.proxyAble) modeOpts.push({key:'proxy',value:'云端代理'});
		if(data.shareAble) modeOpts.push({key:'share',value:'本地共享'});
		modeOpts.push({key:'own',value:'自有账号'});
		
		var cols = [
			{
				field: 'code',
				title: '平台代码',
				defaultValue: data.code,
				enable: false
			}, {
				field: 'caption',
				title: '平台名称',
				defaultValue: data.caption,
				enable: false
			}, {
				field: 'enable',
				title: '接口状态',
				type: 'radio',
				options: [{key:true,value:'开启'},{key:false,value:'关闭'}],
				defaultValue: data.enable
			}, {
				field: 'mode',
				title: '接入方式',
				type: 'radio',
				options: modeOpts,
				defaultValue: data.mode,
				events: {
					ifChanged: function(evt){
						var form = evt.data.form;
						var chks = form.container.find('.group-mode input[value="own"]').is(':checked');
						if(chks) form.box.find('.group-line2').removeClass('hidden');
						else form.box.find('.group-line2').addClass('hidden');
						$.each(cfgFields, function(i, f){
							if(chks) form.box.find('.group-' + f).removeClass('hidden');
							else form.box.find('.group-' + f).addClass('hidden');
						});
					}
				}
			}, {
				field: 'line1',
				type: 'hline'
			}
		];
		cols = cols.concat(cfgCols);
		cols.push({ field: 'line2', type: 'hline' });
		
		var form = Form('.form-container', {
			title: '配置选项',
			action: ATTR.ctrl + '/event',
			ajax: true,
			cols: { xs: [12, 12], sm: [5, 7], md: [4, 8], lg: [3, 9], used: true },
			columns: cols,
			btns: { back: { used: false } },
			callback: function(ret, res){
				if(res.state){
					Mask().alert('保存成功！');
				}else{
					Mask().alert(res.msg);
				}
			}
		}).load(data.data);
	}
	
	load();
	
});
</script>
#end