<template>
	<view class="Goods-LISTS">
		<!-- <image :src="`${config.apiUrls}images/baodan-banner.png`" mode="widthFix" /> -->
		<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">
			<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'
	import {
		config
	} from '@/apis/index.js'
	export default {
		name: 'Goods-LISTS',
		data() {
			return {
				tabIndex: 0,
				marketType: 'asc',
				goods: [],
				page: 1,
				has_more: true,
				isBaoDan: false, // 是否是报单，默认有id不是报单，无id是报单
			};
		},
		onReachBottom() {
			if (this.has_more) {
				this.page = this.page + 1
				this.getList()
			} else {
				uni.showToast({
					title: '我是有底线的~',
					icon: 'none'
				})
			}
		},
		created() {
			this.getList()
		},
		onShow() {
			if (this.$Route.query.type === 'baodan') {
				this.isBaoDan = true
				uni.setNavigationBarTitle({
					title: '报单商品'
				})
			}
		},
		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.has_more = true
				this.page = 1
				this.goods = []
				this.getList()
			},

			onGoods(e) {
				uni.navigateTo({
					url: '/pages/goods/details?id=' + e.goods_id
				})
				// this.$Router.push({
				// 	name: 'goodsDetails',
				// 	params: {
				// 		id: e.goods_id
				// 	}
				// })
			},
			getList() {
				let data = {
					order_by: this.tabIndex == 1 ? this.marketType : '',
					page: this.page
				}
				if (this.$Route.query.type === 'id') {
					data.category_id = this.$Route.query.id
				} else if (this.$Route.query.type === 'baodan') {
					// 报单加个条件筛选
					data.is_allow_values = 1
				} else {
					data.category_cid = this.$Route.query.id
				}
				list(data).then(res => {
					this.goods = this.goods.concat(res.data)
					this.has_more = res.page.has_more
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		position: fixed;
		top: 0;
		//#ifdef H5
		top: 90rpx;
		//#endif
		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-top: 70rpx;
	}
</style>
