
<template>
	<div class="container-fluid">
	<!-- header -->
		<div class="row">
			<div class="col-md-12">
				<h2>数据对比</h2>
			</div>
		</div>
	
		<div class="row">
			<div v-for="fieldItem in fieldItems">
				<div class="form-horizontal">
					<TabFormFieldEdit :field="fieldItem" :modelData="modelData" v-on:valueChanged = "valueChanged($event, modelData, fieldItem)" :className="mTab.tabDataSource.className"></TabFormFieldEdit>
				    <input autocomplete="off" type="password" class="form-control" v-if="fieldItem.displayType == 'PasswordTextBoxEditor'"  v-model="modelData.data[fieldItem.fieldName].displayValue[0]">
				</div>
			</div>
		</div>
		<div class="row" v-if="fieldGroups != null && fieldGroups.length > 0" id="div-fieldGroup">
			<div class="col-md-12">
				<div class="panel panel-primary" v-for="fieldGroup in fieldGroups" >
					<div class="panel-heading" @click="changeFieldGroupStatus(fieldGroup)">
					    <h3 class="panel-title">{{fieldGroup.name}}</h3>
				    </div>
					<div v-if="fieldGroup.isShow" class="panel-body">
				   		<div class="form-horizontal" v-for="fieldItem in fieldInGroup" v-if="fieldGroup.id == fieldItem.fieldGroupId">
				   			<TabFormFieldEdit :field="fieldItem" :modelData="modelData" v-on:valueChanged = "valueChanged($event, modelData, fieldItem)" :className="mTab.tabDataSource.className"></TabFormFieldEdit>

								<input autocomplete="off" type="password" class="form-control" v-if="item.displayType == 'PasswordTextBoxEditor'"  v-model="modelData.data[item.fieldName].displayValue[0]">

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	
	import Common from "../../common/Common.js";
	import SubTabGridEdit from "../../SubTabGridEdit.vue";
	import TabFormFieldEdit from "../../TabFormFieldEdit.vue";
	import TabButton from "./TabButton.vue";

	

	export default {
		props:["mTab" , "modelDatas"],

		data : function () {
			return {
	    		"fieldItems" : [],
	    		"modelData" : {},
	    		"fieldGroups" : [],
	    		"fieldInGroup" : [],
	    		"type" : ""
			}
		},

		components : {
			Common, SubTabGridEdit, TabFormFieldEdit, TabButton
		},

		methods : {
			getParams : function(){
				var modelData  = localStorage.getItem("modelData");
				_self.modelData = JSON.parse(modelData)[0];
			},

			
			calculateFieldGroupsVisible : function(fieldGroups){
				for(var index; index < fieldGroups.length; index ++){
					var state = localStorage.getItem("fieldGroupStatus" + fieldGroups[i].id);
					if(state == undefined){
						fieldGroups[i].isShow = true;
					}else{
						fieldGroups[i].isShow = state;
					}
				}
			},

			// 获取页签
			getEditTabsByWindowDto : function (data){
				
				
				var fields = _self.mTab.fields;
				console.log(fields);
				var canShowGridFields = new Array();
				fields.forEach(function(fieldDto){
					if(fieldDto.isGridDisplay == true && (fieldDto.fieldGroup == undefined ||fieldDto.fieldGroup == null)){
						canShowGridFields.push(fieldDto);
					}
				 	if(fieldDto.fieldGroup != undefined && fieldDto.isDetailDisplay){
						_self.fieldInGroup.push(fieldDto);
					}
				})
				
				// 绑定列表字段信息
				_self.fieldItems = canShowGridFields;

				_self.calculateFieldGroupsVisible(_self.mTab.fieldGroups);
				_self.fieldGroups = _self.mTab.fieldGroups;
				// _self.fieldItems = fields;
			},


			// 改变字段分组的显示和隐藏
			changeFieldGroupStatus : function(fieldGroup){
				fieldGroup.isShow = !fieldGroup.isShow;
				var index = this.fieldGroups.indexOf(fieldGroup);
				if(index != -1){
					this.fieldGroups[index]=fieldGroup;
					localStorage.setItem("fieldGroupStatus" + fieldGroup.id, fieldGroup.isShow);
				}
			},

			// 值改变事件
			valueChanged: function(newFieldValue, modelData, fieldItem){
				console.log(newFieldValue);
				modelData.data[fieldItem.fieldName] = newFieldValue;
			},
		},
		mounted : function(){
			var windowId = this.$route.params.id;
			var type = this.$route.params.type;
			this.type = type;
		},
	}

</script>