
<template>
	<div>
		<div class="container-fluid" id="showAuditData">
			<div class="row">
				<div class="col-md-12">
					<h2>{{windowDto.name}}审计数据</h2>
				</div>
			</div>
			<div class="row">		
				<div class="col-md-12">
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary" @click="compare()">对比</button>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class = "table-div">
						<table class='fixed-table table-striped table-bordered ' :width="tableWidth" height="40px">
							<thead>
								<tr height="40px">
									<th width="50px"></th>
									<th v-for="item in calFieldName" :width="item.thWidth">{{ item.name }}</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="modelData in gridData.dataList"  height="40px">
									<td><input autocomplete="off" type="checkbox" v-model="modelData.select"></td>					
									<td  v-for="fieldItem in calFieldIndex">
										{{modelData.data[fieldItem.fieldName] == undefined ? '' : modelData.data[fieldItem.fieldName].displayValue[fieldItem.index]}}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="container-fluid" id="compareAuditData">
			<div class="row">
				<div class="col-md-12">
					<h2>{{windowDto.name}}审计数据对比</h2>
				</div>
			</div>
			<div class="row">		
				<div class="col-md-12">
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary" @click="showAuditData()">返回</button>
					</div>
				</div>
			</div>
			<div class="row">			
				<table class="table" id="compareTable">
					<tr v-for="(item1,index) in showCompareData">
						<td width="100px" v-if="showCompareData[index].isSame==false" style="color : red"><h5>{{calFieldName[index].name}} </h5></td>
						<td v-for="item2 in showCompareData[index].data"  v-if="showCompareData[index].isSame==false" style="color : red"> {{item2}} </td>
						<td v-if="showCompareData[index].isSame==true"><h5>{{calFieldName[index].name}}</h5> </td>
						<td v-for="item2 in showCompareData[index].data" v-if="showCompareData[index].isSame==true"> {{item2}} </td>
					</tr>
				</table>
			</div>
		


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

<script>
	
	import Common from "../../common/Common.js";
import { Notify, Uuid } from 'pc-component-v3';
	export default {

		data : function () {
			return {
				"windowDto" : {},
	    		"tabId" : "",
	    		"recordId" : "",
	    		"gridData" : [],
	    		"calFieldName" : [],
	    		"calFieldIndex" : [],
	    		"checkedDataList" : [],
	    		"showCompareData" : [],    //显示对比审计数据
			}
		},

		components : {
			
		},

		methods : {
			
			audit : function(){	
				    var _self=this;
					$.ajax({
					url : Common.getApiURL('AuditResource/AuditData'),
					type : "GET",
					data:{
						"tabId" : _self.tabId,
						"recordId" : _self.recordId
					},
					beforeSend : function(request){
						Common.addTokenToRequest(request);
					},
					contentType : "application/json",
					success : function(data){	
						console.log("数据审计");
						//console.log(JSON.stringify(data));
						_self.gridData = data;
					},
			        error: function (XMLHttpRequest, textStatus, errorThrown){
			          	Common.processException(XMLHttpRequest, textStatus, errorThrown);
			        }
					});
				
			},
			compare : function(){
				 var _self=this;
				 _self.checkedDataList = [];
			 	 
				 _self.gridData.dataList.forEach(function(modelData){
				 	if(modelData.select){
				 		_self.checkedDataList.push(modelData);
				 	}
				 })
				 if(_self.checkedDataList.length<2){
				 	Notify.error("未选择数据","请至少选择两个要对比的数据。", false);
					return;
				 }else{
					_self.setShowCompareData();
				 	$("#showAuditData").hide();
				 	$("#compareAuditData").show();
				 }


			},
			showAuditData : function(){
				$("#showAuditData").show();
				$("#compareAuditData").hide();
			},
			setShowCompareData :function(){
				_self = this;
				_self.showCompareData = [];
				for(var i = 0,len1 = _self.calFieldIndex.length;i < len1; i++){
					_self.showCompareData[i] = {"data":[],
												"isSame":true};
					for(var j = 0,len2 = _self.checkedDataList.length;j < len2; j++){
						_self.showCompareData[i].data.push(_self.checkedDataList[j].data[_self.calFieldIndex[i].fieldName].displayValue[_self.calFieldIndex[i].index] == undefined ? '' : _self.checkedDataList[j].data[_self.calFieldIndex[i].fieldName].displayValue[_self.calFieldIndex[i].index]);
						if(_self.showCompareData[i].data[j] != _self.showCompareData[i].data[0]){
							_self.showCompareData[i].isSame = false;
						}
					}
				}
				//console.log(JSON.stringify(_self.showCompareData));

			},



		},
		mounted : function(){
			var _self = this;
			_self.tabId = this.$route.params.tabId;
			_self.recordId = this.$route.params.recordId;
			_self.windowDto = JSON.parse(localStorage.getItem("windowDto"));
			_self.calFieldName = JSON.parse(localStorage.getItem("calFieldName"));
			_self.calFieldIndex = JSON.parse(localStorage.getItem("calFieldIndex"));
			$("#compareAuditData").hide();	
			this.audit();
			
		},
		computed: {
			tableWidth: function(){
				var totalWidth = 50;
				var items = this.calFieldName;
				if(items != undefined){
					items.forEach(function(item){
						totalWidth += Number(item.thWidth.replace("px",""));
					});
				}
				
				return totalWidth + "px";
			},

		},
	}

</script>

<style scoped>
	.table-div{
		overflow: scroll;
	}

	.fixed-table{
		table-layout: fixed;
	}

	table.fixed-table tr th {
	    text-align: center;
	}

	table.fixed-table td {
	    text-align: center;
	    word-wrap: break-word;
	    word-break: normal;
	}
	#compareTable{
		border-collapse:collapse;
	}
	#compareTable tr td{
		 border-bottom:1px solid #dedede;
		text-align: center;
	
	}
	h5{
		font-weight:bold
	}

</style>