<template>
	<view :class="orderDetail.status == 'completed'||orderDetail.status == 'shipped'?'pad-x150':'pad-x170'" v-if="isLoading">
		<status-nav :ifReturn="true" navBarTitle="订单详情" :marginBottom="0" :backTag="backTag"></status-nav>
		<!-- 收件人信息 -->
		<view class="settlement-content pad-zy20 border-box">
			<!-- 订单简介 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
				<view class="order-info pad-zy20 border-box">
					<view class="flex mar-s20">
						<text>订单编号</text>
						<text>{{orderDetail.coding}}</text>
					</view>
					<view class="flex mar-s20">
						<text>下单时间</text>
						<text>{{orderDetail.created_at}}</text>
					</view>
					<view class="flex mar-s20">
						<text>订单状态</text>
						<text>{{orderDetail.status_text}}</text>
					</view>
					<view class="flex mar-s20" v-if="orderDetail.status=='closed'">
						<text>取消原因</text>
						<text>{{orderDetail.close_reason}}</text>
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
				<view class="title">订单信息</view>
				<view class="shop-slide-list">
					<view class="shop-slide-item">
						<view class="item border-box background-white flex" v-for="(item,index) in orderDetail.skus" :key="index">
							<view class="shop-img radius30">
								<image :src="item.spu_cover" mode="widthFix"></image> 
							</view>
							<view class="shop-txt">
								<view class="shop-txt-top">
									<view class="title font30 clips1">{{item.spu_name}}</view>
									<view class="specs font24 color-66 mar-sx10 clips2">规格：{{item.sku_name}}</view>
								</view>
								<view class="shop-txt-bottom flex">
									<!-- 商品价格 -->
									<view class="price font30 color-red">￥{{item.price}}<text class="font24 color-66">x{{item.num}}</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 收货信息 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30">
				<view class="title">收货信息</view>
				<view class="addressee-info mar-s20 flex">
					<view class="txt">
						<view class="font30 mar-x10">{{orderDetail.address_info.name}}<text>{{orderDetail.address_info.phone}}</text></view>
						<text class="font24 color-8c">{{orderDetail.address_info.province_str}}{{orderDetail.address_info.city_str}}{{orderDetail.address_info.county_str}}{{orderDetail.address_info.address}}</text>
					</view>
				</view>
			</view>
			<!-- 物流信息 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30" v-if="orderDetail.express_name!==''">
				<view class="title">物流信息</view>
				<view class="addressee-info mar-s20 flex">
					<view class="txt" style="width: 100%;">
						<view class="font30 mar-x10">{{orderDetail.express_name}}</view>
						<view class="txt-coding font24 flex" style="margin-top: 10rpx;">
							<text class="color-8c">快递单号：{{orderDetail.express_number}}</text>
							<view class="copy_btn" @tap="copyEV">复制查询</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 付款信息 -->
			<view class="section background-white radius30 mar-x40 pad-all25 border-box font30" v-if="orderDetail.status!=='waiting'">
				<view class="pay-info">
					<view class="flex">
						<text>商品总金额</text>
						<text class="color-red">{{orderDetail.original_price}}</text>
					</view>
					<view class="flex mar-s20">
						<text>折扣优惠</text>
						<text class="color-red">{{coupon_vip_price>0?coupon_vip_price:0}}</text>
					</view>
					<view class="flex mar-s20">
						<text>积分抵扣</text>
						<text class="color-red">{{orderDetail.score_deduction_money>0?orderDetail.score_deduction_money:0}}</text>
					</view>
					<view class="pay-actual mar-s30 flex">实付款:<text class="color-red font36">{{priceAll>0?'￥'+ priceAll:0}}</text></view>
				</view>
			</view>
		</view>
		<!-- 尾部 -->
		<view class="pull-btn background-white border-box" style="box-shadow: 0 -9rpx 21rpx rgba(0,0,0,.1);">
			<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="cancleEv" v-if="orderDetail.status == 'waiting' || orderDetail.status == 'paid'">取消订单</view>
			<view class="order-btns-bg flex" v-if="orderDetail.status == 'shipped'">
				<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="refundEv">客服售后</view>
				<view class="btn border-box background-orange color-ff font36 radius30 flex" @tap="affirmEv(orderDetail.id)">确认收货</view>
			</view>
			<view class="order-btns-bg flex" v-if="orderDetail.status == 'completed'">
				<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="refundEv">客服售后</view>
				<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="buyAgain">再次购买</view>
			</view>
			<view class="btn border-btn border-box color-8c font36 radius30 flex" @tap="buyAgain" v-if="orderDetail.status == 'closed'">再次购买</view>
			
		</view>
		<!-- 取消原因 -->
		<view class="pull-bg" style="background-color: rgba(0,0,0,.3);"  v-show="isOpen" @tap="closeEdit"></view>
		<view class="vip-box-bg border-box" v-if="isOpen">
			<view class="vip-box radius20 background-white font30">
				<view class="title">取消理由</view>
				<view class="cancle-reason">
					<view class="item flex" v-for="(item,index) in cancleReason" :key="index" @tap="chooseEv(index)">
						<label class="radio"><radio :checked="index==reasonIndex" color="#febf00"/></label>
						<view class="txt font28">{{item.value}}</view>
					</view>
				</view>
				<view class="submit-btn font36 background-orange radius30 mar-s60 flex" @tap="submitEdit">取消订单</view>
				<view class="close-btn" @tap="closeEdit">
					<image src="/static/icon/close-btn.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCartInfo} from '@/jsFile/public-api.js';
	import {mapState} from 'vuex'//引入mapState
	export default {
		data() {
			return {
				orderDetail:{}, //订单详情
				flag:true,
				isLoading:false,
				id:0, //订单id
				coupon_vip_price:'', //折扣优惠
				priceAll:'', //实际付款
				backTag:'',
				isOpen:false,
				cancleReason:[], //取消理由
				reasonIndex:0, //理由位置
			}
		},
		onLoad(op) {
			if(op.id){this.id = op.id;}
			if(op.backTag){this.backTag = op.backTag;}
			this.getOrderDetail();
		},
		methods: {
			// 查询订单详情
			getOrderDetail(){
				uni.showLoading({
					title:'加载中'
				});
				this.$requst.get('/api/user/order-detail',{id:this.id}).then(res=>{
					if(res.code==0){
						console.log(res,'订单详情')
						this.orderDetail = res.data;
						this.coupon_vip_price = this.$toolAll.tools.addXiaoShu(parseFloat(res.data.discount_money) + parseFloat(res.data.coupon_price));
						this.priceAll = this.$toolAll.tools.addXiaoShu(parseFloat(res.data.balance) + parseFloat(res.data.wechat));
					}
					uni.hideLoading();
					this.isLoading = true;
				})
			},
			
			// 获取取消订单原因
			getCancleReason(){
				this.$requst.post('/api/order/cancellation-reason-all').then(res=>{
					if(res.code==0) {
						console.log(res,'取消订单原因');
						this.cancleReason = res.data.list;
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			// 取消订单
			cancleEv(){
				this.isOpen =true;
				// 获取取消订单原因
				this.getCancleReason();
			},
			// 选择取消原因
			chooseEv(index){
				if(index!==this.reasonIndex){
					this.reasonIndex = index;
				}
			},
			// 关闭弹窗
			closeEdit(){
				this.isOpen = false;
			},
			// 确认取消订单
			submitEdit(){
				let params = {
					order_coding: this.orderDetail.coding, //订单号
					remarks:this.cancleReason[this.reasonIndex].value, //取消原因
				}
				this.$requst.post('/api/order/cancel',params).then(res=>{
					if(res.code==0) {
						this.$toolAll.tools.showToast('取消订单成功(*^▽^*)');
						uni.navigateTo({
							url:'/pagesA/order/order'
						})
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			
			// 联系客服退款
			refundEv(){
				this.$requst.get('/api/index/base-config').then(res=>{
					if(res.code==0) {
						console.log(res,'客服电话');
						this.$toolAll.tools.countCustomer(res.data.customer_service_tel,res.data.customer_service_after_tel);
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			
			// 确认收货
			affirmEv(id){
				let params = {
					order_id: id //订单号
				}
				this.$requst.post('/api/order/accepted',params).then(res=>{
					if(res.code==0) {
						this.$toolAll.tools.showToast('确认收货成功(*^▽^*)');
						uni.navigateTo({
							url:'/pagesA/order/order'
						})
					} else {
						this.$toolAll.tools.showToast(res.msg)
					}
				})
			},
			
			// 再次购买
			buyAgain(index){
				let buyList = [];
				let newArr = this.orderDetail;
				newArr.skus.forEach(item=>{
					let obj = {
						sku_coding: item.coding,
						num: item.num
					}
					buyList.push(obj);
				})
				uni.setStorageSync('buyList',buyList);
				uni.navigateTo({
					url:'/pages/cart/settlement'
				})
			},
			
			// 复制查询
			copyEV(){
				this.$toolAll.tools.clickCopy(this.orderDetail.express_number);
			},
		}
	}
</script>

<style scoped>
	
</style>