<template>
	<z-paging ref="paging" v-model="data.list" @query="queryList" empty-view-text="~ 暂无数据 ~">
		<template #top>
			<u-navbar class="u-navbar-box" title="请选择" placeholder bgColor="transparent" autoBack />
			<view style="padding: 20rpx 10rpx;background-color: #fff;">
				<u-search placeholder="请输入搜索" v-model="data.keyword" @custom="search" @search="search"
					@clear="search" />
			</view>
		</template>
		<template #default>
			<view v-for="(v, i) in data.list" :key="i" class="flex-row p-item" @click="chooseHandle(i)">
				<u-icon :class="{ 'radio-active': v.checked }" class="radio" name="checkbox-mark" :size="20"
					color="#fff" />
				<view style="width: 20rpx"></view>
				<u-avatar :text="nameText(v.name)" shape="square" bgColor="#2979ff" />
				<view style="margin-left: 20rpx;">
					<view class="text-size-n">{{ v.name }}</view>
					<view class="text-grey text-size-m mt-1">{{ v.des }}</view>
				</view>
			</view>
		</template>
		<template v-if="data.maxCount != 1 || data.dufaultIds" #bottom>
			<view class="l-fixed__box" style="position: relative; z-index: 9999">
				<view class="u-flex align-center justify-between" style="height: 100%;">
					<view style="width: 65%">
						<view class="flex flex-row" style="color: #2979ff">
							<text class="text-size-n">已选择:</text>
							<text class="text-size-n" v-if="!showCheck" @tap="cancel"
								style="display: inline-block; margin-left: 40rpx; color: #ff9900">取消全部选中</text>
						</view>
						<view style="color: #909399; font-size: 26rpx">
							<text class="text-size-n" v-if="showCheck">最多可以选择{{ data.maxCount }}人</text>
							<text class="text-overflow text-size-n"
								style="width: 300rpx;color: #2979ff;">{{ checkedText }}</text>
						</view>
					</view>
					<view>
						<u-button type="primary" :disabled="showCheck" @tap="submit"
							:text="`确定(${checkedCount}/${data.maxCount})`"></u-button>
					</view>
				</view>
			</view>
		</template>
	</z-paging>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		getCompanyList,
		getCompanyNursesList
	} from '@/common/config/application-api.js'

	const {
		proxy
	} = getCurrentInstance();

	const data = reactive({
		list: [],
		maxCount: 3, //最大选中的数量
		dufaultIds: '', //默认选中的id
		keyword: '', //名字查询
		query: {}, //条件查询
		pageType: '' //条件：返回带入
	})

	const nameText = computed(() => {
		return (name) => {
			name = name.replaceAll('南充', '').replaceAll('服务', '').replaceAll('养老', '').replaceAll('有限公司', '');
			let index = name.length - 2;
			index = index >= 0 ? index : 0;
			return name.substring(index);
		};
	})

	const showCheck = computed(() => {
		// console.log(checkedCount.value);
		return checkedCount.value === 0;
	})

	const checkedText = computed(() => {
		let text = [];
		data.list.map((v) => {
			if (v.checked) text.push(v.name);
		});
		return text.join(',');
	})

	const checkedCount = computed(() => {
		let count = 0;
		data.list.map((v) => {
			if (v.checked) count++;
		});
		return count;
	})

	function chooseHandle(index) {
		let checked = data.list[index].checked;
		if (data.maxCount <= checkedCount.value && !checked) return false;
		data.list[index].checked = !checked;
		if (checkedCount.value == data.maxCount && data.maxCount == 1 && !data.dufaultIds) {
			submit();
		}
	}

	function submit() {
		let checkList = [];
		data.list.map((v) => {
			if (v.checked) {
				checkList.push({
					id: v.id,
					name: v.name
				});
			}
		});
		let backParams = {
			checkList: checkList
		};
		if (data.pageType) backParams.backType = data.pageType;
		uni.$emit('choose', backParams);
		uni.$u.route({
			type: 'back'
		});
	}

	function queryList(pageNo, pageSize) {
		/* uni.showLoading({
			title: '加载中...',
			mask: true
		})
		let list = [];
		for (var i = 0; i < 9; i++) {
			let id = i + 1;
			list.push({
				id: id,
				name: `test${id}`,
				des: '已经服务11人',
				checked: data.dufaultIds.indexOf(id) != -1
			})
		} */
		console.log('data==>', data);
		if (data.pageType === 'user') {
			getUserList(pageNo, pageSize);
		} else if (data.pageType === 'company') {
			getFirmList(pageNo, pageSize);
		}
		/* setTimeout(() => {
			paging.value.complete(list);
			uni.hideLoading();
		}, 500) */
	}

	function getUserList(pageNo, pageSize) {
		let reqParmas = {
			pageNum: pageNo,
			pageSize
		}
		if(typeof data.query === 'object' 
		&& Object.keys(data.query).length>0){
			reqParmas = uni.$u.deepMerge(reqParmas, data.query);
		}
		if(data.keyword) {
			reqParmas.name = data.keyword;
		}

		getCompanyNursesList({
			parmas: reqParmas,
			custom: {
				catch: true
			}
		}).then(res => {
			let list = [];
			res.map(item => {
				list.push({
					id: item.userId,
					name: item.name,
					des: `工作经验(${item.experienceYears}年)`,
					checked: data.dufaultIds.indexOf(item.userId) != -1
				})
			})
			paging.value.complete(list);
		})
	}

	function getFirmList(pageNo, pageSize) {
		let reqParmas = {
			pageNum: pageNo,
			pageSize
		}
		if(typeof data.query === 'object' 
		&& Object.keys(data.query).length>0){
			reqParmas = uni.$u.deepMerge(reqParmas, data.query);
		}
		if(data.keyword) {
			reqParmas.name = data.keyword;
		}

		getCompanyList({
			parmas: reqParmas,
			custom: {
				catch: true
			}
		}).then(res => {
			let list = [];
			res.map(item => {
				list.push({
					id: item.companyId,
					name: item.name,
					des: `最大派单数(${item.count})`,
					checked: data.dufaultIds.indexOf(item.companyId) != -1
				})
			})
			paging.value.complete(list);

		})
	}

	const paging = ref(null)

	function search() {
		paging.value.reload();
	}


	function cancel() {
		data.list.map((v) => {
			if (v.checked) v.checked = false;
		});
	}


	onLoad((options) => {
		if (options.maxCount) data.maxCount = options.maxCount;
		if (options.dufaultIds) data.dufaultIds = options.dufaultIds;
		if (options.pageType) data.pageType = options.pageType;
	})
</script>
<style>
	page {
		background-color: #F6FAFF;
	}
</style>
<style lang="scss" scoped>
	::v-deep {
		.u-navbar__content__title {
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
		}

		.u-navbar__content {
			background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
		}
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}

	.radio {
		background-color: #fff;
		border: 1px solid #909399;
		border-radius: 50%;
		height: 45rpx;
		width: 45rpx;
		justify-content: center;
	}

	.radio-active {
		background-color: #2979ff;
		border: 1px solid #2979ff;
	}

	.p-item {
		padding: 20rpx;
		align-items: center;
		background-color: #fff;
		margin: 20rpx 0;
	}

	.p-item:active {
		background-color: #e8e8e8;
	}

	.l-fixed {
		&__placeholder {
			height: 100rpx;
		}

		&__box {
			position: fixed;
			width: 710rpx;
			padding: 20rpx;
			bottom: 0;
			height: 120rpx;
			border-top: 1px solid #c8c9cc;
			background-color: #fff;
		}
	}

	.text-size-n {
		font-size: 30rpx;
	}

	.text-size-m {
		font-size: 26rpx;
	}

	.text-grey {
		color: rgba(34, 34, 34, .4);
	}
</style>