<template>
	<view class="exchangerecord">
		<custom-nav :title="pageTitle"></custom-nav>
		<view class="content">
			<scroll-view class="connect-scroll" scroll-y :style="{ height: scrollViewHeight + 'px' }">
				<view class="item" v-for="(item, index) in list" :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(index)" 
						:style="{ background: item.tracking_number ? '#FA6342' : '#AAAAAA' }"
					>{{ item.tracking_number ? '点击复制物流单号' : '未发货' }}</button>
				</view>
				<view class="nomore">-暂无更多兑换记录-</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { api_getExchangeRecord } from '../../api.js'
	export default {
		data() {
			return {
				pageTitle: '兑换记录',
				scrollViewHeight: 0,
				list: []
			};
		},
		methods: {
			clipboard_tracking_number(index) {
				uni.setClipboardData({ data: this.list[index].tracking_number })
			}
		},
		created() {
			uni.showLoading({ title: '加载中', mask: true })  //显示loading
			this.$scrollViewHeight('.content')  //设置页面内 scroll view 的高度
			this.$ajax.get(api_getExchangeRecord).then(([ , { data: res}]) => {
				this.list = res.data.list
				this.$hideLoading()  //异步操作结束，停止 loading
			})
		}
	}
</script>

<style lang="scss" scoped>
	.exchangerecord {
		@include page();
		.content {
			background: $custom-nav-borderbot-color;
			.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;
				}
			}
			.nomore {
				font-size: 20rpx;
				color: #999999;
				margin: 42rpx auto;
				text-align: center;
			}
		}
	}
</style>
