<?php include_once(mvc::$cfg['PATH_TPL'].'public/headBase.php');?>
<style>
.table>thead>tr>th,.table>thead>tr>td{
  vertical-align: top;
}
</style>
<div class="marauto pad10">
	<div class="mod-vinimg-box">
		<div class="vin-imgs">
			<div id="pics" style="display:none">
				<?php foreach($likeArr as $v){?>
				<img src="<?=mvc::$cfg['HOST']['vinimg_'.$v['vii_imghost']].$v['vii_img']?>" data-viiid=<?=$v['vii_id']?>>
				<?php }?>
			</div>
		</div>
		<div class="pad5">
			<a href="<?php echo mvc::$cfg['ADMIN_URI'];?>ypcCar/standModelAny?sma_vin=<?=$data['sgby_vin1_8']?>&sma_gxb_code=<?=$data['sgby_gxb_code_show']?>&sma_engine=<?=$data['sgby_engine']?>&img=img"  target="_blank">更多图</a>&nbsp;&nbsp;&nbsp;
			图VIN：<span id="oct-txt">
				<a href="<?=mvc::$cfg['ADMIN_URI']?>ypcCar/standModelAnyAdd?&vii_id=<?=$likeArr[0]['vii_id']?>" target="_blank"><?=$likeArr[0]['vii_vin']?></a>
				<br><?php echo htmlentities($likeArr[0]['vii_imgocr']);?>
			</span>
		</div>
		<!-- AIOCR展示区域，也是跟随图片点击而切换的 -->
		<div id="ai-ocr-box" style="<?php if(empty($likeArr[0]['via_imgocr'])) echo 'display:none;';?>position:relative;margin:6px 0;padding:22px 8px 24px;border:1px solid #b7d7ff;background:#f7fbff;line-height:20px;white-space:normal;word-break:break-all;">
			<span style="position:absolute;left:0;top:0;background:#1e9fff;color:#fff;padding:1px 6px;font-weight:bold;">AIOCR</span>
			<div id="ai-ocr-txt"><?php if(!empty($likeArr[0]['via_imgocr'])) echo nl2br(htmlentities($likeArr[0]['via_imgocr']));?></div>
			<a href="javascript:;" onclick="delAiOcr()" style="position:absolute;right:6px;bottom:3px;color:#d9534f;">删除</a>
		</div>
	</div>
	<div class="floatl" id="data-box" style="overflow: auto;">
		<form method="post" id="add_form">
			<div style="margin-bottom:5px;">
				<div class="mart10"><b>V18：</b><input type="text" name="sgby_vin1_8" readonly value="<?=($data['sgby_vin1_8']??'')?>" class="form-control" size="40"></div>
				<div class="mart10"><b>型号：</b><input type="text" name="sgby_gxb_code_show" readonly value="<?=($data['sgby_gxb_code_show']??'')?>" class="form-control" size="40"></div>
				<div class="mart10"><b>发动机：</b><input type="text" name="sgby_engine" readonly value="<?=($data['sgby_engine']??'')?>" class="form-control" size="38"></div>
				<input type="hidden" name="sgby_vin" value="<?=($data['sgby_vin']??'')?>"/>
			</div>
			<table class="table table-bordered" style="overflow: auto;">
				<thead>
					<tr>
						<th class="center" width="40px"><a href="javascript:;" onclick="addRow()">添加</a></th>
						<th class="center" width="60px">状态</th>
						<th class="center">电机</th>
						<th class="center" width="120px">电压</th>
						<th class="center" width="120px">容量</th>
					</tr>
					<tr class="tj-info">
						<td></td>
						<td>单项</td>
						<td data-field="sgby_engine_b">
							<?php foreach($tjArr['sgby_engine_b'] as $k=>$v){?>
							<div class="any-val">
								<span class="val"  title="点击自动填充"><?=$v['val']?></span>
								<span class="gray" title="点击切图" data-viimg="<?=$v['vii_id']?>">【<?=$v['vin_count']?>】</span>
							</div>
							<?php }?>
						</td>
						<td data-field="sgby_voltage">
							<?php foreach($tjArr['sgby_voltage'] as $k=>$v){?>
							<div class="any-val"><span class="val" title="点击自动填充"><?=$v['val']?></span><span class="gray" title="点击切图" data-viimg="<?=$v['vii_id']?>">【<?=$v['vin_count']?>】</span></div>
							<?php }?>
						</td>
						<td data-field="sgby_capacity">
							<?php foreach($tjArr['sgby_capacity'] as $k=>$v){?>
							<div class="any-val"><span class="val" title="点击自动填充"><?=$v['val']?></span><span class="gray" title="点击切图" data-viimg="<?=$v['vii_id']?>">【<?=$v['vin_count']?>】</span></div>
							<?php }?>
						</td>
					</tr>
					<?php foreach($comLikeArr as $v){?>
					<tr class="com-info">
						<td></td>
						<td>组合</td>
						<td data-field="sgby_engine_b">
							<div class="any-val">
								<span class="val" title="点击自动填充"><?=$v['engine_b']?></span>
								<span class="gray" title="点击切图" data-viimg="<?=$v['vii_id']?>">【<?=$v['vin_count']?>】</span>
							</div>
						</td>
						<td data-field="sgby_voltage"><span class="val"><?=$v['voltage']?></span></td>
						<td data-field="sgby_capacity"><span class="val"><?=$v['capacity']?></span></td>
					</tr>
					<?php }?>
				</thead>
				<tbody>
					<?php foreach($hasArr as $v){?>
					<tr>
						<td><a href="javascript:;" onclick="delRow(this, <?=$v['sgby_id']?>)">删除</a></td>
						<td><?=$statusArr[$v['sgbt_status']]?></td>
						<td class="i"><input type="text" name="reg[<?=$v['sgby_id']?>][sgby_engine_b]" value="<?php echo $v['sgby_engine_b'];?>" class="form-control" size="40"></td>
						<td class="i"><input type="text" name="reg[<?=$v['sgby_id']?>][sgby_voltage]" value="<?php if($v['sgby_voltage'] > 0) echo (float) $v['sgby_voltage'];?>" class="form-control" size="6"></td>
						<td class="i"><input type="text" name="reg[<?=$v['sgby_id']?>][sgby_capacity]" value="<?php if($v['sgby_capacity'] > 0) echo (float) $v['sgby_capacity'];?>" class="form-control" size="6"></td>
					</tr>
					<?php }?>
				</tbody>
			</table>
			<div class="add_app_foot">
				<button type="submit" class="btn btn-success ok-btn" name="sgbt_status" value="1">有效[下一个]</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<button type="submit" class="btn btn-danger" name="sgbt_status" value="-1">忽略[下一个]</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<?php if(!empty($lasetParams['sgby_id'])){?>
				<a class="btn btn-default" href="<?php echo mvc::$cfg['ADMIN_URI'].'vin/batteryRegSet?'.http_build_query($lasetParams);?>">前一个</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<?php }?>
			</div>
			
		</form>
		<br>
	</div>
