<template>
	<view class="search-box">
		<u-search
			placeholder="请输入客户名称搜索" 
			v-model="queryWord" 
			@input="searchBrand"
			@search="searchBrand"
			@clear="clearSearch"
			:action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': $config('primaryColor'), 'border-radius': '6upx', 'padding': '12upx 0'}">
		</u-search>
		<scroll-view class="picker-content flex_1" scroll-y v-if="isShow">
			<view class="picker-main">
				<view class="picker-main-item" v-for="(item, index) in listData" :key="item.id" @click="chooseItem(index)">
					<view class="item-name">{{item.customerName}}</view>
				</view>
				<view v-if="listData&&listData.length>=20" style="color:#999;font-size: 26upx;">最多显示前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,
				isShow:true
			}
		},
		onLoad() {
			this.queryWord=''
			this.listData=[]
		},
		onShow() {
			this.queryWord=''
			this.listData=[]
		},
		methods:{
			getData(){
				customerList({queryWord:this.queryWord,pageNo:this.pageNo,pageSize:this.pageSize}).then(res => {
					if(res.status == 200 && res.data){
						this.listData = res.data.list
					}else{
						this.listData = []
					}
				})
			},
			// 搜索品牌
			searchBrand(){
				if(this.queryWord != ''){
					this.getData()
				}
			},
			clearSearch(){
				this.queryWord = ''
				this.listData = []
				// this.getData()
			},
			chooseItem(val){
				console.log(val)
				this.queryWord=this.listData[val].customerName
				// uni.navigateTo({
				// 	url:'/pages/sales/addSales'
				// })
				uni.navigateTo({
					url:'/pages/sales/addSales?pageType=edit&nowId='+this.listData[val].id
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.search-box{
		width: 100%;
		display: flex;
		flex-direction: column;
		// flex: 1;
		.picker-content{
			padding: 6upx 0 20upx;
			flex: 1;
			.picker-main{
				width: 100%;
				.picker-main-item{
					padding: 0 20upx;
					.item-name{
						padding: 14upx 0;
						border-bottom: 1rpx solid #e5e6eb;
					}
					.item-name:not(:last-child){
						border-bottom:none
					}
				}
				
			}
		}
	}
	
</style>