<template>
	<view class="container">
		<view class="conters">
			<u-search placeholder="请输入店铺名称搜索" v-model="keyword" :show-action="false" @input="textChange"></u-search>
		</view>
		<view class="contersList">
			<view class="shoplists" v-for="(item,index) in list" :key="index" @tap="goShopdetail(item)">
				<view class="shopTop">
					<view class="shopTitle">{{item.merchantName}}</view>
					<text class="zhuantai1" v-if="item.status==1">待审核</text>
					<text class="zhuantai2" v-if="item.status==2">已通过</text>
					<text class="zhuantai3" v-if="item.status==3">未通过</text>
					<text class="zhuantai4" v-if="item.status==4">已下架</text>
				</view>
				<view class="shopconter">
					<image class="shopimg" :src="item.merchantLogo"></image>
					<view class="rights">
						<view>
							<u-icon name="phone-fill"></u-icon>{{item.merchantPhone}}
						</view>
						<view>
							<u-icon name="map-fill"></u-icon>{{item.merchantAddress}}
						</view>
					</view>
				</view>
				<view style="display: flex;color: red;" v-if="item.status == 3 && item.auditContent">拒绝原因：{{item.auditContent}}</view>
				<view style="display: flex;" v-if="item.status == 2 && item.auditContent">通过原因：{{item.auditContent}}</view>
			</view>
		</view>
		<!-- 加载更多提示 -->
		<view v-if="list.length > 0">
			<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
		<button class="addshop" @click="addBtn">新增店铺</button>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				keyword: '',
				list: [],
				page: 1,
				limit: 15,
				loadingType: 0,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		onLoad(e) {
			// this.getShopList();
		},
		onShow() {
			this.page = 1;
			this.getShopList();
		},
		methods: {
			textChange(e){
				this.page = 1;
				this.getShopList();
			},
			goShopdetail(item) {
				if (item.status == 3) {
					this.$queue.setData("shopListItem", item);
					uni.navigateTo({
						url: '/pages/index/addShop?name=myshop'
					});
				}
			},
			getShopList() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/goodsMerchant/selectGoodsMerchantPage?page=' + this.page + '&limit=' + this.limit +
					'&userId=' + userId + '&merchantName=' + this.keyword + '&status=0').then(res => {
					if (res.code == 0 && res.data) {
						if (this.page == 1) {
							this.list = [];
						}

						if (res.data.records && res.data.records.length > 0) {
							res.data.records.forEach(d => {
								this.list.push(d);
							});
						}

						if (res.data.records.length === this.limit) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
				});
			},
			sousuo() {
				console.log(this.keyword)
			},
			addBtn() {
				uni.navigateTo({
					url: '/pages/index/addShop'
				});
			},
			topScrollTap: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getShopList();
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background: #F7F7F7;
	}

	.container {
		.conters {
			width: 100%;
			background: #FFFFFF;
			padding: 30rpx;

		}

		.contersList {
			margin: 30rpx 30rpx 80rpx;

			.shoplists {
				background: #FFFFFF;
				padding: 10rpx 20rpx;
				border-radius: 8rpx;
				margin-top: 20rpx;

				.shopTop {
					height: 60rpx;
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					position: relative;

					.zhuantai1 {
						position: absolute;
						color: #999999;
						right: 0;
						top: 0;
						font-weight: 100;
						font-size: 28rpx;
					}

					.zhuantai2 {
						position: absolute;
						color: green;
						right: 0;
						top: 0;
						font-weight: 100;
						font-size: 28rpx;
					}

					.zhuantai3 {
						position: absolute;
						color: red;
						right: 0;
						top: 0;
						font-weight: 100;
						font-size: 28rpx;
					}

					.zhuantai4 {
						position: absolute;
						color: red;
						right: 0;
						top: 0;
						font-weight: 100;
						font-size: 28rpx;
					}
				}
			}

			.shopconter {
				height: 100rpx;

				.shopimg {
					width: 80rpx;
					height: 80rpx;
					float: left;
					margin-right: 20rpx;
				}

				.rights {
					color: #999;
					line-height: 40rpx;
				}
			}
		}

		.addshop {
			position: fixed;
			bottom: 30rpx;
			width: 92%;
			margin: 0 4%;
			box-sizing: border-box;
			background: #FF2B2B;
			color: #fff;
			border-radius: 8px;
		}

	}
</style>