</div>
<iframe src="<?=mvc::$cfg['ADMIN_URI']?>ypcCar/standModelAnyTj?smt_gxb_code=<?=($data['sgby_gxb_code_show']??'')?>" id="main_frame" name="main_frame" style="width: 100%; height: 847px;" frameborder="0">你的浏览器不支持IFRAME</iframe>
<?php include_once(mvc::$cfg['PATH_TPL'].'public/footBase.php');?>	
<script type="text/javascript">
var uriParam = <?php echo json_encode($Params);?>;
var likeArr = <?php echo json_encode($likeArr, JSON_UNESCAPED_UNICODE);?>;
function escapeHtml(str){
	return String(str || '').replace(/[&<>"']/g, function(s){
		return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[s];
	});
}
function delAiOcr(){
	if(!likeArr[imgIdx] || !likeArr[imgIdx].vii_id) return false;
	if(!confirm('确定删除AIOCR？')) return false;
	$.ajax({
		type:'POST',
		url:ADMIN_URI+'ypcCar/standVinImgsOcraiDel',
		data:{isAjax:1, vii_id:likeArr[imgIdx].vii_id},
		dataType:'json',
		success:function(Data){
			if(Data.status){
				likeArr[imgIdx].via_imgocr = '';
				showAiOcr(imgIdx);
			}else{
				alert(Data.data || '删除失败');
			}
		}
	});
}
function showAiOcr(idx){
	var txt = likeArr[idx] && likeArr[idx].via_imgocr ? likeArr[idx].via_imgocr : '';
	if(txt){
		$('#ai-ocr-txt').html(escapeHtml(txt).replace(/\r\n|\n|\r/g, '<br>'));
		$('#ai-ocr-box').show();
	}else{
		$('#ai-ocr-txt').html('');
		$('#ai-ocr-box').hide();
	}
}
var imgIdx = 0;//当前图片序号
$(document).ready(function(){
	var viewer = new Viewer(document.getElementById('pics'), {
		title:0,
		toolbar: {
			zoomIn:1,
			zoomOut: 1,
			oneToOne: 1,
			prev: $('#pics img').length > 1 ? 1: 0,
			next: $('#pics img').length > 1 ? 1: 0,
			reset: 4,
			rotateLeft: 4,
			rotateRight: 4
		},
		inline:true,
		backdrop:false,
		button:false,
		navbar:  true,
		viewed(event) {
			imgIdx = event.detail.index;
			$('#oct-txt').html('<a href="'+ADMIN_URI+'ypcCar/standModelAnyAdd?&vii_id='+likeArr[imgIdx].vii_id+'" target="_blank">'+likeArr[imgIdx].vii_vin+'</a>'+'<br>'+likeArr[imgIdx].vii_imgocr);
			showAiOcr(imgIdx);
			markMatchVal();
		}
	});
	viewer.show();
	showAiOcr(imgIdx);
	markMatchVal();
	trEvent();
	markHasReg();
	$('.tj-info .any-val .val').click(function(){
		if($('#data-box tbody tr').length > 0){
			$this = $(this);
			var field = $this.parents('[data-field]').data('field');
			$tr = $('#data-box tbody tr.active').length > 0? $('#data-box tbody tr.active'): $('#data-box tbody tr:eq(0)');
			$tr.find('[name$="[' + field + ']"]').val($this.html());
			markHasReg();
		}
	});

	$('.com-info [data-field="sgby_engine_b"] .val').click(function(){
		if($('#data-box tbody tr').length > 0){
			$tr = $('#data-box tbody tr.active').length > 0? $('#data-box tbody tr.active'): $('#data-box tbody tr:eq(0)');
			$(this).parents('tr').find('[data-field]').each(function(i,e){
				$tr.find('[name$="[' + $(e).data('field') + ']"]').val($(e).find('.val').html());
				markHasReg();
			})
		}
	});

	$('[data-viimg]').click(function(){
		var id = $(this).data('viimg');
		for(var i in likeArr){
			if(likeArr[i].vii_id == id){
				viewer.view(i);
				break;
			}
		}
	});
	if($('#data-box tbody tr').length < 1) addRow();
});

