<template>
	<!-- 商家查看自己店铺的售后订单详情 -->
	<!-- 订单 order -->
	<view class="shoporderdetale xiangq yocode">
		<view class="beijingimg">
			<image src="https://kazuma.jxdsy.cn/static/applet5/2020/index/group_img/defeated.png" mode="" style="width: 100%;height: 240upx;"></image>
			<view class="twotitle">{{detail.desc}}</view>
		</view>
		<view class="boxs">
			<view class="topbox_20 mt-20">
				<view class="ali-c">
					<view class="weizhiimg"><image class="imgs" src="/static/news/address.png"></image></view>
					<view class="flex1 ml-20 addrnamesv">
						<view class="sz_30 bt_hei">{{ detail.adress.name }} {{ detail.adress.mobile }}</view>
						<view class="sz_30 bt_hei mt-10">{{ detail.adress.addr }}</view>
					</view>
				</view>
			</view>

			<!-- 退款进度及图片 -->
			<!-- <view class="topbox_20 mt-20">
				<view class="ali-z sz_30  flexv jus-c ali-c" style="height: 200upx;">
					<image src="https://kazuma.jxdsy.cn/static/applet5/images/refund/tuikuan2.png" mode="" style="width: 530upx;height: 76upx;"></image>
					<view style="color: #F64F15;margin-top: 40upx;">{{ detail.status_text }}</view>
				</view>
			</view> -->

			<!-- 售后说明 -->
			<view class="topbox_20 mt-20" v-if="detail.refund_datail != '' || detail.refund_pics.length>0 ">
				<view style="font-size: 30upx;font-weight: 500;">售后说明</view>
				<view class="mt-20 refund_datail">{{ detail.refund_datail }}</view>
				<view class="mt-20 refund_datail" v-if="detail.examine_reason" >回复：{{ detail.examine_reason }}</view>
				<view class="datail_img">
					<image
						:src="staticUrl + item"
						mode="heightFix"
						v-for="(item, index) in detail.refund_pics"
						@tap="preview(index,item)"
						style="width: 100rpx;flex-grow: 1;padding: 4upx;"
					></image>
				</view>
			</view>
			
			
			<!-- <view class="refundbox-desc">
				<view class="refundbox-title">商家地址：</view>
				<view class="refundbox-cause">{{detail.addr ? detail.addr : ''}}</view>
				<view class="refundbox-cause">{{detail.contact_number ? detail.contact_number : ''}}</view>
				<view class="refundbox-cause">{{detail.refund_datail ? detail.refund_datail : ''}}</view>
			
			</view> -->
			
			<view class="topbox_20 mt-20">
				<view class="ali-c">
					<view class="sz_30 bt_hei">商家地址:</view>
					<view class="flex1 ml-20 addrnamesv">
						<view class="sz_30 bt_hei">{{detail.addr ? detail.addr : ''}}</view>
						<view class="sz_30 bt_hei mt-10">{{detail.contact_number ? detail.contact_number : ''}}</view>
						<view class="sz_30 bt_hei mt-10">{{detail.refund_datail ? detail.refund_datail : ''}}</view>
					</view>
				</view>
			</view>

			<view class="topbox_20 mt-20">
				<view class="ali-c">
					<view class="tubiimg mr-20"><image class="imgs" src="/static/news/storeicon.png"></image></view>
					<view class="bt_min flex1">{{ detail.shop_name }}</view>
				</view>
				<view class="flex mt-30" v-for="(item, index) in detail.ordergoods" :key="index">
					<view class="tuimg br_10 ov">
						<image class="imgs" :src="staticUrl + item.photo" v-if="item.photo"></image>
						<image class="imgs" :src="staticUrl + detail.photo" v-else></image>
					</view>
					<view class="flex1 ml-25 goodsboxs">
						<view class="sz_30 bt_hei twoline names" style="height:65upx">{{ item.goods_name }}</view>
						<view class="sz_26 bt_hei mt-10 prices">
							价格{{ item.price }}元
							<!-- <text class="ml-20 prices" v-if="detail.buytype==0 && item.recprice >0">充值价{{item.recprice}}元</text> -->
						</view>
						<view class="sz_26 inp_hui mt-10 skunames">
							规格:{{ item.sku_name }}
							<text class="ml-20"></text>
						</view>
						<view class="sz_26 inp_hui mt-10 sumns">数量: x {{ item.num }}</view>
					</view>
				</view>
			</view>

			<view class="topbox_20 mt-20  ">
				<view class="ali-z sz_30 bt_hei flex ali-c jus-b">
					<view>总计:</view>
					<view style="color: red;">¥{{ detail.need_pay }}</view>
				</view>
			</view>

			<!-- 第二排 -->
			<view class="cellboxs cellboxstow">
				<view class="subsbox cellitems flex ali-c jus-b"><view class="name">订单信息</view></view>
				<view class="cellitems flex ali-c jus-b">
					<view class="name">订单编号</view>
					<view class="vlas">{{ detail.order_sn }}</view>
				</view>
				<view class="cellitems flex ali-c jus-b">
					<view class="name">创建时间</view>
					<view class="vlas">{{ detail.create_time }}</view>
				</view>
				<!-- <view class="cellitems flex ali-c jus-b">
					<view class="name">退款原因</view>
					<view class="vlas">{{ detail.refund_datail }}</view>
				</view> -->
				<!-- <view class="cellitems flex ali-c jus-b">
					<view class="name">退款图片</view>
					<view class="vlas">{{ detail.refund_pics }}</view>
				</view> -->
			</view>
			<!-- 订单信息 -->

			<!-- 联系客服 -->
			<view class="ordertelbox flex ">
				<view class="itemboxss flex1 flex flexc" @tap="xlsj" :data-tel="detail.adress.mobile">
					<image class="img" src="/static/news/telicon1.png" mode=""></image>
					<view class="name">联系客户</view>
				</view>
				<view class="itemboxss flex1 flex flexc" @tap="lxpt">
					<image class="img" src="/static/news/kefuicon.png" mode=""></image>
					<view class="name">联系平台</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<!-- <view class="flexfootsubbtn flex jus-e ali-c order_foot" style="border-top: 1px solid #DEDEDE;" v-if="detail.buttons != ''">
			<view
				:class="[item.way == 'shopExamine' ? 'btnitemTow' : 'btnitem', item.class_name]"
				@tap.stop="operation(item.way)"
				v-for="(item, index) in detail.buttons"
				:key="index"
			>
				{{ item.name }}
			</view>
		</view> -->
	</view>
