<template>
	<!-- <z-paging ref="paging" v-model="list" @query="queryList"> -->
	<page-meta :page-style="themeColor"></page-meta>
	<view class="index">

		<!-- <template #top> -->
		<u-navbar title="店铺详情" leftIconSize="0" @leftClick="leftClick" placeholder>
			<u-icon name="arrow-left" slot="left" color="#333333" size="24"></u-icon>
		</u-navbar>
		<!-- </template> -->
		<!-- <mescroll-uni top="180"> -->
		<view class="index">
			<view class="" v-for="(item,index) in list" v-on:key="item.id">
				<div class="box" v-on:click="btn(item.id)">
					<div class="df aic jcsb">
						<div class="df aic">
							<image v-if="item.logo" :src="$util.img(item.logo)" mode="aspectFill"></image>
							<image v-else :src="$util.img(default_img.store)" mode="aspectFill"></image>
							<div style="margin-left: 24rpx;">{{item.title}}</div>
						</div>
						<div>{{item.store_type}}</div>
					</div>
					<div class="df aic jcsb">
						<div class="name">{{item.contacts}}<span>{{item.phone}}</span></div>
						<div class="status" @click.stop="btnonde(item.id)">去下单</div>

					</div>
				</div>
			</view>
			<!-- 待审核 -->
			<view class="" v-for="(item,index) in lista" :key="item.id">
				<div class="box" v-on:click="btn(item.id)">
					<div class="df aic jcsb">
						<div class="df aic jcsb">
							<image v-if="item.logo" :src="$util.img(item.logo)" mode="aspectFill"></image>
							<image v-else :src="$util.img(default_img.store)" mode="aspectFill"></image>
							<div style="margin-left: 24rpx;">{{item.title}}</div>
						</div>
						<div>{{item.store_type}}</div>
					</div>
					<div class="df aic jcsb">
						<div class="name">{{item.contacts}}<span>{{item.phone}}</span></div>

						<div class="status" style="color:red">待审核</div>
					</div>
				</div>
			</view>
			<!-- 已驳回 -->
			<view class="" v-for="(item,index) in listc" :key="item.id">
				<div class="box" v-on:click="btn(item.id)">
					<div class="df aic jcsb">
						<div class="df aic">
							<image v-if="item.logo" :src="$util.img(item.logo)" mode="aspectFill"></image>
							<image v-else :src="$util.img(default_img.store)" mode="aspectFill"></image>
							<div style="margin-left: 24rpx;">{{item.title}}</div>
						</div>
						<div>{{item.store_type}}</div>
					</div>
					<div class="df aic jcsb">
						<div class="name">{{item.contacts}}<span>{{item.phone}}</span></div>
						<div class="status" style="color:#ccc">已驳回</div>

					</div>
				</div>
			</view>
			<!-- 已停用 -->
			<view class="" v-for="(item,index) in listb" :key="item.id">
				<div class="box" v-on:click="btn(item.id)">
					<div class="df aic jcsb">
						<div class="df aic">
							<image v-if="item.logo" :src="$util.img(item.logo)" mode="aspectFill"></image>
							<image v-else :src="$util.img(default_img.store)" mode="aspectFill"></image>
							<div style="margin-left: 24rpx;">{{item.title}}</div>
						</div>
						<div>{{item.store_type}}</div>
					</div>
					<div class="df aic jcsb">
						<div class="name">{{item.contacts}}<span>{{item.phone}}</span></div>
						<div class="status" style="color:#ccc">已停用</div>

					</div>
				</div>
			</view>
		</view>
		<view class="zjdp df jcsa aic" @click="Store">
			增加店铺
		</view>

		<!-- </mescroll-uni> -->


		<!-- <tabbar :tabIndex="3"></tabbar> -->


		<screening ref="screening"></screening>

	</view>
	<!-- </z-paging> -->
</template>

