<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 == 'low' ? '@/static/icons/market_icon_low.png': '@/static/icons/market_icon_high.png')"
				/>
			</view>
		</view>
		<view class="lists">
			<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
		</view>
	</view>
</template>

<script>
	import { list } from '@/apis/interfaces/goods'
	import goodsList from '@/components/goods-list/goods-list'
	export default {
		data() {
			return {
				tabIndex	: 0,
				marketType	: 'low',
				goods		: []
			};
		},
		created() {
			list().then(res=>{
				console.log(res.data)
				this.goods = res.data
				this.pages = res.page
			})
		},
		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 == 'low' ? 'high': 'low'
				this.tabIndex = index
			},
			
			onGoods(e){
				this.$Router.push({name: 'goodsDetails', params: {id: e.goods_id}})
			}
		}
	}
</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: $text-price;
			}
		}
	}
	// 列表
	.lists{
		padding-top: 70rpx;
	}
</style>
