<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 padding-20">
			<u-tabs :list="tagsList" active-color="#FF9447" :is-scroll="true" :current="current" @change="change">
			</u-tabs>
			<view class="padding-top-10">
				<scroll-view scroll-x class="bg-white" style="white-space: nowrap;" scroll-with-animation>
					<view @click="selectArea(index)" v-for="(item,index) in areaList" :key="index" class="cu-tag"
						:style="areaIndex==index?'background-color: #FFA66D;color: #FFFFFF;':'background-color: #F5F5F6;color: #6C6C6C;'"
						style="border-radius: 12rpx;">
						{{item.name}}
					</view>
				</scroll-view>
			</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 {
				//区域id
				mallAreaId: '',
				labelId: '',
				//商场店铺标签
				tagsList: [{
					name: '全部',
					id: ''
				}],
				current: 0,
				//商场区域列表
				areaList: [{
					name: '全部',
					id: ''
				}],
				//列表数据
				list: [],
				keyword:null,

				areaIndex: 0
			}
		},
		watch:{
			keyword(){
				let that=this
				//节流函数
				if (this.timer){
					clearTimeout(this.timer)//阻止setTimeout函数的执行
				}
				this.timer = setTimeout(() => {
					that.list=[]
					this.mescroll.resetUpScroll();
				}, 500)
			},
		},
		onLoad() {
			this.getShopLabelByMallId()
			this.getMallAreaByMallId()
		},
		methods: {
			stop(id) {
				this.$dialog.showModal("确认停用该商户？").then(() => {
					let params = {
						id,
						auditStatus: 3
					}
					this.$api.shop.stop(params).then(res => {
						if (res.success) {
							this.mescroll.resetUpScroll();
						}
					})
				})
			},
			getShopLabelByMallId() {
				this.$api.mall.getShopLabelByMallId(this.vuex_mallId).then(res => {
					this.tagsList = this.tagsList.concat(res.data)
				})
			},
			getMallAreaByMallId() {
				this.$api.mall.getMallAreaByMallId(this.vuex_mallId).then(res => {
					this.areaList = this.areaList.concat(res.data)
				})
			},
			change(index) {
				this.current = index;
				this.labelId = this.tagsList[index].id
				this.mescroll.resetUpScroll()
			},
			selectArea(index) {
				this.areaIndex = index
				this.mallAreaId = this.areaList[index].id
				this.mescroll.resetUpScroll()
			},
			downCallback() {
				setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 800)
			},
			upCallback(mescroll) {
				if (!this.vuex_mallId) {
					return
				}
				let params = {
					fullName:this.keyword,
					mallId: this.vuex_mallId,
					auditStatus: 1,
					labelId: this.labelId,
					mallAreaId: this.mallAreaId,
					current:mescroll.num,
					size:mescroll.size,
				}
				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>
