<template>
	<view>
		<!-- 切换平台 -->
		<view class="line tabs">
			<view :class="'topLine ' + (swith_area == index ? 'active' : ' ')" :data-index="index" @tap="swith_tab"
				v-for="(item, index) in switch_space" :key="index">
				{{ item }}
			</view>
		</view>

		<view v-if="order_list.length == 0" class="no_content">
			<image class="img" src="/static/images/ui/none.png" />
			<view class="warn">还未查询到您的观看记录</view>
		</view>

		<view v-else class="order_list" :data-order_no="item.order_no" @tap="detail" v-for="(item, index) in order_list"
			:key="index">
			<view class="order_status_info">
				<view class="title">
					<text style="font-weight: bold">订单号：</text>
					{{ item.order_no }}
				</view>
				<view :class="'value ' + (item.order_status == 2 ? 'value1' : item.order_status == 1 ? 'value2' : '')">
					{{ order_status[item.order_status] }}
				</view>
			</view>

			<view class="_top">
				<image class="img" :src="item.order_pic" />
				<view class="info">
					<view class="title">{{ item.show_name }}</view>
					<view class="_desc">
						<view class="left_inf">
							<view class="_time">{{ item.show_date }}</view>
							<view class="_field">{{ item.city_name }}｜{{ item.theater_name }}</view>
						</view>
						<view class="right_inf">
							<view class="_text">实付款</view>
							<view
								:class="'_amount ' + (item.order_status == 2 || item.order_status == 1 ? '_amount1' : '_amount2')">
								<view style="font-size: 32rpx">¥</view>
								<view style="font-weight: bold">{{ item.order_price }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="item.order_status == 2" class="_footer">
				<view class="_cancel" :data-order_no="item.order_no" @tap.stop.prevent="cancel">取消订单</view>
				<view class="_confirm" :data-order_no="item.order_no" @tap.stop.prevent="pay">立即支付</view>
			</view>
			<view v-if="item.order_status==12||item.order_status==15" class="_footer">
			   <view class="_confirm" :data-order_no="item.order_no" @tap.stop.prevent="dele">删除订单</view>
			   </view>
		</view>

		<view class="more" v-if="order_list.length >= 6 && !has_more" @tap="goTop">别滑了，已经到底啦～</view>
	</view>
</template>

<script>
	// pages/my_order/my_order.js
	import {
		http,
		login_check
	} from '../../../utils/util';
	export default {
		data() {
			return {
				order_status: [null, '已支付', '待支付', '客服取消', null, null, '已打票', null, null, '重打申请中', '重打申请通过', '重打申请不通过',
					'已完成', null, null, '已过期'
				],
				switch_space: ['麻花官网', '第三方平台'],
				swith_area: 0,
				page: 1,

				order_list: {
					length: 0
				},

				has_more: '',
			
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (login_check(1)) {
				this.init_order(1);
			}
			uni.$on('initData',() => {
					this.init_order(1);
				})
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.has_more) {
				uni.showNavigationBarLoading(); //在标题栏中显示加载图标

				let page = this.page + 1;
				let _data = {
					type: this._type,
					page
				};
				http('/api/v1/order-list', 'get', _data).then((res) => {
					uni.hideNavigationBarLoading(); //完成停止加载图标

					this.setData({
						order_list: this.order_list.concat(res.order_list),
						has_more: res.has_more,
						page
					});
				});
			}
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			//回到顶部
			goTop: function(e) {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0
					});
				}
			},

			swith_tab: function(e) {
				let swith_area = e.currentTarget.dataset.index;
				this.init_order(swith_area + 1);
				this.setData({
					swith_area
				});
			},

			init_order(type) {
				http('/api/v1/order-list', 'get', {
					type
				}).then((res) => {
					this.setData({
						order_list: res.order_list,
						_type: res.type,
						has_more: res.has_more
					});
				});
			},

			detail(e) {
				uni.navigateTo({
					url: '/pages/user/order_detail/order_detail?order_no=' + e.currentTarget.dataset.order_no +
						'&_type=' + this._type
				});
			},

			pay(e) {
				uni.navigateTo({
					url: '/pages/user/order_detail/order_detail?order_no=' + e.currentTarget.dataset.order_no +
						'&_type=' + this._type
				});
			},

			cancel(e) {
				var that = this;
				uni.showModal({
					content: '是否取消订单',

					success(res) {
						if (res.confirm) {
							http('/api/v1/order-cancel', 'post', {
								order_no: e.currentTarget.dataset.order_no
							}).then((res) => {
								uni.showToast({
									title: '取消订单成功！',
									duration: 2000
								});
								that.init_order(1);
							});
						}
					}
				});
			},
		dele(e) {
			console.log(e);
		    var that = this
		    uni.showModal({
		      content: '订单删除不可恢复，是否删除?',
		      success(res) {
		        if (res.confirm) {
		          http("/api/v1/order-delete", "get", {
		            order_no: e.currentTarget.dataset.order_no
		          }).then(res => {
		            uni.showToast({
		              title: '删除成功！',
		              duration: 1000
		            })
		            setTimeout(() => {
		              that.init_order(1)
		            }, 200);
		          })
		        }
		      }
		    })
		  },
		},
	};