</template>

<script>
import { getRefundDetail } from '@/utils/api/api.js';
export default {
	data() {
		return {
			refund_id: '',
			detail: {adress:{}} //售后详情
			// logs:{},
		};
	},
	computed: {
		staticUrl() {
			//静态资源地址
			return this.$store.state.staticUrl;
		}
	},
	onLoad(options) {
		this.refund_id = options.refund_id;
		this.initializedata();
	},
	methods: {
		//预览图片
		preview(index,item){
			let currentImg = this.detail.refund_pics;
			let imgList = [];
			for(var i=0;i<currentImg.length;i++){
				var itemimg = currentImg[i];
				if(itemimg.indexOf("http")!=-1){
					imgList.push(`${ itemimg}`)
				}else if(itemimg.indexOf('//')!=-1 && itemimg.indexOf("http")==-1){
					imgList.push(`https:${itemimg}`)
				}else{
					imgList.push(`${this.staticUrl+ itemimg}`)
				}
			}
			
			uni.previewImage({
				urls: imgList,
				current: index, //显示的索引
			});
		},
		xlsj() {
			//联系客户
			uni.makePhoneCall({
				phoneNumber: this.detail.addr.mobile //仅为示例
			});
		},
		//联系平台
		lxpt() {
			uni.makePhoneCall({
				phoneNumber: '4008073023' //仅为示例
			});
		},
		initializedata() {
			var that = this;
			let params = {
				refund_id: that.refund_id
			};
			getRefundDetail(params).then(res => {
				if (res.code < 0) {
					// app.showToast({title: res.msg});
					this.$api.msg(res.msg);
				} else {
					this.detail = res.data;
					// this.logs = res.data.logs;
					//this.CONFIG =
				}
			});
		},
		callTel: function(e) {
			uni.makePhoneCall({
				phoneNumber: e.currentTarget.dataset.tel // 仅为示例，并非真实的电话号码
			});
		}
	}
};
</script>

<style lang="scss">
/* pages/shop//order/weidianorder/weidianLine_item/weidianLine_item.wxss */
.ml-20 {
	margin-left: 20upx;
}
.mt-20 {
	margin-top: 20upx;
}
.mr-20 {
	margin-right: 20upx;
}
.mt-30 {
	margin-top: 30upx;
}
.ml-25 {
	margin-left: 25upx;
}
.sz_30 {
	font-size: 30upx;
}
.beijingimg {
	// background: linear-gradient(#ff5a03, #ff4216);
	width: 100%;
	// padding: 30upx 24upx;
	position: relative;
	.twotitle {
		position: absolute;
		z-index: 99;
		top: 60upx;
		color: rgba(255, 255, 255, 1);
		font-size: 38upx;
		font-weight: 500;
		line-height: 40upx;
		margin-left: 40upx;
	}
}
.addresone {
	margin-top: 20px;
}
.boxs {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 0upx 24upx;
	// margin-top: 60upx;
	box-sizing: border-box;
}
.bt_min {
	font-size: 30upx;
}
.addrnamesv {
	font-size: 30upx;
}
.topbox_20 {
	width: 100%;
	background: rgba(255, 255, 255, 1);
	border-radius: 14rpx;
	padding: 20upx;
	box-sizing: border-box;
	font-size: 30upx;
}

