<style lang='scss' scoped>
.lineRoadNaming{
	width: 100%;
	background-color: #F9F9F9;
	&-title{
		text-align: center;
		padding: 20rpx 0;
	}
	&-content{
		width: 100%;
		padding: 0 $paddingLR;
	}
	&-tree{
		width: 100%;
		height: 500rpx;
		background-color: #fff;
		overflow-y: auto;
		border-radius: 16rpx;
		box-shadow: $box-shadow;
	}
	&-form{
		margin-top: 30rpx;
		border-radius: 16rpx;
		padding: $paddingTB $paddingLR;
		background-color: #fff;
		box-shadow: $box-shadow;
		/* box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08); */
		&-row{
			display: flex;
			align-items: center;
			/* justify-content: space-between; */
			margin-bottom: 20rpx;
			&-label{
				width: 160rpx;
			}
			&-input{
				width: 450rpx;
				background-color: #F5F5F9;
			}
		}
	}
	&-bottom-btn{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 0;
		background-color: #1C9AFF;
		display: flex;
		justify-content: space-around;
		&-save,&-cancel{
			width: 230rpx;
		}
	}
	.lineRoadNaming-form-row-input-select{
		padding: 0 20rpx;
		background-color: #F5F5F9;
		width: 450rpx;
	}
}
</style>
<template>
	<view class="lineRoadNaming">
		<view class="lineRoadNaming-title">房号选择</view>
		<view class="lineRoadNaming-content">
			<view class="lineRoadNaming-tree">
				<ly-tree :tree-data="data"
					:props="defaultProps"
					node-key="id"
					show-checkbox
					:expand-on-check-node="expandOnCheckNode"
					@check="handleCheck"
					@check-change="handleCheckChange"
				/>
			</view>
			<view class="lineRoadNaming-form">
				<view class="lineRoadNaming-form-row ">
					<view class="lineRoadNaming-form-row-label">线路选择</view>
					<view class="lineRoadNaming-form-row-input-select">
						<u-input type="select" v-model="powerValue" @click="show = true" input-align="center" class="lineRoadNaming-form-row-input"
							:disabled="true" placeholder="请选择线路">
							<u-icon name="home"></u-icon>
						</u-input>
					</view>
				</view>
				<view class="lineRoadNaming-form-row">
					<view class="lineRoadNaming-form-row-label">重新命名</view>
					<u-input input-align="center" class="lineRoadNaming-form-row-input" 
						placeholder="请输入名称">
					</u-input>
				</view>
				<view class="lineRoadNaming-form-row">
					<view class="lineRoadNaming-form-row-label">最大功率</view>
					<u-input input-align="center" class="lineRoadNaming-form-row-input mr10" style="width: 260rpx;"
						placeholder="请输入功率">
					</u-input>
					<view class="mr10">瓦</view>
					<u-button size="mini" type="warning">接线设置</u-button>
				</view>
			</view>
			<u-select v-model="show" :list="list" @confirm="onLineRoadConfirmFn"></u-select>
		</view>
		<view class="lineRoadNaming-bottom-btn">
			<u-button class="lineRoadNaming-bottom-btn-save" shape="circle">保存</u-button>
			<u-button class="lineRoadNaming-bottom-btn-cancel" shape="circle">取消</u-button>
		</view>
	</view>
</template>
<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	export default {
		components: {
			LyTree
		},
		data() {
			return {
				powerValue:"",
				show: false,
				list: [
					{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				expandOnCheckNode: false, // 是否展开选中的节点
				data: [{
					id: 1,
					label: '1栋',
					children: [{
						id: 11,
						label: '1单元',
						children: [{
							id: 111,
							label: '1#101'
						}, {
							id: 112,
							label: '1#102'
						},{
							id: 113,
							label: '1#103'
						}, {
							id: 114,
							label: '1#104'
						},{
							id: 115,
							label: '1#105'
						}, {
							id: 116,
							label: '1#106'
						}]
					},{
						id: 4,
						label: '2单元',
						children: [{
							id: 9,
							label: '2#101'
						}, {
							id: 10,
							label: '2#102'
						}]
					}]
				}, {
					id: 2,
					label: '2栋',
					children: [{
						id: 5,
						label: '1单元',
						children: [{
							id: 9,
							label: '2#101'
						}, {
							id: 10,
							label: '2#102'
						}]
					}, {
						id: 6,
						label: '2单元',
						children: [{
							id: 9,
							label: '2#101'
						}, {
							id: 10,
							label: '2#102'
						}, {
							id: 13,
							label: '2#103'
						}]
					}]
				}, {
					id: 3,
					label: '3栋',
					children: [{
						id: 7,
						label: '二级 3-1',
						children: [{
							id: 9,
							label: '3#101'
						}, {
							id: 10,
							label: '3#102'
						}, {
							id: 14,
							label: '3#103'
						}]
					}, {
						id: 8,
						label: '二级 3-2'
					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				}
			};
		},
		
		methods: {
			onLineRoadConfirmFn(e){
				console.log(e,"e");
				this.powerValue = e[0].label
			},
			handleCheck(obj) {
				// obj: {
				// 	checkedKeys: [9, 5], // 当前选中节点的id数组
				// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
				// 	data: {...}, // 当前节点的数据
				// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
				// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
				// 	node: Node {...} // 当前节点实例
				// }
				
				console.log('handleCheck', obj);
			},
			
			// 只要节点的选中或半选中状态改变就触发（包括设置默认选中，点击选中/取消选中），其相关的所有父子节点都会触发（也就是说选中一个节点时，触发多次，父子节点的选中状态只要被修改就会触发）
			handleCheckChange(obj) {
				// obj: {
				// 	checked: true, // 节点是否选中
				// 	checkedall: false, // 当前树的所有节点是否全选中
				// 	data: {...}, // 节点数据
				// 	indeterminate: false, // 是否半选中
				// 	node: Node {...} // 节点实例
				// }
				
				console.log('handleCheckChange', obj);
			}
		}
	};
</script>
