<template>
	<z-paging ref="paging" v-model="list" @query="queryList">
		<!-- <page-meta :page-style="themeColor"></page-meta> -->
		<!-- <template slot="top"> -->
		<u-navbar title="客户" :autoBack="true" leftIconSize="0" placeholder>
			<div slot="right" class="right">
				<image :src="$util.img(`/upload/weapp/pageSalesman/customer/sx.png`)" @click="$refs.screening.start()">
				</image>
				<image :src="$util.img(`/upload/weapp/pageSalesman/customer/add.png`)" @click="btnone"></image>
			</div>
		</u-navbar>
		<!-- </template> -->
		<!-- 	<div class="input df aic">
				<u-input class="inpuone" shape="circle" v-model="input" placeholder="客户名称/联系人/手机号" @change="change">
					<div class="prefix" slot="prefix">
						<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
					</div>
				</u-input>
		</div> -->
		<!-- <mescroll-uni top="180"> -->
		<view class="index">
			<view class="" v-for="(item,index) in list" :key="index" @click="btn(item.member_id)">
				<div class="box">
					<image v-if="item.headimg.length>0" :src="$util.img(item.headimg)" mode="aspectFill"></image>
					<image v-else :src="$util.img('https://cbtadmin.jtyqt.com/public/static/img/default_img/head.png')"
						mode="aspectFill"></image>
					<div class="df aic jcsb">
						<div class="name">{{item.nickname}}<span>{{item.mobile}}</span></div>
						<div class="status" @click.stop="btnonde(item.member_id)">店铺管理</div>

					</div>
				</div>
			</view>
		</view>


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


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


		<screening ref="screening" @fatherMethod="confirm"></screening>

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

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

	export default {
		components: {
			tabbar,
			screening,
		},
		data() {
			return {
				// dataList: [],
				page: 1,
				list: [],
				listone: [],
				input: '',
				dataList: [],
				listtwo: [],
				kaiguan: false,
				keywords: '',
				salas_id: '',
				store_type: '',
				status: '',
				province_id: '',
				first_order: '',
			};
		},
		onShow() {
			// this.$api.sendRequest({
			// 	url: '/api/salasman/getMemberPageList',
			// 	data: {},
			// 	success: res => {
			// 		this.list = res.data.list
			// 		console.log(res.data.list, '客户列表');
			// 	}
			// })
		},
		onLoad() {

		},
		methods: {
			queryList(pageNo, pageSize) {
				let obj = {
					page: pageNo,
					page_size: pageSize,
					keywords: this.keywords,
					salas_id: this.salas_id,
					store_type: this.store_type,
					status: this.status,
					province_id: this.province_id,
					first_order: this.first_order
				}

				if (this.status === false || this.status === "") {
					delete obj.status
				}

				this.$api.sendRequest({
					url: '/api/salasman/getMemberPageList',
					data: obj,
					success: res => {
						this.$refs.paging.complete(res.data.list);
						console.log(this.list, '客户列表');
					}
				})

			},
			// keywords, depart_id, depart_name, auth_level, province_id, first_order, kaiguan
			confirm(e) {
				this.keywords = e.keywords;
				this.salas_id = e.salas_id;
				this.store_type = e.store_type;
				this.status = e.status;
				this.province_id = e.province_id;
				this.first_order = e.first_order;
				this.$refs.paging.reload()
			},
			change(value) {
				this.$api.sendRequest({
					url: '/api/salasman/getMemberPageList',
					data: {
						keywords: value
					},
					success: res => {
						console.log(res.data.list, '客户列表');
						this.listone = res.data.list
					}
				})
			},
			btn(id) {
				uni.navigateTo({
					// url:'/page_salesman_customer/Customer_details/detailedinformation',
					url: `/page_salesman_customer/detailed/detailed?id=${id}&di=1`
				})
			},
			btnonde(status) {
				console.log(111);
				// event.stopPropagation();
				uni.navigateTo({
					url: `/page_salesman_customer/Management/Management?status=${status}`,
				})
			},
			btnone() {

				uni.navigateTo({
					url: `/page_salesman_index/newly_increased/newly_increased`,
				})
			}
		},
		onHide() {
			this.page = 1
		},
		async onPullDownRefresh() {
			await this.$api.sendRequest({
				url: '/api/salasman/getMemberPageList',
				data: {},
				success: res => {
					this.list = res.data.list
					this.page = 1
					uni.stopPullDownRefresh()
				}
			})
		},
		async onReachBottom() {
			this.page += 1
			await this.$api.sendRequest({
				url: '/api/salasman/getMemberPageList',
				data: {
					page: this.page
				},
				success: res => {
					// this.list.push([...res.data.list])
					this.list = [...this.list, ...res.data.list]
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.input {
		padding: 0 32rpx;
		height: 100rpx;
		background-color: #fff;
		box-sizing: border-box;

		// margin-bottom: 32rpx;
		.inpuone {}

		.prefix {
			image {
				width: 36rpx;
				height: 36rpx;
				position: relative;
				top: 6rpx;
			}
		}

		::v-deep {
			.u-input {
				background-color: #F6F6F6;
				border: 0;
			}
		}
	}

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

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

		}
	}

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

		.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 {
			width:80%;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;

			span {
				margin-left: 24rpx;
			}
		}



		.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>