##tlayout("admin/layout.htm"){

<div class="breadcrumbs" style="height: 45px;">
	<div class="col-xs-12" style="text-align: right;">
		<a class="btn btn-info btn-sm" style="margin-left: 12px;" href="/admin/orders/print?id=${orders.id!}" target="_blank">打印订单</a>
	</div>
</div>
<div class="page-content">
	<div class="row" style="margin-top:10px;">
		<div class="col-xs-12">
			<table class="table table_new_dingdan">
				<tr class="one">
					<th>订单号码</th>
					<th>订单状态</th>
					<th>下单时间</th>
					<th>收件人</th>
					<th>订单金额</th>
				</tr>
				<tr>
					<td>${orders.code!}</td>
					<td>
						##if(orders.status==0){
							未付款
						##}else if(orders.status==1){
							付款审核中
							<a href="javascript:changeStatus(${orders.id!}, 2, '设置为已收款')" style="margin-left: 25px;">设置已收款</a>
							<a href="javascript:changeStatus(${orders.id!}, 0, '款项未收到')" style="margin-left: 25px;">款项未收到</a>
						##}else if(orders.status==2){
							待发货
							<a href="javascript:showAlert('/admin/orders/addTracking?id=${_item.id!}')" style="margin-left: 25px;">设置为已发运</a>
						##}else if(orders.status==3){
							已发货
						##}else if(orders.status==4){
							已收货
						##}else if(orders.status==5){
							已完成
						##}else{
							退款中
							<a href="javascript:changeStatus(${orders.id!}, 5, '退款通过')" style="margin-left: 25px;">退款通过</a>
							<a href="javascript:changeStatus(${orders.id!}, 4, '退款驳回')" style="margin-left: 25px;">退款驳回</a>
						##}
					</td>
					<td>${orders.create_date!, dateFormat='yyyy-MM-dd HH:mm'}</td>
					<td>${orders.take_name!}</td>
					<td>
						<div>￥${orders.grand_total!}</div>
						<div style="margin-top: 5px;">(运费：￥${orders.freight_price!})</div>
					</td>
				</tr>
				##if(orders.take_name!=null && orders.take_name!=""){
					<tr>
						<td colspan="5">
							收件地址：
							<span>${orders.take_name!}</span>
							<span style="margin-left: 10px;">${orders.take_phone}</span>
							<span style="margin-left: 10px;">${orders.take_area_msg!}</span>
							<span style="margin-left: 10px;">${orders.take_address!}</span>
							<span style="margin-left: 10px;">${orders.take_post_code!}</span>
						</td>
					</tr>
				##}
				##if(orders.tracking_code!=null && orders.tracking_code!=""){
					<tr>
						<td colspan="5">
							运单号：
							<a href="javascript:showAlert('/admin/orders/trackingMsg?id=${orders.id!}">${orders.tracking_code!}</a>
							<span style="margin-left: 10px;">${orders.tracking_date!,dateFormat='yyyy-MM-dd HH:mm'}</span>
						</td>
					</tr>
				##}
				##if(orders.remark!=null && orders.remark!=""){
					<tr>
						<td colspan="5">备注：${orders.remark!}</td>
					</tr>
				##}
				##if(orders.payment!=null && orders.payment!=""){
					<tr>
						<td colspan="5">
							##if(orders.payment==1){
								<div>付款信息：微信支付</div>
							##}else if(orders.payment==2){
								<div>付款信息：银行卡支付</div>
								<div style="margin-top: 5px;">收款账号：${orders.to_bank_number!}&nbsp;|&nbsp;${orders.to_bank_name!}&nbsp;|&nbsp;${orders.to_bank_type!}&nbsp;|&nbsp;${orders.to_bank_address!}</div>
								<div style="margin-top: 5px;">转账账号：${orders.from_bank_number!}&nbsp;|&nbsp;${orders.from_bank_name!}</div>
							##}else{
								<div>付款信息：支付宝支付</div>
							##}
						</td>
					</tr>
				##}
				##if(orders.invoice_name!=null && orders.invoice_name!=""){
					<tr>
						<td colspan="5">
							<span>发票抬头：${orders.invoice_name!}</span>
							<span style="margin-left: 10px;">发票税号：${orders.invoice_number!}</span>
						</td>
					</tr>
				##}
			</table>
		</div>
		<div class="col-xs-12">
			<div class="table-responsive">
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th colspan="2" style="width: 40%">商品</th>
							<th>规格</th>
							<th>数量/箱(1箱=24瓶)</th>
							<th>单价</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						##for(_item in item_list!){
						<tr>
							<td colspan="2" style="border-right:none !important;">
								<div>
									<a href="${_item.diy_img_url!}" target="_blank">
										<img src="${_item.diy_img_url!}" style="height:400px;"/>
									</a>
								</div>
							</td>
							<td>${_item.bottle_title!}&nbsp;|&nbsp;${_item.bottle_type_title!}</td>
							<td>${_item.item_number!}箱</td>
							<td>￥${_item.item_price!}</td>
							<td>￥${_item.subtotal!}</td>
							<td>
								<a href="javascript:createImg(${_item.id!})">生成高清图片</a>
							</td>
						</tr>
						##}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<div class="popup_bg"></div>
