<template>
	<view class="mygift">
		<custom-nav :title="pageTitle"></custom-nav>
		<view class="content">
			<view class="nav">
				<view v-for="(item, index) in typeList" :key="index" class="item" :class="{ active: MIXIN_ActiveIndex === index }" @tap="switchSwiper(index)">{{ item }}</view>
				<view class="moveBar" :style="{ left: MIXIN_MoveBarLeft + 'px', width: 100 / typeList.length + '%' }"><text></text></view>
			</view>
			<view class="swiper-area">
				<pulldown-refresher ref="pulldownRefresher" @pulldownRefresh="MIXIN_pulldownrefresh">
					<swiper class="swiper" :current="MIXIN_NowIndex" :duration="234" @transition="MIXIN_transition" @change="MIXIN_change" @animationfinish="MIXIN_animationfinish">
						<swiper-item>
							<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
								<view class="my-item" v-for="(item, index) in lists[0]" :key="index">
									<view class="top row">
										<text class="left">兑换花费</text>
										<text class="right">-&nbsp;{{ item.cost }}</text>
									</view>
									<view class="mid row">
										<text>兑换时间</text>
										<text>{{ item.timestamp | getYear }}-{{ item.timestamp | getMonth }}-{{ item.timestamp | getDate }}&nbsp;{{ item.timestamp | getHousr }}:{{ item.timestamp | getMinute }}:{{ item.timestamp | getSecond }}</text>
									</view>
									<view class="bot row">
										<text>兑换物品</text>
										<text>{{ item.name + ' ' }} × {{ ' ' + item.num }}</text>
									</view>
									<view v-if="item.tracking_number" class="bot row">
										<text>物流单号</text>
										<text>{{ item.tracking_number }}</text>
									</view>
									<button type="primary" 
										@tap="clipboard_tracking_number(item.tracking_number)" 
										:style="{ background: item.tracking_number ? '#FA6342' : '#AAAAAA' }"
									>{{ item.tracking_number ? '点击复制物流单号' : '未发货' }}</button>
								</view>
							</scroll-view>
						</swiper-item>
						<swiper-item v-for="(item, index) in typeList" :key="index" v-if="index !== 0">
							<scroll-view scroll-y :style="{ height: scrollViewHeight + 'px' }">
								<view class="down-item" v-for="(item, DownIndex) in lists[1]" :key="DownIndex">
									<view class="downitem" @tap="downDetail(DownIndex, item.id)">
										<image :src="item.avatar"></image>
										<text>{{ item.nickname }}</text>
										<text>
											<text v-if="item.total" class="basecolor">{{ item.total + ' ' }}件 {{ '  ' }}</text>
											<text :class="activeDetail === DownIndex ? 'cuIcon-unfold' : 'cuIcon-right'"></text>
										</text>
									</view>
									<view class="detail">
										<view class="detail-item" v-for="(item, detailIndex) in downDetailList" :key="detailIndex">
											<text>{{ item.name }}</text>
											<text>×{{ ' ' + item.num }}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</pulldown-refresher>
			</view>
		</view>
	</view>
</template>

