<template>
	<view>
		<u-navbar :autoBack="true" placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<view class="title">店铺管理</view>
			</view>
		</u-navbar>
		<view class="search">
			<u-search placeholder="搜索门店类型、名称、服务范围等..." :showAction="false" @search="search" bgColor="#FAF7F6"
				v-model="field" :animation="false"></u-search>
		</view>
		<view class="bgMain">
			<view class="storeList" v-for="(item, index) in dataList" :key="index">
				<view class="storeitem">
					<image class="img" :src="item.storeLogo"></image>
				</view>
				<view class="storeinfo">
					<view class="business">
						<view class="shopName" style="width: 300rpx;">{{item.storeName}}</view>
						<view>{{item.storeStatus == 0?'营业中':'停业'}}</view>
					</view>

					<view class="stopType">
						<view style="color: #333333;width: 200rpx;">门店类型：</view>
						<view class="typeTitle">{{item.storeType}}</view>
					</view>
					<view class="shopAddress">{{item.detailedAddress}}</view>

				</view>

				<view @click="edit(item)">
					<image class="ic_edit" src="../../static/tabar/ic_edit.png"></image>
				</view>
			</view>
			<view v-if="dataList.length == 0">
				<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
				</image>
				<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				pageNum: 1,
				total: 0,
				field: ''
			};
		},

		onReachBottom() {
			if (this.total > this.list.length) {
				this.pageNum = this.pageNum + 1
				this.tbStoreList(true)
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},

		onShow() {
			this.pageNum = 1
			this.tbStoreList()
		},

		methods: {

			//搜索
			search() {
				this.pageNum = 1
				this.tbStoreList()
			},

			//门店列表
			tbStoreList(flag) {
				console.log(this.field, 'aa');
				this.$http.post('/api/store/tbStore/list', {
					pageNum: this.pageNum,
					pageSize: 10,
					field: this.field,
					lon: "",
					lat: ""
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data.rows)
						this.dataList = !flag ? res.data.rows : this.dataList.concat(res.data.rows)
						this.total = res.data.total
					}
				})
			},

			edit(item) {
				uni.navigateTo({
					url: "/pages/storeManagement/editStoreManage?id=" + item.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.storeList {
		padding: 21rpx;
		display: flex;
		margin-top: 20rpx;

		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		.ic_edit {
			padding-left: 20rpx;
			width: 38rpx;
			height: 38rpx;
		}

		.storeinfo {
			.business {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				color: #FF4502;
			}

			padding-left: 10rpx;

			.shopName {
				font-size: 28rpx;
				color: #333333;
			}

			.stopType {
				padding-top: 10rpx;
				display: flex;
				font-size: 24rpx;
				color: #999999;

				.typeTitle {
					font-size: 24rpx;
					color: #999999;
				}
			}

			.shopAddress {
				padding-top: 20rpx;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.storeitem {
			.img {
				width: 156rpx;
				height: 156rpx;
			}
		}
	}

	.search {
		padding: 24rpx;
	}
</style>