<div class="popup">
	<div class="popup_title">
		<span>下载pdf</span>
		<img onclick="hidePopup()" src="/admin/images/close_icon.png"/>
	</div>
	<div class="popup_body">
		<div id="gaoqing_img" class="gaoqing_img"></div>		
	</div>
	<div class="popup_foot">
		<span onclick="createPdf()">下载PDF</span>
	</div>
</div>
<canvas id="diy"></canvas>
<script src="/admin/js/fabric/dist/fabric.js"></script>
<script src="/admin/js/jspdf.min.js"></script>
<input type="hidden" value="${orders.code!}" id="orderCode"/>
<script type="text/javascript">
function changeStatus(id, status, msg){
	
	if(confirm("确定要" + msg + "该记录吗？")){
		$.post("/admin/orders/changeStatus",{id:id,status:status},function(data){
			alert(data.msg);
			if(data.success){
				location.reload();
			}
		});
	}
}
var app = {};
//把当前画布保存成图片
app.returnCanvasImg = function(width){
	
	var that= this;
	app.outputWidth = width || 500 ;
	app.outputHeight = app.outputWidth/app.plateRATIO;
	//新的缩放比例
	var afterCutRATIO = app.outputWidth/app.oldCutWidth;
	//执行新的缩放
	that.mainCanvas.zoomToPoint(new fabric.Point(app.width/2,app.height/2),afterCutRATIO);
	//生成剪切图片
	var dataURL = that.mainCanvas.toDataURL({
		  format: 'jpeg',
		  left: app.width/2 -app.outputWidth/2 ,
		  top: 	app.height/2 - app.outputHeight/2,
		  width: app.outputWidth,
		  height: app.outputHeight
	});
	return dataURL;
}
app.mainCanvas = new fabric.Canvas('diy',{
	
	selectionColor: 'rgba(0,0,0,0.1)',
	controlsAboveOverlay:true,
	preserveObjectStacking:true,
	backgroundColor:'rgba(255,255,255,0)',
	selctionBorderColor:'#000',
	selectionDashArray:[3,6],
	selectionLineWidth: 1,
	width:100,
	height:100
});
function createImg(id){
	
	var url = '/admin/api/getUserDiyById?id='+ id;
	$.get(url,function(data){
		if(!data.success){
			alert(data.msg);
			return false;
		}
		$(".popup").show();
		$(".popup_bg").show();
		var json = JSON.parse(data.orders_item.diy_content);
		app.plateRATIO = json.plateRATIO;
		app.oldCutWidth = json.oldCutWidth;
		app.oldCutHeight = json.oldCutHeight;
		app.width = json.width;
		app.height = json.height;
		console.log(app.plateRATIO)
		app.mainCanvas.loadFromJSON(json,function(obj){
			app.mainCanvas.width = 1;
			app.mainCanvas.height = 1;
			app.mainCanvas.renderAll.bind(app.mainCanvas);
			app.imgUrl = app.returnCanvasImg(2000);
			var img = '<img src="'+ app.imgUrl +'"/>';
			$("#gaoqing_img").html(img);
		});
	});
}	
function createPdf(){
	
	var arr = new Array(2);
	arr[0] = 118;
	arr[1] = 118*app.plateRATIO;
	var doc = new jsPDF('portrait','mm',arr);
	doc.addImage(app.imgUrl, 'JPEG', 0, 0,118*app.plateRATIO,118);
	var timestamp = $("#orderCode").val();
	doc.save(timestamp+'.pdf');
}
function hidePopup(){
	
	$(".popup").hide();
	$(".popup_bg").hide();
}
</script>
##}