<template>
	<view class="NumberWeight">
		<!-- 有订单列表 -->
		<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>
		</view>
		<!-- 没有订单列表 -->
		<no-list v-if="lists.length === 0" name="no-order" txt="暂无数据~" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { marketsMag, marketsCancel } from '@/apis/interfaces/market';
export default {
	data() {
		return {
			lists: [],
			page: 1,
			total: 0
		};
	},
	onLoad() {
		this.getList();
	},
	onReachBottom() {
		if (this.total > this.lists.length) {
			this.page = this.page + 1;
			this.getList();
		} else {
			this.$refs.uToast.show({
				title: '吼吼吼~我是有底的~',
				type: 'error',
				icon: false,
				duration: 3000
			});
		}
	},
	methods: {
		getList() {
			let data = {
				perPage: 10,
				page: this.page
			};
			marketsMag(data)
				.then(res => {
					console.log(res.markets.data);
					this.lists = this.lists.concat(res.markets.data);
					this.total = res.markets.page.total;
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: err.message,
						type: 'error',
						icon: false,
						duration: 3000
					});
				});
		},
		// 取消转让
		removeGoods(id, index) {
			marketsCancel(id).then(res => {
				uni.showToast({
					icon : 'none',
					title: res
				})
				let statusObj = this.lists[index]
				statusObj.status = {
					value: 2,
					text : '已取消',
				}
				this.$set(this.lists, index, statusObj)
			}).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;
		// 订单列表
		.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>