//新增或者编辑
function addRow(){
	var $tbody = $('#data-box tbody');
	var num = 0;
	$tbody.find('[data-num]').each(function(i,e){
		var tnum = parseInt($(e).data('num'));
		if(tnum < num) num = tnum;
	});
	num--;
	var tpl = `<tr data-num="#num#">
		<td><a href="javascript:;" onclick="delRow(this, #num#)">删除</a></td>
		<td>待处理</td>
		<td class="i"><input type="text" name="reg[#num#][sgby_engine_b]" class="form-control" size="40"></td>
		<td class="i"><input type="text" name="reg[#num#][sgby_voltage]" class="form-control" size="6"></td>
		<td class="i"><input type="text" name="reg[#num#][sgby_capacity]" class="form-control" size="6"></td>
	</tr>`;
	$tbody.append(tpl.replace(/#num#/g, num));
	trEvent();
	$tbody.find('tr').last().click();
}

function trEvent(){
	$('#data-box tbody tr').click(function(){
		$('#data-box tbody tr.active').removeClass('active');
		$(this).addClass('active');
	});
}

//文本秒绿
function markMatchVal(){
	var ocrtxt = $('#oct-txt').html();
	
	var used = [];
	$('[data-field="sgby_engine_b"] .val').removeClass('green').sort(function(a, b){
		return $(b).text().length - $(a).text().length;
	}).each(function(){
		var $el = $(this);
		var val = $.trim($el.text());
		if (ocrtxt.indexOf(val) === -1) return;
		for (var i = 0; i < used.length; i++) {
			if (used[i].indexOf(val) !== -1) return;
		}
		$('[data-field="sgby_engine_b"] .val').filter(function () {
			return $.trim($(this).text()) === val;
		}).addClass('green');
		used.push(val);
	});

	$('[data-field="sgby_voltage"] .val.green').removeClass('green');
	$('[data-field="sgby_voltage"] .val').each(function(i,e){
		var val = $(e).html();
		if(new RegExp(val+" ?[V\/]").test(ocrtxt) || new RegExp('[V\):： ]+'+val).test(ocrtxt)){
			$(e).addClass('green');
		}
	});
	$('[data-field="sgby_capacity"] .val.green').removeClass('green');
	$('[data-field="sgby_capacity"] .val').each(function(i,e){
		var val = $(e).html();
		if(new RegExp(val+" ?[AV\/]").test(ocrtxt) || new RegExp('[AH\):： ]+'+val).test(ocrtxt)){
			$(e).addClass('green');
		}
	});
}

function delRow(obj, id){
	if(confirm('确定要删除记录吗？')){
		if(id > 0){
			$(obj).parents('tr').hide();
			$(obj).parent().append('<input type="hidden" name="reg['+id+'][del]" value="1"/>');
		}else{
			$(obj).parents('tr').remove();
		}
	}
}

function markHasReg(){
	$('.okreg').remove();
	$('#data-box tbody tr').each(function(){
		var $tr = $(this);
		var fields = ['sgby_engine_b', 'sgby_capacity', 'sgby_voltage'];
		var okVals = {}; // 存储对应匹配成功的值
		$.each(fields, function (_, field) {
			var val = $.trim($tr.find('[name$="[' + field + ']"]').val());
			if (!val) return;
			$('.tj-info [data-field="' + field + '"] .val').filter(function () {
				return $.trim($(this).text()) === val;
			}).parent().each(function () {
				if (!$(this).find('.okreg').length) {
					$(this).append('<span class="okreg">✅️</span>');
				}
				// 存储对应值
				okVals[field] = val;
			});
		});
		if(okVals.sgby_engine_b && okVals.sgby_capacity && okVals.sgby_voltage){
			$('.com-info').each(function(i1, e1){
				console.log($(e1).find('[sgby_engine_b]').html());
				if(
					okVals.sgby_engine_b == $.trim($(e1).find('[data-field="sgby_engine_b"] .val').html()) &&
					okVals.sgby_capacity == $.trim($(e1).find('[data-field="sgby_capacity"] .val').html()) &&
					okVals.sgby_voltage == $.trim($(e1).find('[data-field="sgby_voltage"] .val').html())
				){
					$(e1).find('td:eq(0)').html('<span class="okreg">✅️</span>');
				}
			});
		}
	});
}
</script>
