<template>
	<view class="container" v-if="info.order.id">

		<view class="order-status">
			{{info.order.status_msg}}
		</view>


		<view class="page-block">

			<view class="page-title-block">
				<view class="title">订单信息</view>
			</view>

			<view class="content">


				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>订单编号：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.order.order_no}}</view>
					</view>
				</view>

				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>支付方式：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">
							{{info.order.pay_type == 1?'微信':info.order.pay_type == 2?'余额':'支付宝'}}
						</view>
					</view>
				</view>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>订单金额：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">￥{{info.order.pay_price}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>运费：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">￥{{info.order.postage_price}}</view>
					</view>
				</view>
				<template v-if="info.order.is_pay == 1">
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>支付时间：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.order.pay_time}}</view>
						</view>
					</view>
				</template>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>提货方式：</text>
					</view>
					<view class="desc">
						{{info.order.pick_type == 1?'快递':info.order.pick_type == 2?'外卖':'自提'}}
					</view>
				</view>
				<view class="cell flex flex-y-center" v-if="info.order.pick_type == 3">
					<view class="title-block required">
						<text>自提时间：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.order.take_time}}</view>
					</view>
				</view>
				<template v-if="info.order.pick_type == 1">
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>快递公司：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.order.express || ''}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>快递公司编号：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.order.express_code || ''}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>快递单号：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.order.express_no || ''}}</view>
						</view>
					</view>
				</template>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>用户昵称：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.order.user_name}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>电话：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.order.tel}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>地址：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.order.address || ''}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>用户备注：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.order.user_remark}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>下单时间：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.order.create_time}}</view>
					</view>
				</view>

				<template v-if="info.order.status == 6">
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>退款金额：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.order.refund_price}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>退款时间：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.order.refund_price}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center">
						<view class="title-block required">
							<text>快递单号：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.order.express_no || ''}}</view>
						</view>
					</view>
				</template>


			</view>
		</view>
		<view class="page-block">
			<view class="page-title-block">
				<view class="title">商品信息</view>
			</view>
			<view class="content">
				<view class="goods-tab">
					<view class="tr">
						<view class="td goods-name">商品名称</view>
						<view class="td">数量</view>
						<view class="td">单价</view>
						<view class="td">总价</view>
						<view class="td">退款金额</view>
						<view class="td">退款数量</view>
					</view>
					<view class="tr" v-for="(item,index) in info.goods" :key="id">
						<view class="td goods-name">{{item.name || ''}}</view>
						<view class="td">{{item.num || ''}}</view>
						<view class="td">{{item.unit_price || ''}}</view>
						<view class="td">{{item.sum_price || ''}}</view>
						<view class="td">{{item.refund_price || ''}}</view>
						<view class="td">{{item.refund_num || ''}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="page-block">
			<view class="page-title-block">
				<view class="title">门店备注</view>
			</view>
			<view class="content">
				<form @submit="onSaveRemark" class="store-remark-form">
					<textarea name="remark" v-model="info.order.store_remark" placeholder="请输入" class="store-remark" />
					<button form-type="submit" class="stroe-remark-btn">保存</button>
				</form>
			</view>
		</view>
		<view class="btm-btn-block-content">
			<view class="btm-btn-block">
				<view class="btn btn11" @click="cancelOrder" v-if="info.order.status == 1"> 取消订单 </view>
				<template v-if="info.order.status == 2">
					<view class="btn btn11" @click="deliverGoods" v-if="info.order.is_show_send_but == 1"> 立即发货 </view>
					<view class="btn btn11" @click="showExpress" v-if="info.order.pick_type == 1"> 快递发货 </view>
				</template>
				<view class="btn btn11" @click="orderCompletion" v-if="info.order.status == 3"> 订单完成 </view>
				<view class="btn btn11" @click="processingOrders" v-if="info.order.status == 5"> 处理订单 </view>
			</view>
		</view>
		<uni-popup ref="express" type="center">
			<view class="operation-content">

				<view class="title">快递发货</view>
				<input type="text" :value="expressName" placeholder="快递公司" class="refund-amount"
					@input="onInput($event,'expressName')" />
				<input type="text" :value="expressCode" placeholder="公司编号" class="refund-amount"
					@input="onInput($event,'expressCode')" />
				<input type="text" :value="expressOrderNo" placeholder="快递单号" class="refund-amount"
					@input="onInput($event,'expressOrderNo')" />
				<view class="btns box-pack-between">
					<view class="operation-btn" @click="closePop('express')">取消</view>
					<view class="operation-btn" @click="fahuo" style="color:#3387ff;">发货</view>
				</view>

			</view>
		</uni-popup>
		<uni-popup ref="processing" type="center">
			<view class="operation-content">
				<template v-if="refoundType == 2">
					<view class="title">退款</view>
					<input type="digit" :value="refundAmount" placeholder="退款金额" class="refund-amount"
						@input="onInput($event,'refundAmount')" />
					<view class="btns box-pack-between">
						<view class="operation-btn" @click="closePop('processing')">取消</view>
						<view class="operation-btn" @click="refound" style="color:#3387ff;">退款</view>
					</view>
				</template>
				<template v-if="refoundType == 3">
					<view class="title">拒绝退款</view>
					<textarea type="digit" :value="refundRemark" placeholder="拒绝原因" class="refund-remark"
						@input="onInput($event,'refundRemark')" />
					<view class="btns box-pack-between">
						<view class="operation-btn" @click="closePop('processing')">取消</view>
						<view class="operation-btn" @click="refuseRefound" style="color:#3387ff;">拒绝退款</view>
					</view>
				</template>
			</view>

		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: getApp().globalData.URL,
				id: "",
				info: {},
				refundAmount: '', //退款金额
				refoundType: '',
				refundRemark: '',
				expressName: "",
				expressCode: "",
				expressOrderNo: ''
			}
		},

		onLoad(options) {
			this.id = options.id;
			this.getData()
		},

		methods: {
			// 门店备注
			onSaveRemark(e) {
				this.request({
					url: 'smdcshop/seckill_remarkSave',
					data: {
						id: this.id,
						remark: e.detail.value.remark
					}
				}).then(res => {
					this.getData()
					this.updatePrePage()
				})
			},
			// 秒杀订单取消
			cancelOrder() {
				uni.showModal({
					content: '确认取消该订单',
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: 'smdcshop/seckill_cancel',
								data: {
									id: this.id
								}
							}).then(res => {
								this.getData()
								this.updatePrePage()
							})
						}
					}
				})

			},
			// 预约订单退款
			yyorderqueren() {
				this.$refs.popup.open('top')

			},
			//发货
			deliverGoods() {
				uni.showModal({
					content: "确定发货",
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: 'Smdcshop/yyorderjujue',
								data: {
									id: this.id
								}
							}).then(res => {
								uni.showModal({
									content: res.message,
									showCancel: false,
									success: (r) => {
										this.getData()
										this.updatePrePage()
									}
								})

							})
						}
					}
				})

			},
			//快递发货
			showExpress(){
				this.expressName = ""
				this.expressCode = ""
				this.expressOrderNo = ""
				this.$refs.express.open()
			},
			fahuo(){
				if(!this.expressName){
					uni.showToast({
						title:"请输入快递公司",
						icon:"none"
					})
					return false
				}else if(!this.expressOrderNo){
					uni.showToast({
						title:"请输入快递单号",
						icon:"none"
					})
					return false
				}
				this.request({
					url: 'Smdcshop/yyorderjujue',
					data: {
						id: this.id,
						express:this.expressName,
						express_code:this.expressCode,
						express_no:this.expressOrderNo
					}
				}).then(res => {
					uni.showModal({
						content: res.message,
						showCancel: false,
						success: (r) => {
							this.getData()
							this.updatePrePage()
						}
					})
				
				})
			},
			// 订单完成
			orderCompletion() {
				uni.showModal({
					content: '确定订单完成吗',
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: 'smdcshop/seckill_finish',
								data: {
									id: this.id
								}
							}).then(res => {
								this.getData()
								this.updatePrePage()
							})
						}
					}
				})

			},
			//处理订单
			processingOrders() {
				uni.showActionSheet({
					itemList: ['退款', '拒绝退款'],
					success: r => {
						if (r.tapIndex == 0) {
							this.refoundType = 2
							this.refundAmount = this.info.refund_price
							this.$refs.processing.open()
						} else if (r.tapIndex == 1) {
							this.refoundType = 3
							this.refundRemark = ""
							this.$refs.processing.open()
						}
					}
				})
			},
			onInput(e, name) {
				console.log(e, name)
				this[name] = e.detail.value
			},
			closePop(name) {
				this.refundAmount = ""
				this.refundRemark = ""
				this.$refs[name].close()
			},
			//退款
			refound() {
				if (!/^(0|([1-9]\d{0,6}))(\.\d{1,2})?$/.test(this.refundAmount) || this.refundAmount == 0) {
					uni.showToast({
						title: "请正确输入退款金额",
						icon: 'none'
					})
					return false
				}
				this.request({
					url: 'smdcshop/seckill_subDealRefund',
					data: {
						id: this.id,
						refund_id: this.info.order_refund.id,
						status: 2,
						refund_price: this.refundAmount,

					}
				}).then(res => {
					this.closePop('processing')
					uni.showModal({
						content: res.message,
						showCancel: false,
						success: (r) => {
							this.getData()
							this.updatePrePage()
						}
					})


				})

			},
			//拒绝退款
			refuseRefound() {
				// this.closePop('processing')
				this.request({
					url: 'smdcshop/seckill_subDealRefund',
					data: {
						id: this.id,
						refund_id: this.info.order_refund.id,
						status: 3,
						refuse_reason: this.refundAmount,
					}
				}).then(res => {
					this.closePop('processing')
					uni.showModal({
						content: res.message,
						showCancel: false,
						success: (r) => {
							this.getData()
							this.updatePrePage()
						}
					})
				})
			},
			// 更新上个页面
			updatePrePage() {
				let pages = getCurrentPages()
				if (pages.length > 1) {
					let prePage = pages[pages.length - 2]
					if (prePage.route == 'saomaDiancan/order/yuyueOrder') {
						prePage.$vm.getData(1)
					}
				}
			},
			showImg(src) {
				uni.previewImage({
					urls: [src]
				})
			},

			getData() {
				this.request({
					url: 'smdcshop/seckill_info',
					data: {
						id: this.id
					}
				}).then(res => {
					this.info = res.data;
				})
			},



		}
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}

	page .act {
		color: #007AFF;
	}

	.model-content-center {
		width: 650rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
	}

	.model-content-center .content {
		padding: 20rpx;
	}

	.model-content-center .round {
		border: 1rpx solid #CCCCCC;
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}

	.amount-text {
		font-size: 26rpx;
		padding-bottom: 20rpx;
	}

	.amount-input {
		padding: 10rpx;
		border: 1rpx solid #F1F1F1;
	}

	.model-refund-title {
		font-size: 36rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.model-refund-btn {
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;

	}

	.model-refund-btn .cancel {
		height: 90rpx;
	}

	.model-refund-btn .submit {
		height: 90rpx;
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	button {
		background-color: #fff;
		padding: 0;
		margin: 0;
		line-height: 1rpx;
		/* border: 1px solid #cccccc; */
		min-height: 0;
		font-size: 28rpx;
		background: #fff;
		border-radius: none;
	}

	button::after {
		border: none;
	}

	.model-content-peiSong {
		text-align: center;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #F1F1F1;
		font-size: 28rpx;
	}

	.pd10 {
		padding: 10rpx 0;
	}

	.model {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
	}

	.model-content {
		background: #FFFFFF;
		height: 800rpx;
	}

	.model-content-title {
		padding: 20rpx;
	}

	.text-r {
		text-align: right;
		color: red;
	}

	.info image {
		width: 40rpx;
		height: 50rpx;
	}

	.goods_list-img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		min-width: 100rpx;
	}

	.order-status {
		width: 100%;
		height: 130rpx;
		background: url(../static/images/order_detail_bg.png) no-repeat center;
		background-size: 100%;
		text-align: center;
		line-height: 130rpx;
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;

	}

	.page-block {}

	.page-block .page-title-block {
		height: 90rpx;
		padding: 0 35rpx;
	}

	.page-block .page-title-block .title {
		font-size: 32rpx;
		line-height: 90rpx;
		color: #999;
		font-weight: bold;
	}

	.page-block .content {
		padding: 30rpx 35rpx 0;
		background-color: #fff;
		overflow: hidden;
	}

	.page-block .cell {
		min-height: 45rpx;
		margin-bottom: 30rpx;
	}


	.page-block .cell .title-block {
		width: 175rpx;
		flex: none;
		font-size: 30rpx;
		line-height: 45rpx;
		font-weight: 600;
		color: #333;
	}

	.page-block .cell .desc {
		flex: auto;
		min-height: 45rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		color: #333;
	}

	.pay-type-icon {
		display: block;
		width: 30rpx;
		height: 30rpx;
		margin-right: 8rpx;
	}

	.goods {
		font-size: 32rpx;
		color: #333;
		line-height: 45rpx;
		margin-bottom: 30rpx;
	}

	.price {
		color: red;
	}

	.btm-btn-block-content {
		margin-top: 50rpx;
	}

	.btm-btn-block {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		align-items: center;
	}

	.btm-btn-block .btn {
		flex: none;
		/* width: 325rpx; */
		width: 217rpx;
		height: 98rpx;
		border-radius: 8rpx;
		text-align: center;
		line-height: 98rpx;
		font-size: 32rpx;
		font-weight: 500;

	}

	.btm-btn-block .btn11 {
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
		color: #fff;
	}

	.btm-btn-block .btn12 {
		background: linear-gradient(315deg, #999 2%, #999 99%);
		box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
		color: #fff;
	}

	.zt-btn {
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		box-shadow: 0 0 8rpx 0 rgba(51, 135, 255, 0.2);
		color: #fff;
		font-size: 24rpx;
		padding: 10rpx 12rpx;
		border-radius: 6rpx;
	}

	/*  */
	.qc-btn {
		background-color: #3387FF;
		color: #fff;
		border-radius: 6rpx;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 20rpx;
		margin-left: 10rpx;

	}

	/*  */
	.store-remark-form {
		display: block;
	}

	.store-remark-form .store-remark {
		display: block;
		width: 100%;
		background: #f1f1f1;
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		line-height: 1.5;
	}

	.store-remark-form .stroe-remark-btn {
		display: block;
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
		color: #fff;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		margin: 30rpx auto;
	}

	/*  */
	.goods-tab {
		display: table;
		width: 100%;
		border-collapse: collapse;
		margin-bottom: 30rpx;
	}

	.goods-tab .tr {
		display: table-row;
	}

	.goods-tab .td {
		display: table-cell;
		text-align: center;
		font-size: 24rpx;
		padding: 10rpx;
		border: 1rpx solid #ddd;
	}

	.goods-tab .goods-name {
		width: 200rpx;
	}

	/*  */
	.operation-content {
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.title {
		height: 80rpx;
		/* border-bottom: 1rpx solid #ddd; */
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333;
	}

	.refund-amount {
		width: 80%;
		height: 88rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;
		font-size: 30rpx;
		color: #333;
		margin: 30rpx auto;
		border-radius: 12rpx;
	}

	.refund-remark {
		width: 80%;
		padding: 20rpx;
		border: 1rpx solid #ddd;
		font-size: 28rpx;
		line-height: 1.5;
		color: #333;
		margin: 30rpx auto;
		border-radius: 12rpx;
	}

	.operation-content .btns {
		border-top: 1px solid #ddd;
	}

	.operation-btn {
		width: 100%;
		height: 88rpx;
		color: #333;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;

	}

	.operation-btn+.operation-btn {
		border-left: 1px solid #ddd;
	}
</style>