</script>
<style>
	/* pages/my_order/my_order.ttss */
	.line {
		display: flex;
		margin-bottom: 20rpx;
	}

	.tabs {
		background-color: #fff;
		font-size: 14px;
	}

	.line .topLine {
		width: 50%;
		text-align: center;
		margin: 20rpx;
		color: #7b7b7b;
	}

	.line .topLine.active {
		position: relative;
		color: #181818;
		font-weight: bold;
	}

	.line .topLine.active:after {
	content: ' ';
	width: 1rem;
	height: 0.12rem;
	/* #ifdef MP-ALIPAY */
	width: 0.4rem;
	height: 0.04rem;
	/* #endif */
	background: #fff;
	position: absolute;
	/* bottom: -0.1rem; */
	bottom: -0.2rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: #ff446b;
	border-radius: 0.12rem;
	}

	.order_list {
		margin: 20rpx 30rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0px 2px 4px 0px rgba(140, 137, 137, 0.2);
	}

	.order_list .order_status_info {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #dddddd;
	}

	.order_list .title {
		font-size: 24rpx;
		white-space: nowrap;
	}

	.order_list .value {
		font-weight: bold;
		font-size: 24rpx;
		color: #999999;
	}

	.order_list .value1 {
		color: #ff446b;
	}

	.order_list .value2 {
		color: #22c0ff;
	}

	.split-line {
		position: relative;
		flex: 0 0 0;
		border-top: 2rpx dashed #eee;
	}

	._top {
		display: flex;
		padding: 20rpx 30rpx;
	}

	._top .img {
		background: #d8d8d8;
		border-radius: 16rpx;
		width: 148rpx;
		height: 222rpx;
		flex-shrink: 0;
	}

	._top .info {
		padding-left: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	._top .info .title {
		font-size: 28rpx;
		font-weight: bold;
		white-space: normal;
	}

	._top .info .text {
		font-size: 20rpx;
	}

	._top .info .text2 {
		font-size: 20rpx;
		margin-top: 8rpx;
		color: #7b7b7b;
	}

	._top .info .line image {
		width: 28rpx;
		height: 28rpx;
	}

	._top .info .line text {
		margin: 0 20rpx 0 10rpx;
	}

	._bottom {
		padding: 20rpx 30rpx;
	}

	._bottom ._ticket {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	._bottom ._ticket .sit_info {
		font-weight: bold;
	}

	._bottom ._ticket .sit_info1 {
		font-size: 24rpx;
		color: #7b7b7b;
		width: 33%;
	}

	._desc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	._desc .left_inf {
		font-size: 20rpx;
	}

	._desc .left_inf ._field {
		color: #7b7b7b;
	}

	._desc .right_inf ._text {
		text-align: end;
		font-size: 12px;
		color: #181818;
	}

	._desc .right_inf ._amount {
		font-size: 44rpx;
		display: flex;
		align-items: center;
	}

	._desc .right_inf ._amount1 {
		color: #ff1d42;
	}

	._desc .right_inf ._amount2 {
		color: #999999;
	}

	.order_list ._footer {
		display: flex;
		border-top: 2rpx dashed #dddddd;
		justify-content: flex-end;
		padding: 20rpx 0;
		margin: 0 30rpx;
		font-size: 32rpx;
	}

	.order_list ._footer ._cancel {
		color: #999999;
	}

	.order_list ._footer ._confirm {
		font-weight: bold;
		padding-left: 100rpx;
		color: #ff1d42;
	}

	.more {
		color: #7b7b7b;
		text-align: center;
		margin: 70rpx 0 120rpx 0;
	}
</style>