.skunames {
	font-size: 24upx;
}

page {
	position: relative;
	padding-bottom: 100upx;
	background: #f5f5f5;
}
.weizhiimg {
	width: 30upx;
	height: 46upx;
	.imgs {
		width: 30upx;
		height: 46upx;
	}
}
.shuwuimg {
	width: 67upx;
	height: 67upx;
	border-radius: 4upx;
	overflow: hidden;
}
.btbox {
	width: 190upx;
	height: 77upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 4upx;
}
.xiangyouimg {
	width: 14upx;
	height: 24upx;
}
.dianhuimg {
	width: 42upx;
	height: 42upx;
}
.kuai {
	width: 40upx;
	height: 40upx;
	text-align: center;
	line-height: 40upx;
	font-size: 24upx;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
}

.dibu_qr {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: rgba(255, 255, 255, 1);
	padding: 10upx 24upx;
	box-sizing: border-box;
}
.beizhu {
	width: 150upx;
	text-align: right;
}
.tubiimg {
	width: 27upx;
	height: 24upx;
	.imgs {
		width: 27upx;
		height: 24upx;
	}
}
.tuimg {
	width: 183upx;
	height: 183upx;
	.imgs {
		width: 183upx;
		height: 183upx;
	}
}
view {
	line-height: 112%;
	letter-spacing: 3upx;
}
.dianhuimg {
	width: 43upx;
	height: 43upx;
}
.shuxian {
	width: 1px;
	height: 100upx;
	background: rgba(242, 242, 242, 1);
}
.duanxian {
	width: 45upx;
	height: 1px;
	background: rgba(181, 181, 181, 1);
}
.cptjimg {
	width: 100%;
	height: 310upx;
}
/* 取消弹窗 */
.zan-dialog__mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.5);
	display: none;
}

.zan-dialog__container {
	position: fixed;
	bottom: 400upx;
	width: 650upx;
	height: 350upx;
	margin-left: 50upx;
	background: #f8f8f8;
	transform: translateY(300%);
	transition: all 0.4s ease;
	z-index: 12;
	border-radius: 20upx;
	/* box-shadow: 0px 3px 3px 2px gainsboro; */
}

.zan-dialog--show .zan-dialog__container {
	transform: translateY(0);
}

.zan-dialog--show .zan-dialog__mask {
	display: block;
}

.goodsboxs {
	font-size: 30upx;
	.names {
		font-size: 30upx;
	}
	.prices {
		font-size: 30upx;
	}
	.sumns {
		color: rgb(192, 190, 190);
	}
}

//联系kefu 客服
.ordertelbox {
	margin: 0 24upx;
	margin-top: 20upx;
	height: 89upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 0px 0px 14upx 14upx;
	.itemboxss {
		position: relative;
		height: 89upx;
		line-height: 89upx;
		.img {
			width: 43upx;
			height: 43upx;
			margin-right: 20upx;
		}
		.name {
			font-size: 30upx;
			color: rgba(0, 0, 0, 1);
		}
	}

	.itemboxss:nth-child(1):after {
		content: '';
		width: 1px;
		height: 89px;
		background: rgba(242, 242, 242, 1);
		position: absolute;
		top: 0;
		right: 0;
	}
}
//客服end

//价格明细列表
.cellboxs {
	margin: 20upx 0;
	margin-top: 20upx;
	.cellitems {
		padding: 0 20upx;
		height: 88upx;
		line-height: 88upx;
		border-bottom: 1px solid #f5f1f1;
		background: #ffffff;
		.name {
			font-size: 30upx;
			color: rgba(0, 0, 0, 1);
		}
		.vlas {
			font-size: 30upx;
			color: rgba(0, 0, 0, 1);
		}
	}
	.cellitems:nth-last-child(1) {
		border: 0;
	}
	.subsbox {
		.name {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(0, 0, 0, 1);
		}
		.vlas {
			color: #ff6900;
			.fuhao {
				font-size: 30upx;
			}
			.shuzi {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36upx;
			}
		}
	}
}
.datail_img{
	// width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.refund_datail{
	margin-top: 20upx;
}
</style>
