<!-- 电影订单 -->

<template>
	<view class="min-body">
		<u-gap height="20rpx"></u-gap>
		<view class="min-search">
			<view class="search-wrap">
				<input type="text" placeholder="输入订单编号" v-model="OrderCode">
				<view class="search" @click="OrderSearch()">查找</view>
			</view>
		</view>
		<u-gap height="20rpx"></u-gap>
		<view class="white-box">
			<view>
				<view class="big-333 bold">有效订单</view>
				<u-gap height="30rpx"></u-gap>
				<view class="flbtn" style="padding-bottom: 30rpx;">
					<OrderStatus @commission="getOrderlist" :un_commission_count="InforData['un_commission_total']" :commission_count="InforData['commission_total']"></OrderStatus>
					<!-- <view class="wb-box" :class="OrderType === 0? 'bg':''" @tap="getOrderlist(0)">
						<view class="big-666 ">
							待结算{{InforData['un_commission_total']}}单
						</view>
					</view> -->
					<!-- <view style="width: 30rpx;">
					</view> -->
					<!-- <view class="wb-box" :class="OrderType === 1? 'bg':''" @tap="getOrderlist(1)">
						<view class="big-666 ">
							已结算{{InforData['commission_total']}}单
						</view>
					</view> -->
				</view>
				<u-gap bgColor="#EDEDED" height="2rpx"></u-gap>
			</view>
			
			<view class="sp-box" v-for="(item,index) in InforList" :key="index" @click="ToDetail(item)">
				<view class="flbtn" style="padding: 20rpx 0;">
					<view class="lit-666">
						下单时间：{{item.create_time}}
					</view>
					<view class="lit-333" :class="OrderStatus[item['status']]">
						{{item['status_name']}}
					</view>
				</view>
				<view class="basic-data flex">
					<view style="width: 100%;">
						<view class="form-title">{{item.movieName}}</view>
						<u-gap height="10rpx"></u-gap>
						<view class="lit-999">
							场次：{{item.showTime}}
						</view>
						<view class="lit-999 flex flex-space-between">
							<view class="number">
								数量: {{item.amount}}张
							</view>
							<view class="money">
								<view :class="OrderStatus[item['status']]">
									<text>{{item['status'] === 0? '需':'已'}}</text>
									付款金额: ￥{{_amount(item.pay_price)}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 价格卡片 -->
				<view class="prive-card">
					<view class="prive-item">
						<view class="text">原价</view>
						<view class="number">￥{{_amount(item.price)}}</view>
					</view>
					<view class="prive-item">
						<view class="text">补贴卡抵扣</view>
						<view class="number">￥{{_amount(item.deduction_price)}}</view>
					</view>
					<view class="prive-item">
						<view class="text">预估佣金</view>
						<view class="number">￥{{item.self_commission}}</view>
					</view>
				</view>
				
				<!-- 处理按钮 -->
				<view class="flbtn">
					<view class="wb-boxs">
						<view class="btn-cancel" v-if="item['status'] === 0" @tap.stop="cancel(item.orderNo)">
							取消订单
						</view>
					</view>
					<view style="width: 30rpx;"></view>
					<view class="wb-boxs" v-if="item['status'] === 0">
						<view class="btn-buy">
							立即付款
						</view>
					</view>
					<view class="wb-boxs" v-if="item['status'] !== 0">
						<view class="btn-chat" @tap.styop="service">
							联系客服
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import mixin from '@/static/js/mixin/mixin.js';
	import film from '@/static/js/mixin/film.js';
	import { getFilmOrderList, getCancelPay } from '@/request/film/index.js';
	let self;
	export default {
		mixins: [mixin, film],
		data() {
			return {
				// 订单编号
				OrderCode: "", 
				// 订单类型: 1.已结算  0.未结算
				OrderType: '',
				// 0:待支付(橙)  1:出票成功(绿)  3:出票失败(红)  4:已取消(灰)
				OrderStatus: [
					'wait-buy',
					'now-buy',
					'now-buy',
					'out-buy',
					'cancel-buy'
				],
				dtp: 0,
				lock: true,
				// 所输入订单号
				order_sn: '',
				// 分页
				page: 1,
				// 筛选条件
				// 1已结算
				// 0待结算
				commission_type: '',
				// 当前数据总条数
				total: 0,
				// 当前页面列表数据
				InforList: [],
				// 当前页面展示数据
				InforData: {},
				
			}
		},
		
		onLoad() {
			this.getOrderlist();
		},
		
		methods: {
			/**
			 * @获取订单列表
			 * @param {orderNo} 订单号
			 * @param {type} 订单类型
			 * */
			getOrderlist(index) {
				uni.showLoading({
					title: '加载中'
				});
				// if (!index) {
				// 	index = 0;
				// }
				this.OrderType = index;
				const params = {
					type: this.OrderType,
					orderNo: this.OrderCode
				}
				getFilmOrderList(params).then((res) => {
					this.InforList = res.data.data.data;
					this.InforData.un_commission_total = res.data.un_commission_count; // 待结算
					this.InforData.commission_total = res.data.commission_count;  // 已结算
					uni.hideLoading();
				});
			},
			
			// 订单详情
			ToDetail(item) {
				uni.navigateTo({
					url: `./filmDetail?orderNo=${item.orderNo}`
				})
			},

			/**
			 * @搜索
			 * */
			OrderSearch() {
				this.getOrderlist(this.OrderType)
			},
			
			/**
			 * @取消支付
			 * @param {orderNo} 订单号
			 * */
			cancel(orderNo) {
				const params = {
					orderNo,
				}
				console.log(params)
				getCancelPay(params).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: res.msg,
						});
						// 取消之后刷新
						this.getOrderlist()
					} else {
						uni.showToast({
							title: res.msg,
						});
					}
				})
			},
			
			/**
			 * @点击类型筛选
			 * */
			filterFun(type) {
				this.OrderType = type
				this.getOrderlist();
			},
			
			/**
			 * @跳转客服
			 * */
			service() {
				window.location.href = DYPCHAT;
				return
				uni.openCustomerServiceChat({
					extInfo: {
						url: DYPCHAT,
					},
					corpId: 'ww4f46b491a045158c',
			
					success(e) {
						// console.log(e)
					},
					fail(e) {
						// console.log(e)
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	.wait-buy {
		color: #FF7700;
	}
	.now-buy {
		color: #07C160;
	}
	.cancel-buy {
		color: #999999;
	}
	.out-buy {
		color: #DF2828;
	}
	
	.min-search {
		height: 60rpx;
		.search-wrap {
			margin: 0rpx 24rpx;
			position: relative;
			input {
				width: 100%;
				height: 60rpx;
				background-color: #F5F5F5;
				border-radius: 30rpx;
				border: 2rpx solid #FE7F2F;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
			}
			image {
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				top: 16rpx;
				left: 250rpx;
			}
			.search {
				width: 132rpx;
				height: 56rpx;
				background: linear-gradient(145deg, #FFB65C 0%, #FE7F2F 100%);
				border-radius: 60rpx;
				border: 4rpx solid #FFFFFF;
				text-align: center;
				line-height: 112rpx;
				color: #FFFFFF;
				position: absolute;
				right: 2rpx;
				top: 2rpx;
				border: 2rpx solid #FFFFFF;
				
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 56rpx;
			}
		}
	}
	
	.white-box {
		min-height: calc(100vh - 100rpx);
		background-color: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx;
	}

	.wb-box {
		width: 100%;
		text-align: center;
		border: 2rpx solid #999999;
		border-radius: 20rpx;
		padding: 40rpx 0;
	}
	
	.bg {
		background-color: #FF7700;
		border: 2rpx solid #FFFFFF;
		.big-666 {
			color: #FFFFFF;
		}
	}
	
	// 按钮样式
	.wb-boxs {
		width: 100%;
		text-align: center;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.btn-cancel {
			height: 84rpx;
			border-radius: 20rpx;
			border: 2rpx solid #999999;
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #000000;
			line-height: 32rpx;
			line-height: 84rpx;
			text-align: center;
		}
		.btn-buy {
			height: 84rpx;
			background: #FF7700;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			border-radius: 20rpx;
			line-height: 84rpx;
			text-align: center;
		}
		.btn-chat {
			height: 84rpx;
			background: #1F6EF1;
			box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
			font-size: 24rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			border-radius: 20rpx;
			line-height: 84rpx;
			text-align: center;
		}
	}
	

	.search-btn {
		background-color: #fff;
		margin: 10rpx 15rpx;
		border-radius: 40rpx;
		border: 2rpx solid #FE7F2F;
	}
	
	.sp-box {
		color: red;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #EDEDED;
	}
	.basic-data {
		margin-bottom: 10px;
		.form-title {
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			line-height: 4r0px;
		}
	}
	
	.prive-card {
		width: 100%;
		height: 128rpx;
		background-image: url("https://img.agrimedia.cn/chwl%2Fv2%2F20220920-171302.png");
		background-repeat: no-repeat;
		background-size: contain;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.prive-item {
			text-align: center;
			.text {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
			}
			.number {
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
				line-height: 40rpx;
			}
		}
	}
</style>
