<template>
	<view>
		<view class="paibanCard">
			<view class="title">
				<view class="line"></view>
				选择{{title}}
			</view>
			<view style="background: #FFFFFF;border-radius: 20rpx;padding: 26rpx 41rpx;">
				<view class="pickPerson">
					<view class="picktitle">
						<image src="../../static/images/fireman/fire.png"
							style="width: 26rpx;height: 32rpx;margin-right: 10rpx;"></image>
						{{title}}
					</view>
					<image src="../../static/images/fireman/add.png" style="width: 135rpx;height: 46rpx;"
						@click="itemclick(true)"></image>
				</view>
			</view>
		</view>
		<!-- 异步加载demo -->
		<!-- <next-tree :selectParent="false" :checkStrictly="true" :multiple="true" ref="nextTreeAsyncRef"
			:treeData="asyncTreeData" :loadData="loadData" /> -->

		<next-tree :expandedKeys="['3','3-1']" :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef"
			:checkStrictly="checkStrictly" :selectParent="selectParent" :multiple="multiple" :treeData="list"
			@cancel="oncancel" @confirm="onconfirm">
		</next-tree>
	</view>
</template>

<script>
	let self = null;
	export default {
		name: "choosePerson",
		props: {
			// 下拉树的数组
			list: {
				type: Array
			},
			// 标题字符
			title: {
				type: String,
				default: ""
			},
			// 最多选择几个节点
			count: {
				type: String,
				default: "1"
			}
		},
		mounted() {
			// console.log(this._props, "this._props");
		},
		data() {
			return {
				multiple: false,
				selectParent: false,
				checkStrictly: false,
				activeId: '',
				localData: {
					'a1': [{
						id: 'a1-1',
						label: 'a1-1'
					}, {
						id: 'a1-2',
						label: 'a1-2',
						children: []
					}, {
						id: 'a1-3',
						label: 'a1-3'
					}],
					'b1': [{
						id: 'b1-1',
						label: 'b1-1',
						children: []
					}, {
						id: 'b1-2',
						label: 'b1-2'
					}, {
						id: 'b1-3',
						label: 'b1-3'
					}],
					'c1': [{
						id: 'c1-1',
						label: 'c1-1'
					}, {
						id: 'c1-2',
						label: 'c1-2'
					}, {
						id: 'c1-3',
						label: 'c1-3',
						children: []
					}],
					'a1-2': [{
						id: 'a1-2-1',
						label: 'a1-2-1'
					}, {
						id: 'a1-2-2',
						label: 'a1-2-2'
					}],
					'b1-1': [{
						id: 'b1-1-1',
						label: 'b1-1-1'
					}, {
						id: 'b1-1-2',
						label: 'b1-1-2'
					}],
					'c1-3': [{
						id: 'c1-3-1',
						label: 'c1-3-1'
					}, {
						id: 'c1-3-2',
						label: 'c1-3-2'
					}]
				},
				asyncTreeData: [{
					id: 'a1',
					label: 'a1',
					children: []
				}, {
					id: 'b1',
					label: 'b1',
					children: []
				}, {
					id: 'c1',
					label: 'c1',
					children: []
				}],
				treeData: [{
						id: '1',
						label: '北京',
						checked: false
					},
					{
						id: '2',
						label: '上海',
						checked: false,
						children: [{
								id: '2-1',
								label: '上海-1',
								checked: false
							},
							{
								id: '2-2',
								label: '上海-2',
								checked: false
							},
							{
								id: '2-3',
								label: '上海-3',
								checked: false
							},
						]
					},
					{
						id: '3',
						label: '广州',
						children: [{
								id: '3-1',
								label: '海珠区',
								checked: false,
								children: [{
										id: '3-1-1',
										label: '海珠区-1',
										checked: false,
										disabled: true
									},
									{
										id: '3-1-2',
										label: '海珠区-2',
										checked: false
									},
									{
										id: '3-1-4',
										label: '海珠区-3',
										checked: false
									},
									{
										id: '3-1-5',
										label: '海珠区-4',
										checked: false
									},
									{
										id: '3-1-6',
										label: '海珠区-5',
										checked: false
									},
									{
										id: '3-1-7',
										label: '海珠区-6',
										checked: false
									},
									{
										id: '3-1-8',
										label: '海珠区-7',
										checked: false
									},
									{
										id: '3-1-9',
										label: '海珠区-8',
										checked: false
									},
									{
										id: '3-1-10',
										label: '海珠区-9',
										checked: false
									},
									{
										id: '3-1-11',
										label: '海珠区-10',
										checked: false
									},
								]
							},
							{
								id: '3-2',
								label: '番禺区',
								checked: false,
								children: [{
										id: '3-2-1',
										label: '番禺区-1',
										checked: false
									},
									{
										id: '3-2-2',
										label: '番禺区-2',
										checked: false
									},
									{
										id: '3-2-4',
										label: '番禺区-3',
										checked: false
									},
									{
										id: '3-2-5',
										label: '番禺区-4',
										checked: false
									},
									{
										id: '3-2-6',
										label: '番禺区-5',
										checked: false
									},
									{
										id: '3-2-7',
										label: '番禺区-6',
										checked: false
									},
									{
										id: '3-2-8',
										label: '番禺区-7',
										checked: false
									},
									{
										id: '3-2-9',
										label: '番禺区-8',
										checked: false
									},
									{
										id: '3-2-10',
										label: '番禺区-9',
										checked: false
									},
									{
										id: '3-2-11',
										label: '番禺区-10',
										checked: false
									},
								]
							},
							{
								id: '3-3',
								label: '黄埔区',
								checked: false,
								children: [{
										id: '3-3-1',
										label: '黄埔区-1',
										checked: false
									},
									{
										id: '3-3-2',
										label: '黄埔区-2',
										checked: false
									},
									{
										id: '3-3-3',
										label: '黄埔区-3',
										checked: false
									},
									{
										id: '3-3-4',
										label: '黄埔区-4',
										checked: false
									},
									{
										id: '3-3-5',
										label: '黄埔区-5',
										checked: false
									},
									{
										id: '3-3-6',
										label: '黄埔区-6',
										checked: false
									},
									{
										id: '3-3-7',
										label: '黄埔区-7',
										checked: false
									},
									{
										id: '3-3-8',
										label: '黄埔区-8',
										checked: false
									},
									{
										id: '3-3-9',
										label: '黄埔区-9',
										checked: false
									},
									{
										id: '3-3-10',
										label: '黄埔区-10',
										checked: false
									},
									{
										id: '3-3-12',
										label: '黄埔区-11',
										checked: false
									},
									{
										id: '3-3-13',
										label: '黄埔区-12',
										checked: false
									},
									{
										id: '3-3-13',
										label: '黄埔区-13',
										checked: false
									},
									{
										id: '3-3-14',
										label: '黄埔区-14',
										checked: false
									},
									{
										id: '3-3-15',
										label: '黄埔区-15',
										checked: false
									},
									{
										id: '3-3-16',
										label: '黄埔区-16',
										checked: false
									},
									{
										id: '3-3-17',
										label: '黄埔区-17',
										checked: false
									},
									{
										id: '3-3-18',
										label: '黄埔区-18',
										checked: false
									},
									{
										id: '3-3-19',
										label: '黄埔区-19',
										checked: false
									},
									{
										id: '3-3-20',
										label: '黄埔区-20',
										checked: false
									},
									{
										id: '3-3-21',
										label: '黄埔区-21',
										checked: false
									},
									{
										id: '3-3-22',
										label: '黄埔区-22',
										checked: false
									},
									{
										id: '3-3-23',
										label: '黄埔区-23',
										checked: false
									},
									{
										id: '3-3-24',
										label: '黄埔区-24',
										checked: false
									},
									{
										id: '3-3-25',
										label: '黄埔区-25',
										checked: false
									},
									{
										id: '3-3-26',
										label: '黄埔区-26',
										checked: false
									},
									{
										id: '3-3-27',
										label: '黄埔区-27',
										checked: false
									},
									{
										id: '3-3-28',
										label: '黄埔区-28',
										checked: false
									},
									{
										id: '3-3-29',
										label: '黄埔区-29',
										checked: false
									},
									{
										id: '3-3-30',
										label: '黄埔区-30',
										checked: false
									},
									{
										id: '3-3-31',
										label: '黄埔区-31',
										checked: false
									},
									{
										id: '3-3-32',
										label: '黄埔区-32',
										checked: false
									},
									{
										id: '3-3-33',
										label: '黄埔区-33',
										checked: false
									},
									{
										id: '3-3-34',
										label: '黄埔区-34',
										checked: false
									},
									{
										id: '3-3-35',
										label: '黄埔区-35',
										checked: false
									},
									{
										id: '3-3-36',
										label: '黄埔区-36',
										checked: false
									},
								]
							},
						],
					}
				]
			}
		},
		methods: {
			openTree: function() {
				this.$refs.nextTreeAsyncRef.showTree = true
			},
			changeVerify: function(current, chooseList) {
				// 注意：返回非空字符串会阻止原有行为，并提示返回的字符串
				// 如果函数体不做return返回值，即验证通过，控件正常处理业务
				// console.log('当前变化的数据', current)
				// console.log('已选择的数据', chooseList)
				if (chooseList && chooseList.length > this._props.count) {

					return `最多可以选择${this._props.count}个人员`
				}
			},
			checkedFunc: function(id) {
				if (this.activeId === id) {
					this.activeId = '';
					this.$refs.nextTreeRef.checkedFunc(id, false)
				} else {
					this.activeId = id;
					this.$refs.nextTreeRef.checkedFunc(id)
				}
			},
			loadData(nodeItem) {
				// 同步实现的代码处理方式 可以返回单个子节点的集合也可以返回子孙节点的集合
				// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}

				// if(nodeItem && this.localData[nodeItem.id]) {
				//  return this.localData[nodeItem.id]
				// } else {
				//  return []
				// }
				// 异步的代码实现方式 可以返回单个子节点的集合也可以返回子孙节点的集合
				// 如果期望子集节点中还存在孙子节点可以打开，请在初始化数据的时候，初始化个空数组的子节点配置值{[this.childrenKey]: []}
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						if (nodeItem && self.localData[nodeItem.id]) {
							return resolve(self.localData[nodeItem.id])
						} else {
							return resolve([])
						}
					}, 1000)
				})
			},
			getTitle: function(checked) {
				return `已选：${checked.length}项`
			},
			echoDefault: function() {
				const selectIds = ['2-1', '3-3-35']
				this.checkedTreeData(this.treeData, selectIds)
				// console.log('treeData的数据：', this.treeData)
				this.multiple = true
				this.$refs.nextTreeRef.showTree = true
			},
			itemclick: function(_multiple, _selectParent, _checkStrictly = false) {
				this.multiple = _multiple
				this.selectParent = _selectParent
				this.checkStrictly = _checkStrictly
				this.$refs.nextTreeRef.showTree = true
			},
			checkedTreeData: function(treeData, selectIds) {
				// 注意 vue2当数据深嵌套时，如果没有在treeData里面初始化checked属性，那在改变数据的时候直接将checked属性赋值为true，这时候ui界面有可能不会更新，
				// 这时候建议使用this.$set去更新checked属性值，或者在初始化this.treeData的时候初始化checked属性
				(treeData || []).map(item => {
					if (selectIds.indexOf(item.id) !== -1) {
						item.checked = true
					} else {
						item.checked = false
					}
					if (item.children && item.children.length) {
						this.checkedTreeData(item.children, selectIds)
					}
				})
			},
			onconfirm: function(list) {
				this.$emit("choosePerson", list)
				// console.log('选中项的数量列表list：', list)
			},
			oncancel: function() {
				// 清除treeData的选中状态
				this.checkedTreeData(this.treeData, [])
			}
		},
		created() {
			self = this
		}
	}
