<template>
	<view>
		<view class="tabs">
			<view class="tabs-item" :class="{'show': tabIndex == 0}" @click="onTabs" data-index="0">最新</view>
			<view class="tabs-item" :class="{'show': tabIndex == 1}" @click="onTabs" data-index="1">
				价格
				<image
					class="icon"
					mode="widthFix" :src="require(marketType == 'asc' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
				/>
			</view>
		</view>
		<view class="lists">
			<view class="item" v-for="(item, index) in marketArray" :key="index" @click="onDetails(item)">
				<image class="cover" :src="item.goods.cover" mode="aspectFill"></image>
				<view class="content">
					<view class="title nowrap">数字权证<text>{{item.surplus}}/{{item.stock}}</text></view>
					<view class="text nowrap">锚定商品：{{item.goods.goods_name}}</view>
					<view class="text nowrap">供应商：{{item.company.name}}</view>
					<view class="text nowrap">转让用户：{{item.user.nickname}}</view>
				</view>
				<view class="price">￥{{item.price}}/个</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { markets } from '@/apis/interfaces/market'
	export default {
		data() {
			return {
				tabIndex	: 0,
				marketType	: 'asc',
				marketArray : [],
				page		: {}
			};
		},
		onShow() {
			this.getMarkets()
		},
		methods:{
			// 筛选产品
			onTabs(e){
				let index = e.target.dataset.index
				if(index == 0 && index == this.tabIndex) return	
				if(index == 1 && index == this.tabIndex) this.marketType = this.marketType == 'asc' ? 'desc': 'asc'
				this.tabIndex = index
				this.getMarkets()
			},
			// 获取转让市场
			getMarkets(){
				markets({
					sort: this.tabIndex == 1 ? this.marketType : ''
				}).then(res => {
					this.marketArray = res.data
					this.page		 = res.page
				})
			},
			// 转让商品详情
			onDetails(e){
				this.$Router.push({name: 'marketDetails', params: {marketId: e.market_id}})
				console.log(e)
			}
		},
		onNavigationBarButtonTap(){
			this.$Router.push({name: "marketLogs"})
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		display: flex;
		justify-content: space-around;
		background: white;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		.tabs-item{
			font-size: $title-size-m;
			color: $text-gray;
			.icon{
				width: 32rpx;
				height: 32rpx;
				vertical-align: middle;
				margin-left: $margin / 3;
				margin-bottom: 4rpx;
			}
			&.show{
				color: $mian-color;
			}
		}
	}
	// 列表
	.lists{
		padding: 70rpx $padding $padding;
		.item{
			min-height: 168rpx;
			position: relative;
			background: white;
			border-radius: $radius/2;
			margin-top: $margin;
			padding: $padding;
			.cover{
				position: absolute;
				left: $padding;
				top: $padding;
				width: 168rpx;
				height: 168rpx;
			}
			.content{
				padding-left: calc(168rpx + #{$padding});
				.title{
					position: relative;
					font-size: $title-size-lg;
					color: $text-color;
					font-weight: bold;
					line-height: 52rpx;
					padding-right: 60rpx;
					text{
						position: absolute;
						right: 0;
						top: 0;
						width: 60rpx;
						text-align: right;
						font-weight: normal;
					}
				}
				.text{
					font-size: $title-size-sm;
					color: $text-gray;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
			.price{
				margin-top: $margin - 10;
				padding-top: $padding - 10;
				font-size: $title-size-m;
				text-align: right;
				border-top: solid 1rpx $border-color;
				font-weight: bold;
				color: $text-price;
			}
		}
	}
</style>
