<template>
	<view class="safe-area-inset-bottom">
		<u-navbar title=" " :border-bottom="false">
			<view style="width: 100%;padding:0 20rpx;">
				<view class="">
					<u-search v-model="keyword"  :show-action="false" height="56"></u-search>
				</view>
			</view>
		</u-navbar>

		<view class="bg-white " v-if="tagsList.length!=1">
			<scroll-view scroll-x class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==current?'text-base cur text-xl text-bold ':'text-lg'"
						v-for="(item,index) in tagsList" :key="index" @tap="change(index)">
						{{item.dictKey}}
					</view>
				</view>
			</scroll-view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<card :list="list"  @stop="stop"></card>
		</mescroll-body>

	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	import card from "./comps/card.vue"
	export default {
		mixins: [MescrollMixin],
		components: {
			card
		},
		data() {
			return {
				labelId: '',
				//商场店铺标签
				tagsList: [{dictKey:'全部',id:''}],
				current: 0,
				//列表数据
				list: [],
				keyword:null,
				downOption:{
					auto:false
				}
			}
		},
		watch:{
			keyword(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.list=[]
					this.mescroll.resetUpScroll();
				}, 500)
			},
		},
		onLoad() {
			this.getMallLabel()
		},
		methods: {
			stop(id) {
				this.$dialog.showModal("确认停用该商户？").then(() => {
					let params = {
						id,
						auditStatus: this.$global.shop_auditStatus.STOP
					}
					this.$api.shop.submit(params).then(res => {
						if (res.success) {
							this.mescroll.resetUpScroll();
						}
					})
				})
			},
			getMallLabel() {
				this.$api.mall.detail({id:this.vuex_mallId}).then(res => {
					if (!this.$isEmpty(res.data.labelJson)) {
						let arr= JSON.parse(res.data.labelJson)
						this.tagsList = this.tagsList.concat(arr)
					}
				})
			},
			change(index) {
				this.current = index;
				this.labelId = this.tagsList[index].id
				this.mescroll.resetUpScroll()
			},
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 800)
			},
			upCallback(mescroll) {
				if (!this.vuex_mallId) {
					return
				}
				let params = {
					name:this.keyword,
					mallId: this.vuex_mallId,
					auditStatus: this.$global.shop_auditStatus.PASS,
					current:mescroll.num,
					size:mescroll.size,
					labelParentIds:this.labelId
				}
				try {
					this.$api.mall.getShopList(params).then(res => {
						let data = res.data.records
						let total = res.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					this.mescroll.endErr()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
