<!-- 订单详情 -->

<template>
	<view class="content">
		<view class="Order-infor">
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					电影
				</view>
				<view class="Order-infor-term-value">
					{{filmData.movieName}}
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					购买数量
				</view>
				<view class="Order-infor-term-value">
					{{filmData.amount}}张
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					场次
				</view>
				<view class="Order-infor-term-value">
					{{filmData.create_time}}
				</view>
			</view>
			
			<!-- 取票码 -->
			<view class="Pcode" v-if="filmData['status'] === 2">
				<view class="Pcode-text">
					取票码
				</view>
				<view class="Pcode-image">
					<!-- 背景 -->
					<image class="Pcode-bg" src="https://img.agrimedia.cn/chwl%2Fv2%2Fcode-bg.png"></image>
					<!-- 二维码 -->
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
						<image class="Pcode-img" :src="filmData.code_img"></image>
					</scroll-view>
					<!-- 取票码 -->
					<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
						<view class="scroll-view-item_H uni-bg-red" v-for="(item, index) in filmData.code" :key="item.id">
							<view class="Pcode-title">取票号：{{item.ticket_code}}</view>
							<view class="Pcode-sub">验证码：{{item.verification_code}}</view>
						</view>
						<!-- ticket_code  取票码   验证码verification_code -->
					</scroll-view>
					<view class="tips">
						左右滑动查看取票码和取票号
					</view>
				</view>
			</view>
			
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					订单状态
				</view>
				<view class="Order-infor-term-value">
					<!-- 0:待支付  1:待出票  2:出票成功  3:出票失败  4:已取消-->
					<text :class="OrderStatus[filmData['status']]">{{filmData['status_name']}}</text>
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					订单号
				</view>
				<view class="Order-infor-term-value">
					{{filmData.orderNo}}
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					原价
				</view>
				<view class="Order-infor-term-value">
					￥{{this._amount(filmData.price)}}
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					补贴卡抵扣金额
				</view>
				<view class="Order-infor-term-value">
					￥{{this._amount(filmData.deduction_price)}}
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					预估佣金
				</view>
				<view class="Order-infor-term-value">
					￥{{filmData.commission_total}}
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					需付款金额
				</view>
				<view class="Order-infor-term-value">
					￥{{this._amount(filmData.pay_price)}}
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					影院地址
				</view>
				<view class="Order-infor-term-value">
					{{filmData.cinemaAddress}}
				</view>
			</view>
			<view class="Order-infor-term">
				<view class="Order-infor-term-label">
					手机号
				</view>
				<view class="Order-infor-term-value">
					{{filmData.phoneNumber}}
				</view>
			</view>
		</view>
		<view class="block_11" v-if="filmData['status'] == 0">
			<button bindtap="onClick" class="button_1" @tap="cancel">
				<text lines="1" class="text_26">取消支付</text>
			</button>
			<button bindtap="onClick" class="button_5" @tap="pay">
				<text lines="1" class="text_30">立即支付</text>
			</button>
		</view>
	</view>
</template>

<script>
	import mixin from '@/static/js/mixin/mixin.js';
	import { getFilmOrderListDetail, getCancelPay } from '@/request/film/index.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				show: true,
				orderNo: '',  // 订单号
				filmData: '',
				// 0:待支付(橙)  1:待出票(橙)  2:出票成功(绿)  3:出票失败(红)  4:已取消(灰)
				OrderStatus: [
					'wait-buy',
					'now-buy',
					'now-buy',
					'out-buy',
					'cancel-buy'
				],
				
				old: {
					scrollTop: 0
				}
			};
		},
		onLoad(option) {
			this.orderNo = option.orderNo;
		},
		created() {
			this.getOrderDetail()
		},
		methods: {
			/**
			 * @获取订单详情
			 * @param {orderNo} 订单号
			 * */
			getOrderDetail() {
				const params = {
					orderNo: this.orderNo,
				}
				getFilmOrderListDetail(params).then(res => {
					this.filmData = res.data
					console.log(res)
				})
			},
			
			/**
			 * @取消支付
			 * @param {orderNo} 订单号
			 * */
			cancel() {
				const params = {
					orderNo: this.orderNo,
				}
				getCancelPay(params).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: res.msg,
						});
						// 取消之后退页
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.showToast({
							title: res.msg,
						});
					}
					
				})
			},
			
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			
			/**
			 * @支付
			 * */
			pay() {
				this.$Payment.Repayment({
					order_sn:this['orderNo'],
					// 点餐订单类型为4直接写死
					type:6,
					redirect_url:`/pages/film/filmDetail?orderNo=${this['orderNo']}`
				});
				// this.payment({
				// 	order_sn:this['filmData']['orderNo'],
				// 	type:4,
				// 	redirect_url:'/pages/film/filmForm'
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 32rpx;
	}

	.state {
		width: 100%;
		height: 237rpx;
		position: relative;
	}
	.Order-infor-term-label {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 32rpx;
	}
	.Pcode {
		position: relative;
		height: 600rpx;
		.Pcode-text {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 32rpx;
		}
		.Pcode-image {
			position: relative;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
			.Pcode-bg {
				width: 460rpx;
				height: 560rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: 0 auto;
			}
			.Pcode-img {
				width: 340rpx;
				height: 340rpx;
				border-radius: 5px;
				margin-top: 20rpx;
				image {
					width: 340rpx;
					height: 340rpx;
				}
			}
			.Pcode-title {
				font-size: 26rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #666666;
				line-height: 40rpx;
				text-align: center;
			}
			.Pcode-sub {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 600;
				color: #666666;
				line-height: 32rpx;
				text-align: center;
			}
		}
	}
	.Order-infor-term-value {
		font-size: 26rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40rpx;
		.wait-buy {
			color: #FF7700;
		}
		.now-buy {
			color: #07C160;
		}
		.cancel-buy {
			color: #999999;
		}
		.out-buy {
			color: #DF2828;
		}
	}
	.Order-infor {
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 15rpx 32rpx;

		&-term {
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-label {
				color: #666666;
				font-size: 24rpx;
			}

			&-value {
				color: #333333;
				font-size: 28rpx;
			}

			// 取消
			&-value-paid {
				color: #FF7700;
			}

			// 待支付
			&-value-cancel {
				color: #999990;
			}

			// 完成
			&-value-complete {
				color: #41C420;
			}

			// 退款
			&-value-refund {
				color: #DF2828;
			}
		}
	}


	.block_11 {
		width: 100%;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;
	}

	.button_1 {
		background-color: rgba(222, 222, 222, 1.000000);
		border-radius: 19rpx;
		display: flex;
		flex-direction: column;
		padding: 21rpx 98rpx 21rpx 98rpx;
	}

	.text_26 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 27rpx;
		font-family: PingFangSC-Semibold;
		text-align: center;
		white-space: nowrap;
		line-height: 38rpx;
		border: none !important;
	}

	.button_5 {
		background-color: rgba(255, 119, 0, 1.000000);
		border-radius: 19rpx;
		display: flex;
		flex-direction: column;
		padding: 21rpx 98rpx 21rpx 98rpx;
	}

	.text_30 {
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 27rpx;
		font-family: PingFangSC-Semibold;
		text-align: center;
		white-space: nowrap;
		line-height: 38rpx;
	}
	
	.scroll-Y {
		height: 300rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		width: 460rpx;
		text-align: center;
		margin: 0 auto;
	}
	.tips {
		position: absolute;
		width: 100%;
		text-align: center;
		color: #b3b1b5;
		text-decoration:underline;
		font-size: 14rpx;
		z-index: 99;
		margin-top: 20rpx;
	}
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>
