<template>
	<view style="min-height: 100vh;background-color: #fff;">
		<image class="a" src="https://t17.9026.com/web/statics/image/index/addcustomerbg.png" style="margin-bottom: 41rpx;" mode=""></image>
		<view class="main-left cross-center search">
			<image src="https://t17.9026.com/web/statics/image/index/search.png" mode=""></image>
			<input style="width: 560rpx;" type="text" v-model="name" placeholder="输入销售人员姓名" @confirm="search" placeholder-style="font-size:28rpx;color:#999;" />
		</view>
		
		<view class="main">
			<view class="main-between cross-center" style="height: 100rpx;">
				<view class="title t-omit">{{estateName}}销售人员</view>
				<view class="main-right cross-center">
					<!-- <text class="pla">更多</text><image class="arrow-right" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png" mode=""></image> -->
					</view>
			</view>
			<view class="main-between cross-center item" v-for="(item,index) in dataList" :key="index" @click="selectSale(index,item.sale_id,item.salesperson.name)">
				<view class="main-left">
					<image style="width: 79rpx;height: 79rpx;border-radius: 50%;margin-right: 24rpx;" :src="item.salesperson.pic_url" mode=""></image>
					<view>
						<view class="name">{{item.salesperson.name}}</view>
						<view class="phone">{{item.salesperson.mobile}}</view>
					</view>
				</view>
				<image v-show="selectSaleIndex===index" style="width: 36rpx;height: 36rpx;" src="https://t17.9026.com/web/statics/image/index/select_sale.png" mode=""></image>
			</view>
			<AppNoData v-if="dataList.length===0" title="暂无销售人员"></AppNoData>
		</view>
		<view style="height: 150rpx;"></view>
		<button type="default" @click="bindingSale" :class="{'add':true, 'allow-add':selectSaleIndex!==-1, 'not-add':selectSaleIndex===-1}" :disabled="fasle">确认绑定</button>
	</view>
</template>

<script>
	import AppNoData from '@/components/page-component/app-no-goods/app-no-goods.vue'
	export default {
		components:{
			AppNoData
		},
		data() {
			return {
				selectSaleIndex:-1,
				
				dataList:[],
				estateName:'',
				estate_id:'',
				name:'',
			};
		},
		onLoad(option) {
			this.estateName=option.name
			this.estate_id=option.estate_id
			this.getData()
		},
		methods:{
			search(){
				this.getData()
			},
			getData(){
				this.$request({
					url:this.$api.index.sale_list,
					data:{
						estate_id:this.estate_id,
						name:this.name
					},
					method:'post'
				}).then(res=>{
					if(res.code===0){
						this.dataList=res.data
					}
				})
			},
			selectSale(index,id,name){
				this.selectSaleIndex=index
				var pages = getCurrentPages();
				var currPage = pages[pages.length - 1]; //当前页面
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.saleInfo={id:id,name:name}
			},
			bindingSale(){
				if(this.selectSaleIndex===-1){
					uni.showToast({
						title:'请选择销售',
						icon:'none'
					})
					return
				}
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		width: 678rpx;
		height: 130rpx;
		background-image: url(https://t17.9026.com/web/statics/image/index/sale_bg.png);
		padding: 0 37rpx 0 31rpx;
		margin-bottom: 21rpx;
		.name{
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
			margin-bottom: 13rpx;
		}
		.phone{
			font-size: 24rpx;
			font-weight: 500;
			color: #D6994E;
		}
	}
	.add{
		width: 678rpx;
		height: 90rpx;
		border-radius: 6rpx;
		margin: 0 auto;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.allow-add{
		background: #A18353;
	}
	.not-add{
		background-color: #bab994;
	}
	.a{
		width: 750rpx;
		height: 197rpx;
	}
	.search{
		width: 680rpx;
		height: 82rpx;
		background: #F8F8F8;
		border: 1rpx solid #EEEEEE;
		border-radius: 4rpx;
		margin: 0 auto;
		padding-left: 22rpx;
		image{
			width: 22rpx;
			height: 22rpx;
			margin-right: 18rpx;
		}
	}
	.main{
		padding: 20rpx 42rpx 0 30rpx;
	}
	.title{
		width: 500rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #222222;
	}
	.pla{
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
		margin-right: 20rpx;
	}
	.arrow-right{
		width: 12.8rpx;
		height: 22.8rpx;
	}
</style>
