<template>
	<view class="chooseCustomer-content">
		<view class="search">
			<view class="flex justify_between align_center search-title" v-if="backPage!='shelfSeting'">
				<text class="search-label">客户名称</text>
				<view class="search-btn" v-if="backPage != 'salesRecord'">
					<text>没有搜索到？</text>
					<text>点击</text>
					<text @click="addCustomer">新增客户</text>
				</view>
			</view>
			<view v-else>
				<view class="shelfName">{{shelfName}}</view>
				<view class="flex justify_between align_center search-title">
					<view class="search-btn">
						<text>请先设置此货架的关联客户。没有搜索到？</text>
						<text>点击</text>
						<text @click="addCustomer">新增客户</text>
					</view>
				</view>
			</view>
			<u-search
				placeholder="请输入客户名称搜索" 
				v-model="queryWord" 
				height="90"
				@input="$u.debounce(searchBrand, 500)"
				@blur="$u.debounce(searchBrand, 500)"
				@search="$u.debounce(searchBrand, 500)"
				@clear="clearSearch"
				:showAction="false">
			</u-search>
		</view>
		<scroll-view class="picker-content flex_1" scroll-y >
			<view class="picker-main">
				<view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(item)">
					<view class="item-name">{{item.customerName}}</view>
				</view>
				<view v-if="listData&&listData.length>=20" style="color:#999;font-size: 26upx;text-align: center;padding: 10upx;">最多显示前20条匹配客户，请尝试输入更多内容</view>
				<view v-if="listData && listData.length == 0">
					<u-empty text="暂无匹配客户" mode="list" :img-width="200" :margin-top="60"></u-empty>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {customerList} from '@/api/customer.js'
	export default{
		data(){
			return{
				listData:[],
				queryWord:'',
				pageSize:20,
				pageNo:1,
				scrollH:300,
				backPage:'',
				shelfName: ''
			}
		},
		onLoad(opts) {
			uni.$on('clear',this.clearSearch)
			this.backPage = opts.backPage
			
			let title = '选择客户'
			if(opts.backPage == 'shelfSeting'){
				title = '关联客户'
			}
			if(opts.backPage == 'shelfEdit'){
				title = '修改关联客户'
			}
			uni.setNavigationBarTitle({
				title: title
			})
			this.shelfName = opts.shelfName
		},
		onShow() {
			this.init()
		},
		onUnload() {
			uni.$off('clear',this.clearSearch)
		},
		methods:{
			// 初始数据
			init(){
				this.listData=[]
				this.queryWord=''
				this.pageSize=20
				this.pageNo=1
			},
			// 新增客户
			addCustomer(){
				uni.navigateTo({
					url:'/pages/sales/addCustomer?backPage='+this.backPage
				})
			},
			getData(){
				console.log('调用')
				uni.showLoading({title:'加载中...',mask:true})
				customerList({queryWord:this.queryWord,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
					if(res.status == 200 && res.data){
						uni.hideLoading({})
						this.listData = res.data.list
					}else{
						this.listData = []
					}
				})
			},
			// 搜索品牌
			searchBrand(){
				if(this.queryWord != ''){
					this.getData()
				}
			},
			clearSearch(){
				this.queryWord = ''
				this.listData = []
			},
			chooseItem(item){
				console.log(item)
				this.queryWord=item.customerName
				// 新增销售单
				if(this.backPage == 'addSales'){
					uni.navigateTo({
						url:'/pages/sales/addSales?pageType=edit&nowId='+item.id
					})
				}
				// 销售记录
				if(this.backPage == 'salesRecord'){
					uni.$emit("searchSalesRecord",item)
					uni.navigateBack()
				}
				// 门店审核通过
				if(this.backPage == 'authPass'){
					uni.$emit("addCustome",item)
					uni.navigateBack()
				}
				// 货架设置关联客户
				if(this.backPage == 'shelfSeting'){
					uni.$emit("setCustome",item)
					uni.navigateBack()
				}
				if(this.backPage == 'shelfEdit'){
					uni.$emit("editCustome",item)
					uni.navigateBack()
				}
			}
		},
	}
</script>

<style lang="scss">
	.chooseCustomer-content{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding:0 30upx;
		display: flex;
		flex-direction: column;
		.search{
			.shelfName{
				font-weight: bold;
			}
			.search-title{
				padding: 20upx 0;
				.search-label{
					font-size: 30upx;
					font-weight: 600;
				}
				.search-btn{
					font-size: 24upx;
					color: #999;
					text:last-child{
						display: inline-block;
						padding-left: 10upx;
						color:#007AFF
					}
				}
			}
		}
		.picker-content{
			padding: 6upx 0 20upx;
			width: 100%;
			height: calc(100vh-144upx);
			flex: 1;
			overflow-y: scroll;
			.picker-main{
				width: 100%;
				.picker-main-item{
					padding: 0 20upx;
					.item-name{
						padding: 30upx 0;
						border-bottom: 1rpx solid #e5e6eb;
					}
					.item-name:not(:last-child){
						border-bottom:none
					}
				}
			}
		}
	}
</style>
