<template>
	<view>
		<view class="tabs" v-if="$Route.query.type === 'my'">
			<view class="item" :class="{ 'show' : tab == 'sell'}" @click="onTasb('sell')">我转让的</view>
			<view class="item" :class="{ 'show' : tab == 'buys' }" @click="onTasb('buys')">我买到的</view>
		</view>
		<block v-if="logs.length > 0">
			<view :class="{'paddingTop': $Route.query.type === 'my'}">
				<view class="logs" v-for="(item, index) in logs" :key="index">
					<view class="logs-item">
						<label>交易权证</label>
						{{item.goods.goods_name}}
					</view>
					<view class="logs-item">
						<label>交易单价</label>
						￥{{item.price}}
					</view>
					<view class="logs-item">
						<label>交易数量</label>
						{{item.qty}}
					</view>
					<view class="logs-item">
						<label>转让用户</label>
						{{item.sellUser.nickname}}
					</view>
					<view class="logs-item">
						<label>购买用户</label>
						{{item.buyUser.nickname}}
					</view>
					<view class="logs-item">
						<label>交易时间</label>
						{{item.created_at}}
					</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="list-null">
				<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix" />
				<view class="sub-title">暂无数据</view>
			</view>
		</block>
	</view>
</template>

<script>
	import { marketsLogs, marketsOrdersLogs } from '@/apis/interfaces/market'
	export default {
		data() {
			return {
				logs: [],
				page: {},
				tab	: 'sell'
			};
		},
		created(){
			this.getList()
		},
		methods:{
			onTasb(e){
				this.tab = e
				this.getList()
			},
			// 获取列表
			getList(){
				if(this.$Route.query.type === 'my'){
					marketsOrdersLogs({}, this.tab).then(res =>{
						console.log(res)
						this.logs = res.data
						this.page = res.page
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
					return
				}
				marketsLogs().then(res => {
					this.logs = res.data
					this.page = res.page
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background-color: white;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-around;
		.item{
			border-bottom: solid 2rpx white;
			box-sizing: border-box;
			&.show{
				border-color: $mian-color;
				color: $mian-color;
			}
		}
	}
	
	.paddingTop{
		padding-top: 90rpx;
	}
	
	.logs{
		background: white;
		margin-top: $margin;
		padding: ($padding - 10) $padding;
		.logs-item{
			padding-left: 200rpx;
			height: 50rpx;
			line-height: 50rpx;
			position: relative;
			text-align: right;
			font-size: $title-size-m;
			@extend .nowrap;
			label{
				position: absolute;
				left: 0;
				top: 0;
				width: 200rpx;
				text-align: left;
				color: $text-gray;
			}
		}
	}
	
	// 空提示
	.list-null{
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		text-align: center;
		background: white;
		padding-bottom: 20vh;
		@extend .vertical;
		.sub-title{
			color: $text-gray;
			font-size: $title-size-m;
		}
		.icon{
			width: 288rpx;
		}
	}
	.employees-null{
		text-align: center;
		line-height: 10vh;
		padding-bottom: $padding;
		font-size: $title-size-m;
		color: $text-gray;
	}
</style>
