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

		<view class="order-status">
			<template v-if="info.info.is_refund == 1">退款中</template>
			<template v-else-if="info.info.is_refund == 2">退款成功</template>
			<template v-else-if="info.info.order_status == 1">待支付</template>
			<template v-else-if="info.info.order_status == 2">拼团中</template>
			<template v-else-if="info.info.order_status == 3">
				<template v-if="info.info.status == 1">
					<template v-if="info.info.send_type == 1">制作中</template>
					<template v-else-if="info.info.send_type == 2">制作中</template>
					<template v-else-if="info.info.send_type == 3">待发货</template>
				</template>
				<template v-else-if="info.info.status == 2">
					<template v-if="info.info.send_type == 1">待送达</template>
					<template v-else-if="info.info.send_type == 2">待取货</template>
					<template v-else-if="info.info.send_type == 3">待收货</template>
				</template>
				<template v-if="info.info.status == 3">已完成</template>
			</template>
			<template v-else-if="info.info.order_status == 4">拼团失败</template>
			<template v-else-if="info.info.order_status == 5">已取消</template>
		</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.info.order_no}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center" v-if="info.info.order_status == 3 && info.info.zt_num">
					<view class="title-block required">
						<text>取餐码：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.info.zt_num}}</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">
							<template v-if="info.info.pay_type == 1">微信支付</template>
							<template v-else-if="info.info.pay_type == 2">支付宝支付</template>
							<template v-else-if="info.info.pay_type == 3">余额支付</template>
						</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.info.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">
							<template v-if="info.info.send_type == 1">外卖</template>
							<template v-else-if="info.info.send_type == 2">自提</template>
							<template v-else-if="info.info.send_type == 3">快递</template>
						</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.info.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.info.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.info.address}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center" v-if="info.info.user_remark">
					<view class="title-block required">
						<text>用户备注：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.info.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.info.create_time}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center" v-if="info.info.order_status > 1">
					<view class="title-block required">
						<text>支付时间：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.info.pay_time}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center" v-if="info.info.send_type == 1">
					<view class="title-block required">
						<text>配送方式：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">
							<template v-if="info.info.is_dd == 0">未开始配送</template>
							<template v-if="info.info.is_dd == 1">达达配送</template>
							<template v-else-if="info.info.is_dd == 2">商家配送</template>
							<template v-else-if="info.info.is_dd == 3">松鼠屋配送</template>
						</view>
					</view>
				</view>
				<view class="cell flex flex-y-center" v-if="info.info.logistic">
					<view class="title-block required">
						<text>配送平台：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.info.logistic}}</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.info.express_price}}</view>
					</view>
				</view>
				<template v-if="info.info.send_type == 2">
					<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.info.zt_time}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center" v-if="info.info.status == 3">
						<view class="title-block required">
							<text>确认自提时间：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.info.success_time}}</view>
						</view>
					</view>
				</template>
				<template v-if="info.info.send_type == 3">
					<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.info.express || ''}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center" v-if="info.info.status == 3">
						<view class="title-block required">
							<text>快递单号：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.info.express_no || ''}}</view>
						</view>
					</view>
				</template>
				<template v-if="info.info.is_refund == 2">
					<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.info.refund_price}}</view>
						</view>
					</view>
					<view class="cell flex flex-y-center" v-if="info.info.status == 3">
						<view class="title-block required">
							<text>退款时间：</text>
						</view>
						<view class="desc">
							<view class="info" style="color:#FEAF44">{{info.info.refund_time}}</view>
						</view>
					</view>
				</template>
				<template v-if="info.info.is_refund > 0">
					<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.info.refund_msg || ''}}</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>
					<view class="tr" v-for="(item,index) in info.goods" :key="id">
						<view class="td goods-name">{{item.goods_name || ''}}</view>
						<view class="td goods-name">{{item.spec || ''}}</view>
						<view class="td goods-name">{{item.num || ''}}</view>
						<view class="td goods-name">{{item.price || ''}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="btm-btn-block-content">
			<view class="btm-btn-block">
				<template v-if="info.info.is_refund == 1">
					<view class="btn btn11" @click="next(100,'确定要退款吗')"> 同意退款 </view>
					<view class="btn btn11" @click="next(101,'确定要拒绝退款吗')"> 拒绝退款 </view>
				</template>
				<view class="btn btn11" @click="next(99,'确定要删除该订单记录吗')" v-else-if="info.info.order_status == 1"> 删除
				</view>
				<view class="btn btn11" @click="next(100,'确定要退款吗')" v-else-if="info.info.order_status == 2"> 退款 </view>
				<template v-else-if='info.info.order_status == 3'>
					<!-- 外卖 -->
					<template v-if="info.info.send_type == 1">
						<view class="btn btn11" @click="next(2,'确定已制作好吗')" v-if="info.info.status == 1"> 配送 </view>
						<view class="btn btn11" @click="next(3,'确定已配送成功吗')" v-else-if="info.info.status == 2"> 确认送达
						</view>
					</template>
					<!-- 自提 -->
					<template v-else-if="info.info.send_type == 2">
						<view class="btn btn11" @click="next(2,'确定已制作好吗')" v-if="info.info.status == 1"> 已做好 </view>
						<view class="btn btn11" @click="next(3,'确定客户已到店自提吗')" v-else-if="info.info.status == 2"> 确认自提
						</view>
					</template>
					<!-- 快递 -->
					<template v-else-if="info.info.send_type == 3">
						<view class="btn btn11" @click="showExpress" v-if="info.info.status == 1"> 发货 </view>
						<view class="btn btn11" @click="next(2,'确认用户已收到货吗')" v-else-if="info.info.status == 2"> 确认收货
						</view>
					</template>
					<!--  -->
					<view class="btn btn11" @click="next(100,'确定要退款吗')" v-else-if="info.info.status < 3"> 退款 </view>
				</template>
				<view class="btn btn11" @click="next(100,'确定要退款吗')" v-else-if="info.info.order_status == 4"> 退款 </view>



			</view>
		</view>
		<uni-popup ref="express" type="center">
			<view class="operation-content">

				<view class="title">快递发货</view>
				<input type="text" :value="express" placeholder="快递公司" class="refund-amount"
					@input="onInput($event,'express')" />
				<input type="text" :value="express_no" placeholder="快递单号" class="refund-amount"
					@input="onInput($event,'express_no')" />
				<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>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				URL: getApp().globalData.URL,
				id: "",
				info: {},

				express: "",
				express_no: ''
			}
		},

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

		methods: {
			//操作 status 100：同意退款，101：拒绝退款，3：确认用户已收到货，99：删除该订单，3：确认送到，确认自提，2：配送
			next(status, msg) {
				uni.showModal({
					content: `${msg}`,
					success: r => {
						if (r.confirm) {
							this.request({
								url: 'smdcshop/collage_editOrder',
								data: {
									id: this.id,
									status,
								}
							}).then(res => {
								this.getData()
								this.updatePrePage()
							})
						}
					}
				})
			},

			showExpress() {
				this.express = ""
				this.express_no = ""
				this.$refs.express.open()
			},
			fahuo() {

				this.request({
					url: 'smdcshop/collage_editOrder',
					data: {
						id: this.id,
						status:2,
						express:this.express,
						express_no:this.express_no
					}
				}).then(res => {
					this.getData()
					this.updatePrePage()
				})

			},
			onInput(e, name) {
				console.log(e, name)
				this[name] = e.detail.value
			},

			closePop(name) {
				this.$refs[name].close()
			},

			// 更新上个页面
			updatePrePage() {
				let pages = getCurrentPages()
				if (pages.length > 1) {
					let prePage = pages[pages.length - 2]
					if (prePage.route == 'saomaDiancan/order/pintuanOrder') {
						prePage.$vm.getData(1)
					}
				}
			},
			showImg(src) {
				uni.previewImage({
					urls: [src]
				})
			},

			getData() {
				this.request({
					url: 'smdcshop/collage_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>
