<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>品牌管理</title>
		<script src="../../../../js/vue/vue.js"></script>
		<script src="../../../../js/vue/element-ui/lib/index.js"></script>
		<script src="../../../../js/myelement.js"></script>
		<script src="../../../../js/vue/page.js"></script>
		<script src="../../setting.js"></script>
		
		<link href="../../../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
		<link href="../../../../css/myelement.css" rel="stylesheet">
		<link href="../../../../css/iconfont.css" rel="stylesheet">
		<link href="../../../../css/page.css" rel="stylesheet">
		<link href="//at.alicdn.com/t/font_2374495_13ltsxm2eor.css" rel="stylesheet">
	</head>
	
	<body>
		<div id="vbody">
			<div id="page_root">
				<div class="topbar">
					<span>{{title}}</span>
					<div style="float: right; margin-right: 24px;">
						<el-button-group>
							<el-button v-if="buttons.download" :disabled="buttons.download.disabled" icon="el-icon-download" @click="onDownload">导出</el-button>
							<el-button v-if="buttons.upload" :disabled="buttons.upload.disabled" icon="el-icon-upload2" @click="onUpload">导入</el-button>
						</el-button-group>
						
						<el-button-group style="margin-left: 3px;">
							<el-button icon="el-icon-refresh" @click="refreshData">刷新</el-button>
							<el-button v-if="buttons.append" :disabled="buttons.append.disabled" icon="el-icon-plus"  @click="addData">添加</el-button>
							<el-button v-if="buttons.edit" :disabled="buttons.edit.disabled" @click="setEditTableData">{{isEditTableData ? '取消编辑' : '在线编辑'}}</el-button>
						</el-button-group>
					</div>
				</div>
				
				<div class="topbar-line">
					<div class="query-icon">
						<i class="iconfont icon-query"></i>
					</div>
					<div class="query-bar">
						<h-form-filter ref="form1"
							:form-attr="filterAttr" 
							:table-fields="filterFields" 
							:form-data="filterObj" 
							
							v-on:show-popup="showFilterPopup"
							v-on:on-query="onQuery"
							v-on:on-init-query="onInitFilter"
							v-on:on-edit-query="onEditFilter"
							>
						</h-form-filter>
					</div>
				</div>
				
				<div class="versionNo">
					<h-table
						v-if="isRefresh"
						ref="table1"
						:table-fields="tableFields" 
						:table-data="tableData" 
						:is-edit-table-data="isEditTableData"
						:pagesize="pagesize"
						:pagenum="pagenum"
						:total="total"
						:table-height="tableHeight"
						
						v-on:get-data="getData"
						v-on:edit-data="editData"
						v-on:del-data="delData"
					>
					</h-table>
				</div>
			</div>
			
			<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 100vh;">
				<div class="spinner">
				  <div class="cube1"></div>
				  <div class="cube2"></div>
				</div>
			</div>
		</div>	
		
		<script type="text/javascript">
			var setting = getSetting("brand_list");
			var initlized = false;
			
			new ListVue({
				el: "#vbody",
				data: {
					dataname: "brand",
					tabaleFieldsName: "brand_",
					filterFieldsName: "brand_",
					
					title: "品牌管理",
					initlized: false,	
					page: setting.page,
					buttons: setting.buttons,
				},
				created() {

				},
				
				mounted() {
					this.initData();
					this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
						hideLoading();
					});
				},
				
				methods:{
					initData() {
						//1. run only
						if (initlized) { return; }
						initlized = true;
											  
						//2. query data
						this.onQuery();
					},
					
					onServerInitData(data) {
						var me = this.data;
						me.tableFields = data.tableFields;
						me.filterFields = data.filterFields;
						
						if(me.filterFields.length > 0) {
							for(var i=0; i < me.filterFields.length; i++) {
								let fieldObj_ = me.filterFields[i];
								
								me.filterFieldsObj[fieldObj_.field] = fieldObj_;
							}
						}	
						if(me.tableFields.length > 0) {
							for(var i=0; i < me.tableFields.length; i++) {
								let fieldObj_ = me.tableFields[i];
								
								me.tableFieldsObj[fieldObj_.field] = fieldObj_;
							}
						}
					},
					
					onAddData(config) {
						var me = this;
						
						config.combine({
							url: "../md/product/brand/brand_edit.html",
							sceneCode: "add",
							data: {},
							delta: {},
							callback: function(obj) {
								me.saveRowTable_popup(obj);
							}
						});
						
						return true;
					},
					
					onEditData(config, scope) {
						var me = this;
						var row = scope.row;
						
						//1. empty row
						if (!row || !row.id) {
							Root.message({
								type: 'warning',
								message: '请选择要编辑的数据'
							});  
							return false;
						}
						
						//2. popup					
						config.combine({
							url: "../md/product/brand/brand_edit.html",
							sceneCode: "edit",
							data: row,
							delta: {},
							callback: function(obj) {
								me.saveRowTable_popup(obj);
							}
						});
						
						return true;
					},
				}
			});
		</script>
	</body>
</html>