<template>
	<el-scrollbar :id="contentRef" class="c-content-scrollbar" style="width: 100%;">
		<slot></slot>
	</el-scrollbar>
</template>

<script>
	export default {
		props: {
			height: {
				type: Number,
				require: false,
				default: function() {
					return this.$route.path.startsWith('/display/') ? 100 : 240
				}
			}
		},
		data() {
			return {
				clientHeight: '',
				contentRef: 'contentRef' + Math.floor(Math.random() * 100),
			}
		},
		mounted() {
			this.clientHeight = `${document.documentElement.clientHeight}`
			this.changeFixed()
			this.handleResizeBind = this.handleResize.bind(this, this.contentRef, this.height)
			window.addEventListener('resize', this.handleResizeBind)
		},
		methods: {
			changeFixed() {
				let content = document.getElementById(this.contentRef)
				if (content) {
					content.style.height =  this.clientHeight - this.height + 'px'
				}
			},
			handleResize: (contentRef, height) => {
				let content = document.getElementById(contentRef)
				if(!content){
					//切换顶部tab，会隐藏元素，所以有可能找不到
					return
				}
				let clientHeight = `${document.documentElement.clientHeight}`
				content.style.height =  clientHeight - height + 'px'
			}
		},
		destroyed: function () {
			window.removeEventListener('resize', this.handleResizeBind)
		}
	}
</script>

<style>
.c-content-scrollbar .el-scrollbar__wrap{
  	overflow-y: auto;
	overflow-x: hidden;
}
</style>