<template>
	<el-popover
		:value="visible"
    placement="bottom-start"
    trigger="manual"
		:append-to-body="false"
		class="custom-popover"
  >
		<div class="tree-select-wrap">
			<el-tree
				:data="data"
				show-checkbox
				default-expand-all
				node-key="id"
				ref="tree"
				:props="defaultProps"
				@check="handleCheckChange"
			>
			</el-tree>
		</div>
		<el-input
			v-model="model"
			slot="reference"
			placeholder="请选择"
			@keyup.enter.native="handleGetTreeList"
		>
				<el-button slot="append" icon="el-icon-search" @click="handleGetTreeList"></el-button>
		</el-input>
  </el-popover>
</template>
<script>
export default {
	name: 'TreeSelect',
	props: {
		value: {
      type: [String, Number],
      default: undefined
    },
	},
	computed: {
		model: {
      get () {
        return this.value
      },
      set (newVal) {
        this.$emit('input', newVal)
      }
    },
	},
	data () {
		return {
			data: [{
				id: 1,
				label: '一级 1',
				children: [{
					id: 4,
					label: '二级 1-1',
				}]
			}, {
				id: 2,
				label: '一级 2',
				children: [{
					id: 5,
					label: '二级 2-1'
				}, {
					id: 6,
					label: '二级 2-2'
				}]
			}, {
				id: 3,
				label: '一级 3',
				children: [{
					id: 7,
					label: '二级 3-1'
				}, {
					id: 8,
					label: '二级 3-2'
				}]
			}],
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			visible: false
		}
	},
	methods: {
		handleCheckChange () {
			console.log(this.$refs.tree.getCheckedKeys())
		},
		handleGetTreeList () {
			this.visible = !this.visible
		}
	}
}
</script>
<style lang="less" scoped>
.custom-popover {
	/deep/ .el-popover{
		width: 100%!important;
	}
	.tree-select-wrap {
		max-height: 240px;
		overflow: auto;
		/deep/ .el-tree-node__content {
			height: 24px;
		}
		/deep/ .el-tree-node__content > .el-checkbox:last-of-type {
			margin-top: 0;
			margin-right: 0;
		}
		/deep/ .el-tree-node__label {
			height: 24px;
			line-height: 24px;
			margin-left: 42px;
		}
		/deep/ .el-checkbox {
			height: 24px;
			line-height: 24px;
		}
		/deep/ .el-tree-node__content > .el-tree-node__expand-icon {
			padding: 2px;
		}
	}
}
</style>