<template>
	<view>
		<view class="tabs">
			<view class="tab" :class="{selected:index==active}" @click="active=index" v-for="(item,index) in orderType"
				:key='index'>
				{{item}}
			</view>
		</view>
		<loadSke :loading='orderLoading' :list="orderList">
			<view class="order-item ios-bottom" v-for="(item,index) in orderList" :key='item.outTradeNo' @click="goOrderDes(item)">
				<image class="img" :src="item.goodsPictureUrl" mode="aspectFit"></image>
				<view class="des-box">
					<text>订单名称：{{item.orderName}}</text>
					<text>订单日期：{{item.createTime}}</text>
					<text>订单状态：{{item.orderStatus}}</text>
					<text>订单价格：{{item.total}}</text>
				</view>
				<m-icon class='icon' type="arrow-right"></m-icon>
			</view>
		</loadSke>
	</view>
</template>

<script>
	export default {
		data: () => ({
			active: null,
			orderType: [
				'全部订单',
				'等待发货',
				'交易完成',
				'退款/售后'
			],
			orderLoading: true,
			orderList: {},
		}),
		onLoad: function(option) {
			this.active = option.active
		},
		watch: {
			active() {
				this.init()
			}
		},
		methods: {
			async init() {
				this.orderLoading = true
				let orderListRes = await this.$api.order.getOrderList({
					orderStatus: this.active == 0 ? null : this.active,
					pageNum: 1,
					pageSize: 10
				})
				this.orderList = orderListRes.rows
				this.orderLoading = false
			},
			goOrderDes(item) {
				let pageMap = new Map([
					['1', () => {
						this.$utils.goPage(`/pages/cinema/orderdes?outTradeNo=${item.outTradeNo}`)
					}],
					['2', () => {
						this.$utils.goPage(`/pages/fulu/orderdes?outTradeNo=${item.outTradeNo}`)
					}],
					['3', () => {
						this.$utils.goPage(`/pages/phoneBill/orderdes?outTradeNo=${item.outTradeNo}`)
					}],
				])

				pageMap.get(item.goodsType)()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 20rpx;

		.tab {
			padding: 20rpx 0;
		}

		.selected {
			position: relative;

			&::after {
				content: '';
				width: 80rpx;
				height: 6rpx;
				background-color: red;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.ios-bottom {
		padding-bottom: calc(10px + env(safe-area-inset-bottom)/2);
	}

	.order-item {
		background-color: #FFFFFF;
		margin-top: 10rpx;
		padding: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: stretch;
		position: relative;

		&:nth-child(1) {
			margin-top: 20rpx;
		}

		.img {
			width: 112rpx;
			height: 164rpx;
			margin-right: 50rpx;
		}

		.des-box {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text {
				font-size: 26rpx;
				font-weight: 400;
				color: #666666;
			}

			text:nth-child(2) {
				color: #0F0404 !important;
			}
		}

		.icon {
			position: absolute;
			right: 30rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>