</script>
<style lang="scss">
	page {
		box-sizing: border-box !important;
		padding: 24rpx;
		background-color: #eff0f4;

		/deep/.uni-swipe {
			background-color: #fff;
			padding: 15rpx 0 15rpx 10rpx;
		}

		/deep/.uni-card {
			border-radius: 10rpx;
		}

		/deep/.u-list {
			height: 0 !important;
		}

		/deep/.u-row {
			margin-bottom: 10rpx;
			padding: 10rpx 30rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between !important;
			background-color: #f9fbfc;

			:first-child {
				color: black;
			}
		}

		/deep/.uni-date-x--border {
			border: none;
			padding: 15rpx;
			border-radius: 0;
		}

		/deep/.uniui-calendar {

			color: #454545;
			font-weight: 500;
			font-size: 28rpx;
		}

		/deep/.uniui-calendar:before {
			content: none;
		}

		/deep/.input1 .uniui-calendar :before {
			content: '开始日期';
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
		}

		/deep/.input2 .uniui-calendar :before {
			content: '结束日期';
		}

		/deep/.uni-icons {
			color: #171819 !important;
			font-size: 30rpx !important;
		}

		/deep/.uni-date__x-input {
			padding-left: 50rpx;
		}

		/deep/.uni-date-x {
			background: #F5F6FA;
			border-radius: 20rpx;
			padding: 10rpx 15rpx;
		}

		/deep/.uni-swipe_box {
			background: #F5F6FA;
			border-radius: 20rpx;
			padding: 26rpx 22rpx;
		}

		.paibanCard {
			margin-bottom: 15rpx;

			.title {
				margin-bottom: 15rpx;
				font-family: Noto Sans S Chinese;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				display: flex;
				align-items: center;

				.line {
					width: 4rpx;
					height: 30rpx;
					background: #358FFE;
					border-radius: 2rpx;
					margin-right: 20rpx;
				}
			}

			.pickTime {
				background-color: #fff;
				border-radius: 10rpx;
				padding: 43rpx 20rpx;
			}

			.pickPerson {
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				// padding: 15rpx;
				justify-content: space-between;
				// margin-bottom: 15rpx;
			}

			.picktitle {
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				font-size: 30rpx;
				color: #333333;
				display: flex;
				align-items: center;
			}
		}

		.addPaiBan {
			width: 85%;
			background: linear-gradient(0deg, #2A86FF, #8FBCFF);
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			padding: 20rpx;
			border-radius: 40rpx;
			margin: 50rpx auto;
		}
	}
</style>