<template>
	<view class="page1">
		<!-- <view style="width: 100%;position: fixed;top: 0;z-index: 99;">
			<view class="title-box" v-else>
				<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入名称查询" cancelButton="none"
					@confirm="search" />
			</view>
		</view> -->
		<view style="overflow:scroll;padding-bottom: 120rpx;">
			<view v-if="popleType== 'khName' || popleType== 'gysName'" style="overflow:scroll;">
				<!-- 供应商、客户走这一套 -->
				<view class="list-1" v-for="item in popleList" :key="item" v-if="item.name !='散客' && item.consigneeName !='默认供应商'"
					style="display: flex;flex-direction: column;height: auto;min-height: 240rpx;padding-bottom: 20rpx;">
					<view class="name-tel" style="width: 100%;" v-if="popleType=='gysName'">
						<text style="line-height: 75rpx;">{{item.consigneeName}}</text>
						<text>{{item.consigneeMobile != 'undefined' &&item.consigneeMobile != null &&item.consigneeMobile != undefined ?item.consigneeMobile:'-'}}</text>
					</view>
					<view class="name-tel" style="width: 100%;" v-else>
						<text style="line-height: 75rpx;">{{item.name}}<text v-if="item.notBuyDays!=null">({{item.notBuyDays+'天未拿货'}})</text> </text>
						<text>{{item.phone}}</text>
					</view>
					<view class="name-tel" style="width: 100%;display: flex;flex-direction: column;height:auto;font-size: 30rpx;">
						<text>{{(item.name == '散客' || item.consigneeName == '默认供应商') && item.city != null && item.city != undefined?'-':item.province + item.city + item.area}}</text>
						<text style="width:75%;font-size: 26rpx;color:#747474;height: auto;line-height: 30rpx;">{{(item.name == '散客' || item.consigneeName == '默认供应商')?'-':item.address}}</text>
					</view>
					<view v-if="item.name != '散客' && popleType== 'khName' && item.noEarn > 0 && userType == 0" style="color: red;position: absolute;top: 20rpx;right: 180rpx;font-size: 28rpx;">
						欠款:{{item.noEarn?item.noEarn :0}}
					</view>
					<view v-if="item.consigneeName !='默认供应商' && popleType== 'gysName' && item.noEarn > 0 && userType == 0" style="color: red;position: absolute;top: 20rpx;right: 180rpx;font-size: 28rpx;">
						欠款:{{item.noEarn?item.noEarn :0}}
					</view>
					<view v-if="item.name != '散客' && popleType== 'khName' && item.noEarn < 0 && userType == 0" style="color: red;position: absolute;top: 20rpx;right: 180rpx;font-size: 28rpx;">
						余额:{{item.noEarn?Math.abs(item.noEarn) :0}}
					</view>
					<view v-if="item.consigneeName != '默认供应商' && popleType== 'gysName' && item.noEarn < 0 && userType == 0" style="color: red;position: absolute;top: 20rpx;right: 180rpx;font-size: 28rpx;">
						余额:{{item.noEarn?Math.abs(item.noEarn) :0}}
					</view>
					<checkbox @tap="checkboxChange(item)" :checked="item.checked" class="checkbox" />
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<view style="position: fixed;bottom: 20rpx;width: 100%;height: 100rpx;">
			<view @tap="batchDelPeople('1')" style="height: 100rpx;text-align: center;line-height: 100rpx;background: #5fd9ee;width: 95%;margin: 0 auto;border-radius: 10px;color: #fff;">
				批量删除
			</view>
		</view>
		<!-- 弹出删除警示框 -->
		<uni-popup ref="delPopup" background-color="#fff">
			<view class="popup-del-content">
				<view class="popup-del-title">
					<text>警告</text>
				</view>
				<view style="line-height: 100rpx;">
					删除后的<text>{{popleType == 'gysName'?'供应商':'客户'}}</text><text style="color: red;">无法找回</text>，是否继续？
				</view>
				
				<view style="display: flex;margin-top: 20rpx;">
					<view class="popup-bottom-left">
						<view class="bottom-del-btn" @tap="this.$refs.delPopup.close()"
							style="background: linear-gradient(90deg, #FF9797, #FFC1E0);">再想想</view>
					</view>
					<view class="popup-bottom-right">
						<view class="bottom-del-btn" @tap="batchDelPeople()">确认删除</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popleType: '',
				popleList: [],
				status: 'loadmore',
				sort:'',
				carList:[],
				notBuyDays:'',
				nahuoDay:false,
				khName:{},
				userType:'',
				searchName:'',
				pages: 1,
				totalPages: 0,
				user:''
			}
		},
		onReachBottom() {
			if (this.pages >= this.totalPages) return;
			this.status = 'loading';
			this.pages = ++this.pages;
			this.khOrGysList();
		},
		onLoad(options) {
			this.popleType = options.popleType
			uni.setStorageSync('clearMsg','1')
			this.user = uni.getStorageSync('username')
			this.userType = uni.getStorageSync('type')
			this.khOrGysList();
		},
		methods: {
			//客户、供应商列表
			khOrGysList() {
				this.status = 'loading';
				if(this.popleType == 'gysName'){ //供应商
					this.tui.request("/app/supplier/getByCondition", "post", {
						searchStr:this.searchName,
						pageNumber: this.pages,
						pageSize: 10
					}, false, true).then((res) => {
						this.status = 'nomore';
						if (res.code == 200) {
							if (this.pages == 1) {
								this.popleList = res.result.content
							} else {
								this.popleList = [...this.popleList, ...res.result.content]
							}
							this.totalPages = res.result.totalPages
						}else{
							this.tui.toast(res.message)
						}
					})
				}else{ //客户
					this.tui.request("/app/customer/list", "post", {
						searchStr:this.searchName,
						pageNum: this.pages,
						pageSize: 10,
						sort:this.sort,
						notBuyDays:this.notBuyDays
					}, false, false).then((res) => {
						this.status = 'nomore';
						if (res.code == 200) {
							if (this.pages == 1) {
								this.popleList = res.result.records
							} else {
								this.popleList = [...this.popleList, ...res.result.records]
							}
							this.totalPages = res.result.pages
						}else{
							this.tui.toast(res.message)
						}
					})
				}
				for(var i = 0; i < this.popleList.length; i++){
					if(this.popleList != ''){
						this.popleList[i].checked = false
					}
				}
			},
			batchDelPeople(type){
				if(type == '1'){
					this.$refs.delPopup.open()
				}else{
					if(this.carList == ''){
						this.tui.toast("请勾选商品后再删除~")
						return
					}
					let url
					if(this.popleType == 'gysName'){
						url = '/app/supplier/delByIds'
					}else{
						url = '/app/customer/batchDeleteCustomer'
					}
					this.tui.request(url, "post", {
						ids:this.carList
					}, false, true).then((res) => {
						if (res.code == 200) {
							this.khOrGysList()
							setTimeout(res=>{
								this.tui.toast('删除成功')
							},300)
						}else{
							this.tui.toast(res.message)
						}
					})
					this.$refs.delPopup.close()
				}
				
			},
			//选中商品
			checkboxChange(item) {
				item.checked = !item.checked
				if (this.carList.indexOf(item.id) != -1) {
					this.carList.splice(this.carList.indexOf(item.id), 1)
				} else {
					this.carList.push(item.id)
				}
			},
			//顶部搜索框
			search(res) {
				this.pages = 1
				this.searchName = res.value
				this.popleList = []
				this.khOrGysList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,.page1{
		font-size: 28rpx;
	}
	button {
		color: #ffffff;
		background: #5fd9ee;
		width: 90%;
	}

	.list-1 {
		display: flex;
		height: 150rpx;
		border-bottom: 1px solid #eee;
		background: #fff;
		font-size: 32rpx;
		margin: 20rpx auto 0;
		width: 95%;
		padding-left: 30rpx;
		position: relative;
	}

	.name-tel {
		width: 75%;
		display: flex;
		flex-direction: column;
		height: auto;
		font-size: 30rpx;
	}
	.title-box {
		background: #fff;
	}
	.checkbox {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 20rpx;
		right: 30rpx;
	}
	.popup-del-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 600rpx;
		height: 300rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 10px;
	}
	
	.popup-del-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	
	.popup-del-container {
		margin-top: 20rpx;
		height: 100rpx;
		border-radius: 10px;
		background: #088FEB;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		color: #fff;
	}
	.popup-bottom-left {
		width: 50%;
		line-height: 80rpx;
	}
	
	.popup-bottom-right {
		width: 50%;
		line-height: 100rpx;
	}
	.bottom-del-btn {
		width: 90%;
		line-height: 70rpx;
		height: 70rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
		border-radius: 70rpx;
	}
</style>
