<template>
	<view class="NumberWeight">
		<view class="header-tabs">
			<view class="tabs-item" :class="{'show' : status === ''}" @click="onTabs('')">全部</view>
			<view class="tabs-item" :class="{'show' : status === 1}" @click="onTabs(1)">转让中</view>
			<view class="tabs-item" :class="{'show' : status === 2}" @click="onTabs(2)">已取消</view>
		</view>
		<!-- 有订单列表 -->
		<view v-if="lists.length > 0">
			<block v-for="(item, index) in lists" :key="index">
				<view class="order-item">
					<view class="order-info">
						<image class="order-cover" :src="item.goods.cover" mode="aspectFill"></image>
						<view class="title">数字权证<text>{{item.surplus}}/{{item.stock}}</text></view>
						<view class="text">锚定商品：{{item.goods.goods_name}}</view>
						<view class="text">交易哈希：{{item.hash}}</view>
						<view class="text">发布时间：{{item.created_at}}</view>
					</view>
					<view class="order-tool">
						<view class="price">{{item.price}}/个</view>
						<view class="order-btn" v-if="item.status.value === 1" @click="removeGoods(item.market_id, index)">取消转让</view>
						<view class="order-status" v-if="item.status.value === 2">{{item.status.text}}</view>
					</view>
				</view>
			</block>
			<uni-load-more :status="pageMore"></uni-load-more>
		</view>
		<!-- 没有订单列表 -->
		<no-list v-if="lists.length === 0" name="no-order" txt="暂无数据~" />
	</view>
</template>

<script>
import { marketsMag, marketsCancel } from '@/apis/interfaces/market';
export default {
	data() {
		return {
			lists	: [],
			page	: 1,
			status	: '',
			total	: 0,
			pageMore: 'more'
		};
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		if (this.pageMore) {
			this.page = this.page + 1;
			this.getList();
		}
	},
	methods: {
		onTabs(status){
			this.status = status
			this.page = 1
			this.getList()
		},
		getList() {
			if(this.page === 1){
				this.lists = []
			}
			marketsMag({
				status	: this.status,
				page	: this.page
			}).then(res => {
				this.lists = this.lists.concat(res.markets.data);
				this.total = res.markets.page.current;
				this.pageMore = res.markets.page.has_more ? 'more' : 'noMore';
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			});
		},
		// 取消转让
		removeGoods(id, index) {
			marketsCancel(id).then(res => {
				uni.showToast({
					icon : 'none',
					title: res
				})
				
				if(this.status === ''){
					let statusObj = this.lists[index]
					statusObj.status = {
						value: 2,
						text : '已取消',
					}
					this.$set(this.lists, index, statusObj)
					return
				}
				
				if(this.status === 1 || this.status === 2){
					this.lists.splice(index, 1)
				}
			}).catch(err => {
				uni.showToast({
					icon : 'none',
					title: err.message
				})
			})
		}
	},
	onNavigationBarButtonTap(){
		this.$Router.push({name: "marketLogs", params: {type: 'my'}})
	}
};
</script>

<style lang="scss" scoped>
	.NumberWeight {
		box-sizing: border-box;
		padding-top: 90rpx;
		.header-tabs{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			line-height: 90rpx;
			font-size: $title-size-lg;
			height: 90rpx;
			z-index: 99;
			display: flex;
			justify-content: space-around;
			background: white;
			.tabs-item{
				color: $text-gray;
				width: 33.33%;
				text-align: center;
				&.show{
					color: $mian-color;
					font-weight: bold;
				}
			}
		}
		// 订单列表
		.order-item {
			background-color: white;
			margin: $margin;
			border-radius: $radius;
			padding: $padding;
			.order-info{
				position: relative;
				padding-left: 188rpx;
				min-height: 168rpx;
				.order-cover{
					position: absolute;
					top: 0;
					left: 0;
					height: 168rpx;
					width: 168rpx;
				}
				.title{
					font-weight: bold;
					font-size: $title-size-lg;
					color: $text-color;
					line-height: 48rpx;
					height: 48rpx;
					display: flex;
					justify-content: space-between;
					text{
						font-size: 80%;
						font-weight: normal;
					}
				}
				.text{
					line-height: 40rpx;
					height: 40rpx;
					font-size: $title-size-sm;
					color: $text-gray;
					@extend .nowrap;
				}
			}
			.order-tool{
				margin-top: $margin - 10;
				padding-top: $padding - 10;
				border-top: solid 1rpx $border-color;
				display: flex;
				justify-content: space-between;
				.price{
					color: $text-price;
					font-weight: bold;
					font-size: $title-size-m;
					line-height: 50rpx;
				}
				.order-btn{
					background: $mian-color;
					color: white;
					padding: 0 $padding;
					line-height: 50rpx;
					border-radius: 25rpx;
					font-size: $title-size-m;
				}
				.order-status{
					color: $text-gray-m;
				}
			}
		}
	}
</style>