<script>
	import tabbar from "@/components/pageSalesman/tabbar/tabbar.vue"
	import screening from "../index/screening.vue"

	export default {
		components: {
			tabbar,
			screening,
		},
		data() {
			return {
				default_img: uni.getStorageSync('default_img'),
				// dataList: [],
				list: [],
				lista: [],
				listc: [],
				page: 1,
				listb: [],
				status: '',
				dataList: []
			};
		},
		onShow() {
			this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 1
				},
				success: res => {
					this.list = res.data
					console.log(res, '店铺列表');
				}
			})
			this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 0
				},
				success: res => {
					this.lista = res.data

				}
			})
			this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 2
				},
				success: res => {
					this.listc = res.data

				}
			})
			this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 3
				},
				success: res => {
					this.listb = res.data

				}
			})
		},
		onLoad(e) {
			this.status = e.status
		},
		methods: {
			// queryList(pageNo, pageSize) {
			// 	this.$refs.paging.complete(this.list);
			// },
			leftClick() {
				// #ifdef H5
				event.stopPropagation();
				// #endif
				uni.navigateTo({
					url: `/page_salesman_customer/index/index`,
				})
			},
			Store() {
				uni.navigateTo({
					// url:'/page_salesman_customer/Customer_details/detailedinformation',
					url: `/page_salesman_customer/NewStore/NewStore?id=${this.status}`
				})
			},
			btn(id) {
				// console.log(status);
				uni.navigateTo({
					// url:'/page_salesman_customer/Customer_details/detailedinformation',
					url: `/page_salesman_customer/Customer_details/Customer_details?id=${id}&st=${this.status}`
				})
			},
			btnonde(di) {
				console.log(di, 'di');
				// event.stopPropagation();
				uni.navigateTo({
					url: `/page_salesman_index/Select_item/Select_item?st=${this.status}&di=${di}`,
				})
			},
			btnone() {

				uni.navigateTo({
					url: `/page_salesman_index/newly_increased/newly_increased`,
				})
			}
		},
		async onPullDownRefresh() {
			await this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 1
				},
				success: res => {
					this.list = res.data
					console.log(res, '店铺列表');
				}
			})
			await this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 0
				},
				success: res => {
					this.lista = res.data

				}
			})
			await this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 2
				},
				success: res => {
					this.listc = res.data

				}
			})
			await this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 3
				},
				success: res => {
					this.listb = res.data

				}
			})
			this.page = 1
			uni.stopPullDownRefresh()
		},
		async onReachBottom() {
			this.page += 1
			await this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 1,
					page: this.page
				},
				success: res => {
					// this.list.push([...res.data.list])
					this.list = [...this.list, ...res.data.list]
				}
			})
			await this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 0,
					page: this.page
				},
				success: res => {
					// this.list.push([...res.data.list])
					this.lista = [...this.lista, ...res.data.list]
				}
			})
			await this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 2,
					page: this.page
				},
				success: res => {
					// this.list.push([...res.data.list])
					this.listc = [...this.listc, ...res.data.list]
				}
			})
			await this.$api.sendRequest({
				url: '/api/salasman/getStoreList',
				data: {
					member_id: this.status,
					status: 3,
					page: this.page
				},
				success: res => {
					// this.list.push([...res.data.list])
					this.listb = [...this.listb, ...res.data.list]
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.zjdp {
		height: 80rpx;
		width: 690rpx;
		background-color: rgb(64, 158, 255);
		color: #FFFFFF;
		// padding: 0 16rpx;
		// box-sizing: border-box;
		margin: 24rpx auto;
		border-radius: 20rpx;
	}

	.index {
		padding: 0 16rpx;
		box-sizing: border-box;

		.box {
			background: #FFFFFF;
			border-radius: 24rpx;
			// padding: 32rpx;
			margin-top: 24rpx;
			padding: 24rpx 16rpx 24rpx 16rpx;
			box-sizing: border-box;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.status {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #00BEF9;
			}
		}

		.name {
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;

			span {
				margin-left: 24rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 40rpx;

			}
		}

		.customer-list {
			.customer-item {
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 32rpx;
				margin-bottom: 32rpx;

				.btn {
					display: flex;
					justify-content: flex-end;

					div {
						width: 176rpx;
						display: inline-block;
						height: 60rpx;
						line-height: 60rpx;
						background: #21BBF3;
						border-radius: 30rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						text-align: center;
					}
				}

				.item {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					margin: 12rpx 0;
					display: flex;
					align-items: center;

					.phone {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #585858;
						margin-left: 16rpx;
					}
				}

				.item-mo {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-top: 24rpx;
				}

				.item-wno {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-top: 24rpx;
				}

				.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.status {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #00BEF9;
					}

					>div {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-bottom: 28rpx;

						.tag {
							padding: 2rpx 8rpx;
							margin-left: 16rpx;
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FF7D02;
							line-height: 36rpx;
							text-align: center;
							height: 36rpx;
							background: #FFF0E2;
							border-radius: 4rpx;
						}
					}
				}
			}
		}
	}
</style>