<!-- 店鋪商品列表 -->
<template>
	<view class="wanl-list">
		<view class="cu-custom" :style="{ height: navHeight + 'px' }">
			<view class="cu-bar bg-bgcolor fixed" :style="{ height: navHeight + 'px', paddingTop: statusBarTop + 'px' }">
				<view v-if="pagesNum > 1" class="action" @tap="goBack"><text class="wlIcon-fanhui1"></text></view>
				<view v-else class="action" @tap="goHome"><text class="wlIcon-zhuye"></text></view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input @confirm="confirm" :adjust-position="false" type="text" :placeholder="category"
						confirm-type="search" />
				</view>
				<view class="action" @tap="editListstyle()">
					<text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-10'"></text>
					<text class="wlIcon-liebiao" v-else></text>
				</view>
			</view>
		</view>
		<view class="head" :class="{ headtop: scrollStype }">
			<view class="cue">
				<view class="bar">
					<view class="item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">{{ $t('mall.sort.comprehensive')
						}}</view>
					<view class="item" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">{{ $t('mall.sort.sales') }}
					</view>
					<view class="item" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">{{ $t('mall.sort.new') }}</view>
					<view class="item" :class="{ current: filterIndex === 3 }" @tap="tabClick(3)">
						<text>{{ $t('mall.sort.price') }}</text>
						<view class="box">
							<text :class="{ active: priceOrder === 1 && filterIndex === 3 }" class="wlIcon-sheng"></text>
							<text :class="{ active: priceOrder === 2 && filterIndex === 3 }" class="wlIcon-jiang"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<wanl-empty v-if="goodsData.length === 0 && status !== 'loading'" :text="empty" />
		<wanl-product v-if="goodsData.length > 0" :dataList="goodsData" :dataStyle="liststyle" />
		<uni-load-more :status="status" />
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
import { pullMallProductPage } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			shop_id: 0,
			empty: '',
			WanlScroll: 0,
			scrollStype: false,
			filterIndex: 0,
			priceOrder: 0,
			liststyle: 'col-2-10',
			goodsData: [],
			category: '',
			params: {
				search: '',
				sort: 'weigh',
				order: 'asc',
				page: 1,
				filter: {},
				op: {}
			},
			reload: false,
			last_page: 0,
			status: 'loading',
			pagesNum: 0,
			navHeight: 0,
			statusBarTop: 0
		}
	},
	onLoad(option) {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarTop = sysInfo.statusBarHeight || 0
		this.navHeight = this.statusBarTop + 44
		this.pagesNum = getCurrentPages().length
		this.shop_id = option.shop_id
		if (option.category_id) {
			this.params.filter.shop_category_id = option.category_id
			this.params.op.shop_category_id = 'FIND_IN_SET'
			this.category = option.category_name ? this.$t('mall.currentCategory') + ':' + option.category_name : this.$t('mall.searchShopGoods')
			this.loadData()
			this.empty = this.$t('mall.noGoodsInCategory')
		} else {
			this.params.filter.shop_id = option.shop_id
			this.params.op.shop_id = 'in'
			this.category = this.$t('mall.searchShopGoods') 
			this.status = 'more'
			this.loadData()
			this.empty = this.$t('mall.noGoodsInShop')
		}
	},
	onPullDownRefresh() {
		this.params.page = 1
		this.reload = true
		this.loadData()
	},
	onReachBottom() {
		if (this.params.page >= this.last_page) {
			this.status = 'noMore'
		} else {
			this.reload = false
			this.params.page++
			this.status = 'loading'
			this.loadData()
		}
	},
	onPageScroll(object) {
		this.scrollStype = object.scrollTop > 0 && object.scrollTop < this.WanlScroll
		this.WanlScroll = object.scrollTop
	},
	methods: {
		async loadData() {
			try {
				const res = await pullMallProductPage({
					page: this.params.page,
					search: this.params.search,
					sort: this.params.sort,
					order: this.params.order,
					filter: this.params.filter,
					op: this.params.op
				})
				uni.stopPullDownRefresh()
				this.status = res.total == 0 ? 'noMore' : 'more'
				this.goodsData = this.reload ? res.rows : this.goodsData.concat(res.rows)
				this.params.page = res.currentPage
				this.last_page = res.lastPage
			} catch (e) {
				console.error('[shop product list] loadData', e)
			}
		},
		tabClick(index) {
			if (this.filterIndex === index && index !== 3) return
			this.filterIndex = index
			if (index === 3) {
				this.priceOrder = this.priceOrder === 1 ? 2 : 1
			} else {
				this.priceOrder = 0
			}
			if (index === 0) { this.params.sort = 'weigh'; this.params.order = 'asc' }
			if (index === 1) { this.params.sort = 'sales'; this.params.order = 'asc' }
			if (index === 2) { this.params.sort = 'createtime'; this.params.order = 'asc' }
			if (index === 3 && this.priceOrder === 1) { this.params.sort = 'price'; this.params.order = 'asc' }
			if (index === 3 && this.priceOrder === 2) { this.params.sort = 'price'; this.params.order = 'desc' }
			this.status = 'loading'
			this.params.page = 1
			this.reload = true
			this.loadData()
			uni.pageScrollTo({ duration: 300, scrollTop: 0 })
		},
		editListstyle() {
			this.liststyle = this.liststyle == 'col-1-10' ? 'col-2-10' : 'col-1-10'
		},
		confirm(event) {
			this.category = event.detail.value
			this.params.search = event.detail.value
			this.params.filter = { shop_id: this.shop_id }
			this.params.op = { shop_id: '=' }
			this.reload = true
			this.loadData()
			uni.pageScrollTo({ duration: 300, scrollTop: 0 })
		},
		goBack() { uni.navigateBack({ delta: 1 }) },
		goHome() { uni.switchTab({ url: '/pages/index/index' }) }
	}
}
</script>

<style scoped>
.cu-bar .search-form {
	background-color: #ebebeb;
}
</style>