<div id="fbrowser" class="page out" data-title="浏览按钮">
	<div class="page-content" id="fbrowser_content">
		<div id="fbrowser-header"></div>
		<div id="fbrowser-form"></div>
		<div id="fbrowser-browser"></div>
		<div id="fbrowser-browser2"></div>
		<div id="fbrowser-browser3"></div>
		<div id="fbrowser-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FBrowser", "FButton"], function(NavHeader, Form, FBrowser, FButton) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if (!hasClsPicker) {
		new NavHeader({
			el: "fbrowser-header",
			option: {
				title:"表单-浏览按钮", 
				smallTitle:"fbrowser"
			}
		}).render();
	
		new Form({
			el: "fbrowser-form",
			option: {
				submit : {
					action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//提交地址
					validate : function(){
						//表单提交前验证脚本
					}
				}
			}
		}).render();
	}
	
	new FBrowser({
		el: "fbrowser-browser",
		option: {
			form: "fbrowser-form",
			field : {
				label : "多人力资源",		//显示名
				name : "rlzy",		//字段名
				value : "3",		//字段值，数据库保存值，人员id，如1,2,4
			},
			browser : {
				/*
				 * 字段详细类型(1：人力资源 2：日期 3：会议室联系单 4：部门 5：仓库 6：成本中心 7：客户 8：项目 9：文档 10：入库方式 
				 * 11：出库方式 12：币种 13：资产种类 14：科目－全部 15：科目－明细 16：请求 17：多人力资源 18：多客户 19：时间 20：计划类型 
				 * 21：计划种类 22：报销费用类型 23：资产 24：职务 25：资产组 26：车辆 27：应聘人 28：会议 29：奖惩种类 30：学历 
				 * 31：用工性质 32：培训安排 33：加班类型 34：请假类型 35：业务合同 36：合同性质 37：多文档 38：相关产品 
				 * 161:自定义单选 162:自定义多选 256:自定义树形单选 257:自定义树形多选)
				 * */
				typeid : "17"//浏览框类型id
			},
			placeholder : "请选择",
			required : true
		}
	}).render().then(function() {
		if (!hasClsPicker) return;

		_u.vetically("#fbrowser-browser");

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

		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 FBrowser({
			el: "fbrowser-browser2",
			option: {
				form: "fbrowser-form",
				field : {
					label : "树形",		//显示名
					name : "sx",		//字段名
					value : "",		//字段值，数据库保存值
				},
				browser : {
					typeid : "256"//浏览框类型id
				},
				placeholder : "请选择"
			}
		}).render();
		
		new FBrowser({
			el: "fbrowser-browser3",
			option: {
				form: "fbrowser-form",
				field : {
					label : "自定义多选",		//显示名
					name : "zdydx",		//字段名
					value : "",		//字段值，数据库保存值
				},
				browser : {
					typeid : "162",//浏览框类型id
					identifie : "browser.brow_allfieldbase"//自定义浏览框标识，同建模引擎浏览框标识
				},
				placeholder : "请选择"
			}
		}).render();
	
		new FButton({
			el: "fbrowser-fbutton",
			container: "#fbrowser",
			option: {
				form : "fbrowser-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(billid) {
							console.log(billid);
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}
});
</script>