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

		<view class="order-status">
			{{['待付款','待使用','已完成','已取消','已退款','退款中','退款拒绝'][info.state-1]}}
			<!-- {{info.is_pay == 1?info.cancel_status==2?'已退款':'已支付':'待支付'}} -->
		</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.store_id}}</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_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.type == 1?'餐桌':'商品'}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center">
					<view class="title-block required">
						<text>用户ID：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.user_id}}</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.pay_type == 1?'微信':info.pay_type == 2?'支付宝':info.pay_type == 3?'余额':'线上支付'}}
						</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.money}}</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.create_time}}</view>
					</view>
				</view>
				<view class="cell flex flex-y-center" v-if="info.pay_time">
					<view class="title-block required">
						<text>支付时间：</text>
					</view>
					<view class="desc">
						<view class="info" style="color:#FEAF44">{{info.pay_time}}</view>
					</view>
				</view>
				<!-- 预约餐桌 -->
				<template v-if="info.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.type_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.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">{{info.time}}</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.name}} {{info.tel}}</view>
						</view>
					</view>
				</template>
				<!-- 预约商品 -->
				<template v-if="info.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.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.attr}}</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<view class="page-block" v-if="info.formlist && info.formlist.length>0">
			<view class="page-title-block">
				<view class="title">表单信息</view>
			</view>
			<view class="content">
				<view class="cell flex flex-y-center" v-for="(item,index) in info.formlist" :key="id">
					<view class="title-block required">
						<text>{{item.key}}：</text>
					</view>
					<view class="desc">
						<image src="item.value" v-if="item.type == 'uploadImg'" mode="aspectFill"
							style="width: 200rpx;height:200rpx;" @click="showImg(item.value)"></image>
						<view class="info" style="color:#FEAF44" v-else>{{item.value}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btm-btn-block-content">
			<view class="btm-btn-block">
				<view class="btn btn11" @click="yyorderhexiao" v-if="info.state == 2"> 核销 </view>
				<view class="btn btn11" @click="yyorderqueren" v-if="info.state == 6"> 退款 </view>
				<view class="btn btn12" @click="yyorderjujue" v-if="info.state == 6"> 拒绝退款 </view>
			</view>
		</view>
	</view>
</template>

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

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

		methods: {
			// 预约订单核销
			yyorderhexiao() {
				uni.showModal({
					content: '确认核销该订单',
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: 'Smdcshop/yyorderhexiao',
								data: {
									id: this.id
								}
							}).then(res => {
								this.getData()
								this.updatePrePage()
							})
						}
					}
				})

			},
			// 预约订单退款
			yyorderqueren() {
				uni.showModal({
					content: '确定退款',
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: 'Smdcshop/yyorderqueren',
								data: {
									admin_id: this.info.admin_id,
									id: this.id
								}
							}).then(res => {
								this.getData()
								this.updatePrePage()
							})
						}
					}
				})

			},
			// 预约订单退款拒绝
			yyorderjujue() {
				uni.showModal({
					content: '确定拒绝退款',
					success: (r) => {
						if (r.confirm) {
							this.request({
								url: 'Smdcshop/yyorderjujue',
								data: {
									id: this.id
								}
							}).then(res => {
								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/yyorderdetails',
					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;

	}
</style>
