<!doctype html>
<html>
	<head>
		<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
		<title>产品SKU选择弹窗</title>
		
		<script type="text/javascript">
			var pageVue = null;
			function loadJsCss(callback) {
				var jscss_urls = [];
				window.top.initJsCss(document, jscss_urls, callback);
			};
			
			function initVue() {
				new ListVue({
					el: "#vbody",
					data: {
						dataname: "md_prod_sku", //"md_hospital",
						title: "产品选择弹窗",
						pageAttr: {
							heightType: "popuppage"
						},
						filterAttr: {
							columnnumber: 3,
							labelwidth: "100px",
							labelposition: "right",//"left",//"right",
							size: "medium",
							border: "0px solid #c6c6c600"
						},
						filterfieldClick: {},
						tablefieldClick: {},
						formfieldClick: {},
						
						selectedrows: [],
						orderby: "spec",
						isinputqty: false,// 是否需要添加一个数量输入字段
						isinputedit: false, // 是否可编辑行数据
						shoppingcartRewriteFields: ["input_qty", "h_notrowclick"], // 在购物车中的数据要回写到重新查询数据中的字段
					},
					created() {
						this.popupParames = clone(Root.popupParames);
						this.title = this.popupParames.title || this.popupParames.text
						if (this.popupParames.filter) {
							this.filterTxt = this.popupParames.filter
						}
						
						if (this.popupParames.dataname) {
							this.dataname = this.popupParames.dataname;
						}
						if (this.popupParames.delta && this.popupParames.delta.isinputqty) { // 是否需要添加一个数量输入字段
							this.isinputqty = this.popupParames.delta.isinputqty;
							this.isinputedit = true
						}
						
						if (this.popupParames.sceneCode) {
							if (this.popupParames.sceneCode == "add") {//新增
								this.isedit = true;
							}
							else if (this.popupParames.sceneCode == "browse") {//只读
								this.formAttr.disabled = true;
							}
							else if (this.popupParames.sceneCode == "edit") {//编辑
								this.isedit = true;
							}
							else if (this.popupParames.sceneCode == "approval") {//审批
								this.formAttr.disabled = true;
								this.isapproval = true;
							}
							else if (this.popupParames.sceneCode == "refuseedit") {//拒绝后的编辑
								this.isrefuseedit = true;
							}
						}
					},
					
					mounted() {
						//获取数据
						this.initData();
						this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
							hideLoading();
						});
					},
					
					methods:{
						//关闭弹窗
						closeDialog() {
							this.docloseDialog(true);
						},
						
						//关闭前调回调
						saveAfter() {
							var me = this;
							var selectedrows = this.$refs.table1.getShoppingcart();
							
							if(this.popupParames.callback) {
								let obj = {
									list: clone(selectedrows)
									// row: clone(this.selectedrow)
								}
								this.popupParames.callback(obj, function() {
									me.docloseDialog();
								});
							}
							else {
								me.docloseDialog();
							}
						},
						
						initData() {
							var me = this;
							this.onQuery(function(result, callback) {//查询后的回调,用于获取字段的
								if (result.meta && result.meta[me.dataname] && result.meta[me.dataname].fields) {
									var metas = clone(result.meta[me.dataname].fields);
									var filterFields_ = [];
									var tableFields_ = [];
									
									metas.map(f=>{
										f.isshow = "T";
										
										if (f.isfilter) {
											filterFields_.push(clone(f));
										}
										else {
											var filter_f = clone(f);
											filter_f.isshow = "F";
											filterFields_.push(filter_f);
										}
										
										tableFields_.push(clone(f));
										
										if (f.field == "spec" && me.isinputqty) {
											var f_input_qty = {isshow: "T", field: "input_qty", name: "输入数量", inputtype: "input", inputkeys: "number", align: "right", width: "100", isfixed: "right", istablesum: true}
											tableFields_.push(clone(f_input_qty));
										}
									})
									
									if (!me.filterFields || (me.filterFields && me.filterFields.length == 0)) {
										me.filterFields = clone(filterFields_);
										me.tableFields = clone(tableFields_);
										
										//字段数组转字段obj,目的为了筛选时获取字段属性
										me.fieldsToFieldsObj();
										
										//设置字段事件
										me.tableFieldClick();
									}
									
								}
								
								if (callback) {
									callback();
								}
							});
						},
						
						tableFieldClick() {
							var me = this;
							//筛选字段事件设置
							this.filterfieldClick = {
							};
							//表格字段事件设置
							this.tablefieldClick = {
								input_qty: {//字段事件设置
									cell: {// 单元格点击事件
										onclick: function(obj) { // 有单元格点击事件的,此单元格点击时不触发行点击事件
											
										}
									},
									input: {
										onchange: function(obj) {//输入更改事件
											if (obj.row.input_qty && obj.row.input_qty != "0") {// 如果有数量则选中该行
												obj.row.h_notrowclick = true // 设置行选中锁定
												me.$refs.table1.selectedRow(obj.row, true);
											}
											else {
												obj.row.h_notrowclick = false // 取消行选中锁定
											}
										}
									},
								},
							};
						
							//表单字段事件设置
							this.formfieldClick = {
							};
						},
						
						selectionChange(obj){
							var me = this;
							me.selectedrows = obj;
						},
						saveShoppingcart(list) {
							var me = this;
							me.selectedrows = list;
						},
						
						onRowDblClick() {
							if (this.isedit) {
								this.saveAfter();
							}
						},
						
					}
				});
			};
			
			loadJsCss(function () {
				initVue();
			});
		</script>
		<style>
			/* 在vue.js中 v-cloak 这个指令是防止页面加载时出现 vuejs 的变量名而设计的 */
			[v-cloak] {
				display: none !important;
			}
		</style>
		
	</head>
	
	<body style="margin: 0px;">
		<div v-cloak id="vbody">
			<div id="page_root">
				<div ref="popup_body" style="padding: 0 20px;">
					<div class="h_dialog__body">
						<h-table
							v-if="isRefresh && tableFields.length"
							ref="table1"
							:table-fields="tableFields" 
							:table-data="tableData" 
							:pagesize="pagesize"
							:pagenum="pagenum"
							:total="total"
							:table-height="tableHeight"
							:table-field-click="tablefieldClick"
							:is-highlight-row="isedit"
							:is-show-index="false"
							:filtersobj="filterObj"
							:is-within-edit-table-data="isinputedit"
							:shoppingcart-rewrite-fields="shoppingcartRewriteFields"
							
							v-on:get-data="getData"
							v-on:row-click="rowClick"
							
							:select-table-data="selectedrows"
							:is-selection="true"
							:isshow-shoppingcart="true"
							v-on:selection-change="selectionChange"
							v-on:save-shoppingcart="saveShoppingcart"
						>
						</h-table>
					</div>
					
					<!-- 底部工具栏 -->
					<div class="el-dialog__footer">
						<el-button size="small" type="default" @click="closeDialog">取 消</el-button>
						<el-button size="small" v-if="isedit" type="primary" @click="saveAfter">确 定</el-button>
					</div>
				</div>
			</div>
		</div>
		
		<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
			<div class="spinner">
			  <div class="cube1"></div>
			  <div class="cube2"></div>
			</div>
		</div>
		
	</body>
</html>