<div id="fapibrowser" class="page out" data-title="浏览按钮(接口)">
	<div class="page-content">
		<div id="fapibrowser-header"></div>
		<div id="fapibrowser-form"></div>
		<div id="fapibrowser-single"></div>
		<div id="fapibrowser-multi"></div>
		<div id="fapibrowser-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FAPIBrowser", "FButton"], function(NavHeader, Form, FAPIBrowser, FButton) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if (!hasClsPicker) {
		new NavHeader({
			el: "fapibrowser-header",
			option: {
				title:"表单-浏览按钮(接口)", 
				smallTitle:"fapibrowser"
			}
		}).render();
	
		new Form({
			el: "fapibrowser-form",
			option: {
				submit : {
					action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
					validate : function(){
						//表单提交前验证脚本
					}
				}
			}
		}).render();
	}
	
	new FAPIBrowser({
		el: "fapibrowser-single",
		option: {
			form: "fapibrowser-form",
			field : {
				label : "文档单选",		//显示名
				name : "singledoc",		//字段名
				value : "",		
			},
			apiBrowser: {
			    pageurl: "/mobilemode/mobile/demo/plugin/FAPIBrowser/singleSelect.html?ajax=true", //接口列表页面url
			    compid: "apilist4single-a", //接口列表插件id
			    relateKey: {
			        id: "id", //主键对应字段
	                name: "subject"//显示值对应字段
			    }
			},
			showSet: {
				type: 1,			//1 从数据库字段存取 2从接口获取
				dbfield: "single_docname"	//存取浏览框值的字段
			},
			placeholder : "请选择",
			required : true
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#fapibrowser-single");

		clsPicker.golalSetting({
			container: ".wev-comp-FAPIBrowser",
			type: "FAPIBrowser"
		});

		new clsPicker({
			selector: ".wev-field",
			text: ".wev-field",
			lineYSkew: 20,
			skew: [4.5, ""],
			height: 200
		});
		new clsPicker({
			selector: ".wev-field>div:nth-child(1)",
			text: ".wev-field>div:nth-child(1)",
			lineYSkew: 50,
			height: 200
		});

		new clsPicker({
			selector: ".wev-field>div:nth-child(2)",
			text: ".wev-field>div:nth-child(2)",
			lineYSkew: 20,
			height: 200,
			skew: [1.5, ""],
			position: "top left"
		});

		setTimeout(() => {
			new clsPicker({
				selector: ".wev-field a+.wev-clear-btn",
				text: ".wev-clear-btn",
				lineYSkew: 50,
				height: 200,
				position: "top left"
			});
		}, 200);

		new clsPicker({
			selector: ".wev-field>div:nth-child(2)>a>i",
			text: ".search",
			lineYSkew: 80,
			height: 200,
			position: "top left"
		});
	});

	if (!hasClsPicker) {
		new FAPIBrowser({
			el: "fapibrowser-multi",
			option: {
				form: "fapibrowser-form",
				field : {
					label : "文档多选",		//显示名
					name : "multidoc",		//字段名
					value : "",		
				},
				apiBrowser: {
				    pageurl: "/mobilemode/mobile/demo/plugin/FAPIBrowser/multiSelect.html?ajax=true", //接口列表页面url
				    compid: "apilist4multi-a", //接口列表插件id
				    relateKey: {
				        id: "id", //主键对应字段
		                name: "subject"//显示值对应字段
				    }
				},
				showSet: {
					type: 1,			//1 从数据库字段存取 2从接口获取
					dbfield: "multi_docname"	//存取浏览框值的字段
				},
				placeholder : "请选择",
				required : false
			}
		}).render();
	
		new FButton({
			el: "fapibrowser-fbutton",
			container: "#fapibrowser",
			option: {
				form : "fapibrowser-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(billid) {
							console.log(billid);
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}
});
</script>