<div id="detailtable" class="page out" data-title="明细表插件">
	<div class="page-content" id="detailtable_content">
		<div id="detailtable-header"></div>
		<div id="detailtable-form"></div>
		<div id="detailtable-finputtext-date"></div>
		<div id="detailtable-dt1"></div>
		<div id="detailtable-fbutton"></div>
	</div>
</div>
<script>
require(["NavHeader", "Form", "FInputText", "DetailTable", "FButton", "ColumnBreak", "mUtil"], function(NavHeader, Form, FInputText, DetailTable, FButton, ColumnBreak, mUtil) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "detailtable-header",
			option: {
				title:"明细表插件", 
				smallTitle:"detailtable"
			}
		}).render();
		new FButton({
			el: "detailtable-fbutton",
			container: "#detailtable",
			option: {
				form : "detailtable-form",
				btns : [
					{
						text : "重置",
						action : "reset"
					},
					{
						text : "提交",
						action : "submit",
						callback : function(args) {
							
						},
						remindMsg : "操作成功"
					}
				],
				fixed : true
			}
		}).render();
	}
	new Form({
		el: "detailtable-form",
		option: {
			table : {//表单信息，自定义提交时可缺省
				datasource : "",//表单数据源
				name : "",		//表单名
				key : ""		//表单主键
			},
			submit : {
				action : "/mobilemode/mobile/demo/plugin/Form/formAction.jsp",//save 表单保存、createWf提交流程、自定义提交地址
				validate : function(){
					//表单提交前验证脚本
				}
			},
			relate : {//模块流程信息，自定义提交时可缺省
				modeid : -1,	//模块id
				wfid : -1,		//流程id
				wftitle : ""	//流程标题
			}
			
		}
	}).render();
	
	new FInputText({
		el: "detailtable-finputtext-date",
		option: {
			form : "detailtable-form",
			field : {
				label : "预约日期",//显示名
				name : "date",//字段名
				type : "date",//字段类型
			},
			yearOffest : {//年份偏移
				prev: 100,
				next: 1
			},
			placeholder : "请填写预约日期..."
		}
	}).render();

	new DetailTable({
		el: "detailtable-dt1",
		container: "#detailtable",
		option: {
			form: "detailtable-form",
			table: {
				name: "uf_demo_dt1",	//明细表名
				key: "id",				//明细表主键
				relatekey: "mainid",	//关联id
			},
			dataShare: {				//编辑权限
				add: true,
				edit: true,
				del: true
			},
			datas: [], //明细数据，数组或url地址
			props: [					//明细字段属性
			    {
			    	field : {
						label : "姓名",
						name : "name",
						type : "text"
					},
					detailtable:{
						mectype: "FInputText",
			    		width: 100
					},
					placeholder : "请输入...",
					required : true
				},
				{	
					field : {
						label : "部门",		//显示名
						name : "dept",		//字段名
						value : "",			//字段值，数据库保存值，人员id，如1,2,4
					},
					detailtable: {
						mectype: "FBrowser",
						width: 100
					},
					browser : {
						typeid : "4"		//浏览框类型id
					},
					placeholder : "请选择",
					required : false
				},
				{	
					field : {
						label : "直接上级",		//显示名
						name : "manager",		//字段名
						value : "3",			//字段值，数据库保存值，人员id，如1,2,4
					},
					detailtable: {
						mectype: "FBrowser",
						width: 100
					},
					browser : {
						typeid : "1"			//浏览框类型id
					},
					placeholder : "请选择",
					required : false
				},
				{
					field : {
						label : "联系方式",		//显示名
						name : "tel",			//字段名
						type : "tel",			//字段类型
					},
					detailtable: {
						mectype: "FInputText",
						width: 100
					},
					placeholder : "请输入联系方式..."
				},
				{
					field : {
						label : "照片",			//显示名
						name : "photo",			//字段名
						value : "",				//字段值，数据库保存值，文档id，如427,428,429
					},
					detailtable: {
						mectype: "FPhoto",
						width: 200
					},
					compress : {
						quality : 1,  			//质量：值越小，质量越低，图片压缩后体积越小，但图片也会越不清晰。该值设置介于0.1 至 1之间
						zoom : 1      			//压缩时会以图片的原始宽高会乘以缩放比例，值越小，压缩后图片的宽高越小，体积也会越小。该值设置介于0.1 至 1之间
					},
					draw : true,				//是否绘制
					source : {					//照片来源
						browser : true,			//选择照片
						takephoto : true		//拍照
					},
					limit : 3,					//最大图片张数,0表示不限制
				},
				{
					field : {
						label : "相关资料",		//显示名
						name : "file",			//字段名
						value : ""				//字段值，数据库保存值，文档id 如447,446,451
					},
					detailtable: {
						mectype: "FFile",
						width: 200
					}
				}
			]
		}
	}).render().then(function(){
		if (!hasClsPicker) return;

		clsPicker.golalSetting({
			container: "#detailtable-dt1",
			type: "Detailtable"
		});

		new clsPicker({
			selector: ".wev-red-btn",
			text: ".wev-red-btn",
			lineYSkew: 30,
			skew: [1.5,0],
			position: "top left"
		});
		new clsPicker({
			selector: ".wev-blue-btn",
			text: ".wev-blue-btn",
			lineYSkew: 0,
			skew: [1.5,0],
			position: "top left"
		});
		new clsPicker({
			selector: ".wev-detailtable-container table tr>th",
			text: ".wev-detailtable-container table tr>th",
			lineYSkew: -30,
			skew: [1.5,0],
			position: "bottom right"
		});
	});
	
	
});
</script>