{extend name="public/container"}
{block name="content"}
<script src="{__FRAME_PATH}js/content.min.js?v=1.0.0"></script>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
<style type="text/css">
	[v-cloak] {
	  display: none;
	}
	.goodsImg{
		width: 100px;
		height: 100px;
	}
	#showImg{
		background:rgba(0,0,0,0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.onBottom{
		color: #FFFFFF;
		background-color: #E3383E;
		border-radius: 5px;
		line-height: 1;
		padding: 5px 10px;
		cursor: pointer;
	}
</style>

<div id='app' >
	<div class="ordertitle" v-cloak> 
		订单号：{{orderInfo.order_id}} <br>
		支付时间：{{orderInfo.pay_time}} 
		<span v-if='orderInfo.pay_type === "wexin"'>
			支付方式：微信
		</span>
		<span v-if='orderInfo.pay_type === "ali"'>
			支付方式：支付宝
		</span>
		<span v-if='orderInfo.pay_type === "yue"'>
			支付方式：余额
		</span>
		<span v-if='orderInfo.pay_type === "consumer"'>
			支付方式：消费券
		</span>
		<span v-if='orderInfo.pay_type === "jialie"'>
			支付方式：嘉联
		</span>
		<span v-if='orderInfo.pay_type === "offline"'>
			支付方式：线下支付
		</span>
		<br>
		<span v-if='orderInfo.shipping_type==2'>
		收货地址：自提 收货人：{{orderInfo.real_name}} 
		</span>
		<span v-else>
		收货地址：{{orderInfo.user_address}} 收货人：{{orderInfo.real_name}} 
		</span>
		联系方式：{{orderInfo.user_phone}}
	</div>
	<div class="row" style="margin-top: 10px;">
	    <div class="col-sm-12">
	        <div class="ibox">
	            <div class="ibox-content">
	                <div class="table-responsive">
	                    <table class="table table-striped  table-bordered">
	                        <thead>
	                        <tr>
	                            <th class="text-center">商品信息</th>
	                            <th class="text-center">商品数量</th>
	                            <th class="text-center">商品单价</th>
	                            <th class="text-center">商品总价</th>
	                            <th class="text-center">已退个数</th>
	                            <th class="text-center">操作</th>
	                        </tr>
	                        </thead>
	                        <tbody class="">
	                        <tr v-for="ls in list">
	                            <td class="text-center">
	                                <img @click="showImg(ls.productInfo.image)" class="goodsImg" :src="ls.productInfo.image" alt="">
	                            </td>
	                            <td class="text-center">
	                                {{+ls.cart_num}}
	                            </td>
	                            <td class="text-center">
									  ￥{{+ls.productInfo.price}}
	                            </td>
								<td class="text-center">
								    ￥{{+ls.cart_num*(+ls.productInfo.price)}}
								</td>
								<td class="text-center">
								    {{+ls.refund_num||0}}
								</td>
								<td class="text-center">
								    <div class="onBottom" @click="outMoney(ls)">
										退款
									</div>
								</td>
	                        </tr>
	                        </tbody>
	                    </table>
	                </div>
	            </div>
	        </div>
	    </div>
	</div>
	<div id="showImg" ref="showImg" v-if="showImgBox" @click="showImgBox = false">
		<img :src="showImgUrl" style="max-width:80% ;max-height: 80%;" alt="">
	</div>
</div>
{/block}
{block name="script"}
<script>
    var orderId = `{$id}`;
	console.log(orderId)
	require(['vue'], function (Vue) {
	    new Vue({
	        el: "#app",
	        data: {
				// 商品列表
				list:[],
				// 订单信息
				orderInfo:{
					order_id:'',//订单号
					pay_type:'',//支付方式
					real_name:'',//收货名称
					user_phone:'',//收货手机号
					user_address:'',//收货地址
					pay_time:'',//支付时间
				},
				showImgUrl:'',//当前选中图片的url
				showImgBox:false,//是否显示图片弹窗
			},
	        methods: {
				// 退款
				outMoney(item){
					
					layer.prompt({
					  formType: 0,
					  value: 0,
					  title: '请输入退货数量',
					}, function(value, index, elem){
						if(value>item.cart_num){
							layer.msg('退货数量不可大于购买数量', {
							  icon: 2,
							  time: 1500 //2秒关闭（如果不配置，默认是3秒）
							});
							return 
						}
						layer.close(index);
						// 加载
						let ind = layer.load(1)
						// 请求数据
						let pushData = {
					  	order_id: orderId,
					  	cart_id: item.id,
					  	product_id: item.productInfo.id,
					  	refund_num: value,
					  	refund_price: item.productInfo.price,
						cart_num:item.cart_num
						}
						// 请求地址
						let url = layList.U({c: 'order.store_order', a: 'cart_refund', p: pushData});
						$eb.axios.get(url).then(function (res) {
							if (res.status == 200 && res.data.code == 200) {
								  $eb.$swal('success', res.data.msg);
								  // 减少数量
								  item.cart_num-=value;
								  // 增加已退商品数量
								  item.refund_num+=value;
								  // 关闭加载中
								  layer.close(ind)
							} else{
								  // 关闭加载中
								  layer.close(ind)
								  return Promise.reject(res.data.msg || '退款失败')
							}
						  }).catch(function (err) {
							  $eb.$swal('error', err);
						  });
						});
				},
				// 放大图片
				showImg(url){
					this.showImgUrl = url;
					this.showImgBox = true;
				},
				// 获取商品列表
				getOrderDetail(){
					let that = this;
					let url = layList.U({c: 'order.store_order', a: 'info', p: {id: orderId}});
					$eb.axios.get(url).then(function (res) {
					    if (res.status == 200 && res.data.code == 200) {
							try{
								let data = res.data.data;
								that.list =data.cartInfo.map(function(e){
									e = JSON.parse(e.cart_info.replace(/\\"/g,'"'));
									return e
								});
								console.log(that.list);
								({
									order_id:that.orderInfo.order_id,//订单号
									pay_type:that.orderInfo.pay_type,//支付方式
									real_name:that.orderInfo.real_name,//收货名称
									user_phone:that.orderInfo.user_phone,//收货手机号
									user_address:that.orderInfo.user_address,//收货地址
									pay_time:that.orderInfo.pay_time,//支付时间
								} = data.info);
								console.log(that)
							}catch(e){
								console.log('错误',e)
							}
							
					        // $eb.$swal('success', res.data.msg);
					    } else{
					        // return Promise.reject(res.data.msg || '核销失败')
						}
					}).catch(function (err) {
					    $eb.$swal('error', err);
					});
				}
			},
	        created: function () {
				//加载初始化数据
				this.getOrderDetail();
			},
	    })
	});
	
</script>
{/block}