<script>
	import { api_getExchangeRecord, api_getTeamRecord, api_getPerRecond } from '../../api.js'
	import pulldownRefresher from '../../components/pulldown-refresher.vue'
	export default {
		components: { pulldownRefresher },
		data() {
			return {
				pageTitle: '我的礼品',
				page: [1, 1], // 每种类型的页数 当页数为 0 时表示当前类型没有更多了 -1 表示请求失败
				lists: { 0: [], 1: [] }, // 数据
				typeList: ['我的礼品', '下级礼品'],
				scrollViewHeight: 0,
				MIXIN_NowIndex: 0,
				MIXIN_ActiveIndex: 0,
				MIXIN_MoveBarLeft: 0,
				MIXIN_FinishedIndex: 0,
				MIXIN_ScrollViewHeight: 0, // scroll view 高
				apis: [api_getExchangeRecord, api_getTeamRecord],
				MIXIN_ScreenWidth: uni.getSystemInfoSync().screenWidth, // 屏幕宽
				downDetailList: [], // 用户兑换详情
				activeDetail: -1
			}
		},
		created() {
			this.MIXIN_request()
		},
		mounted() {
			this.$scrollViewHeight('.swiper-area')
		},
		methods: {
			clipboard_tracking_number(num) {
				uni.setClipboardData({ data: num })
			},
			MIXIN_transition({ detail: { dx } }) { // swiper 切换时 ///////////////////////////////////////////////////////////////////<固定写法>
				this.MIXIN_MoveBarLeft = this.MIXIN_FinishedIndex * (this.MIXIN_ScreenWidth / this.typeList.length) +  dx / this.typeList.length
			},
			MIXIN_change({ detail: { current } }) {
				this.MIXIN_ActiveIndex = current
			},
			MIXIN_animationfinish({ detail: { current } }) { // swiper 停止切换
				this.MIXIN_FinishedIndex = this.MIXIN_NowIndex = current
				if (!this.lists[this.MIXIN_NowIndex].length && this.page[this.MIXIN_NowIndex] !== 0) { // 当当前类型数量为 0 且有不是 没有更多时请求列表
					this.MIXIN_request()
				}
			},
			switchSwiper(index) { // 点击导航栏切换
				this.MIXIN_NowIndex = index
			}, /////////////////////////////////////////////////////////////////////////////////////////////////////////////////<固定写法>
			MIXIN_pulldownrefresh() { // 下拉刷新
				this.activeDetail = -1
				this.downDetailList = []
				this.page[this.MIXIN_NowIndex] = 1
				this.MIXIN_request().then(() => { this.$refs.pulldownRefresher.pullup() })
			},
			MIXIN_request(action) { // 请求数据
				return new Promise((resolve, reject) => { // 只有在 首次加载列表或者下拉刷新时才显示 liaoding
					!action && uni.showLoading({ title: '加载中', mask: true }) // 开始 loading, 只有在 首次加载列表或者下拉刷新时才显示 liaoding
					this._requesting = true // 请求加锁防抖
					this.$ajax.get(`${this.apis[this.MIXIN_NowIndex]}`).then(([, { data: res }]) => {
						!action ? this.lists[this.MIXIN_NowIndex] = [] : '' // 如果是下拉刷新，清空列表
						this.lists[this.MIXIN_NowIndex] = [...this.lists[this.MIXIN_NowIndex], ...res.data.list]
						this.page[this.MIXIN_NowIndex] = 0 // 没有更多了
						if (this.MIXIN_NowIndex === 0) { this.typeList[0] = '我的礼品' + `(${ this.lists[0].reduce((t, e) => t + e.num, 0) })` }
						if (this.MIXIN_NowIndex === 1) { this.typeList[1] = '下级礼品' + `(${ res.data.total })` }
					}).catch(() => { // 网络请求失败 进入失败状态
						this.page[this.MIXIN_NowIndex] = -1
						this.lists[this.MIXIN_NowIndex] = []
					}).finally(() => { // promise 结束
						resolve() // 通知下拉刷新收起
						this.$hideLoading()
						this._requesting = false // 取消请求加锁防抖
					})
				})
			}, ///////////////////////////////////////////////////////////////////////////////////////<固定写法>
			downDetail(index, id) { // 获取下级详情
				this.activeDetail = -1
				uni.showLoading({ title: '加载中', mask: true })
				this.$ajax.get(`${api_getPerRecond}?id=${id}`).then(([, { data: res }]) => {
					this.lists[1][index].total = res.data.list.reduce((t, e) => t += e.num, 0)
					this.downDetailList = res.data.list
					this.activeDetail = index
					this.$hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mygift {
		@include page();
		.content {
			@include flex(column);
			.nav {
				@include flex();
				width: 100%;
				height: 70rpx;
				color: #999999;
				font-size: 36rpx;
				position: relative;
				background: #FFFFFF;
				.item {
					@include flex();
					flex: 1;
					height: 100%;
					&.active {
						color: $app-base-color;
					}
				}
				.moveBar {
					@include flex();
					bottom: 0;
					height: 4rpx;
					position: absolute;
					background: $app-base-color;
					> text {
						width: 0;
						height: 0;
						top: -16rpx;
						position: absolute;
						border-style: solid;
						border-width: 8rpx 12rpx;
						border-color: transparent transparent red transparent;
					}
				}
			}
			.swiper-area {
				flex: 1;
				width: 100%;
				swiper {
					width: 100%;
					height: 100%;
					scroll-view {
						background: #EEEEEE;
						.down-item {
							.downitem {
								@include flex();
								height: 90rpx;
								margin-top: 2rpx;
								padding: 0 30rpx;
								font-size: 32rpx;
								background: #FFFFFF;
								box-sizing: border-box;
								justify-content: space-between;
								image {
									width: 78rpx;
									height: 78rpx;
									border-radius: 50%;
								}
							}
							.detail {
								width: 100%;
								margin-top: 2rpx;
								.detail-item {
									height: 48rpx;
									@include flex();
									padding: 0 30rpx;
									box-sizing: border-box;
									justify-content: space-between;
								}
							}
						}
						.my-item {
							width: 690rpx;
							height: 360rpx;
							background: #FFFFFF;
							box-shadow: 0rpx 10rpx 15rpx 3rpx rgba(198,198,198,0.3), 0rpx 1rpx 0rpx 0rpx rgba(131, 131, 131, 0.35);
							margin: 34rpx auto;
							box-sizing: border-box;
							padding: 36rpx 32rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.row {
								width: 100%;
								display: flex;
								justify-content: space-between;
								color: #999999;
								font-size: 26rpx;
							}
							.top {
								.left {
									font-size: 32rpx;
									color: #2A2A2A;
								}
								.right {
									font-size: 40rpx;
									color: #FA6342;
									margin-right: 74rpx;
								}
							}
							button {
								width: 100%;
								height: 60rpx;
								line-height: 60rpx;
								font-size: 30rpx;
								background: #FA6342;
							}
						}
					}
				}
			}
		}
	}
</style>
