<template>
	<pane icon="el-icon-s-open" :title="$t('panes.Playground')">
		<div class="pane-playground">
			<div class="playground-ctrl">
				<!-- <label class="el-form-item__label">滑动滚轮进行缩放</label> -->
				<el-form :inline="true" class="filter-bar" style="padding:3px 6px;" size="mini" @submit.native.prevent>
					<!-- <el-form-item>
						<el-checkbox
							v-model="overFlowState"
							size="mini">舞台边缘裁剪
						</el-checkbox>
					</el-form-item> -->
					<el-form-item>
						<el-checkbox
							v-model="autoSelectState"
							size="mini">自动框选
						</el-checkbox>
					</el-form-item>
					<el-form-item>
						<span class="stage-set-label">宽度:</span>
						<el-input class="el-input el-input--mini" v-model="designWidth" style="width:50px" readonly=""/>
						<span class="stage-set-label">高度:</span>
						<el-input class="el-input el-input--mini" v-model="designHeight" style="width:50px"/>
					</el-form-item>
					<el-form-item>
						<span class="stage-set-label">缩放:</span>
						<el-button size="mini" @click="setZoom(true)"><i class="el-icon-plus"></i></el-button>
						<el-input class="el-input el-input--mini" :value="parseInt(zoom*100)+'%'" style="width:60px" readonly/>
						<el-button size="mini" @click="setZoom(false)"><i class="el-icon-minus"></i></el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="draw-body">
				<div class="zero-playground-body-center" :style="playgroundStyle">
					<!-- <div class="zero-playground-draw-panel"> -->
					<draw-canvas-panel></draw-canvas-panel>
					<!-- </div> -->
				</div>
			</div>
		</div>
	</pane>
</template>

<script>
	import Pane from '../../components/Pane';
	import DrawPanel from './components/drawPanel';
	import DrawCanvasPanel from './components/drawCanvasPanel';
	import events from "@/global-events.js"

	export default {
		name: 'Playground',
		components: {Pane, DrawPanel, DrawCanvasPanel},
		props: {},

		data() {
			return {
				zoom: 0.5,
				hasCtrlState: false,
				overFlowState: false,
				autoSelectState: true,
				designWidth: 750,
				designHeight: 1624
			}
		},
		methods: {

			mouseWheel(e) {
				if (!this.hasCtrlState) {
					return;
				}
				if (e.deltaY > 0) {
					this.setZoom(false)
				} else if (e.deltaY < 0) {
					this.setZoom(true)
				}
				//console.log(this.zoom)
			},
			setZoom(state) {
				if (state) {
					if (this.zoom >= 1.4) {
						this.zoom = 1.4
					} else {
						this.zoom += 0.05
					}
				} else {
					if (this.zoom <= 0.2) {
						this.zoom = 0.2
					} else {
						this.zoom -= 0.05
					}
				}
				//	this.zoom=this.zoom.toFixed(2)
				events.$emit('setPlaygroundZoom', {zoom: this.zoom});

			},
			keyDo(state) {
				//console.log(state)
				this.hasCtrlState = state;
			},
			overFlowCon() {
			}
		},
		computed: {
			playgroundStyle() {
				//this.zoom=0.5;
				let style = {
					zoom: `${this.zoom}`,
					width: `${this.designWidth}px`,
					height: `${this.designHeight}px`
				}
				if (this.overFlowState) {
					style.overflow = "hidden"
				} else {
					style.overflow = "initial"
				}

				//	console.log(1213,style)
				return style
			},
		},
		created() {
			//alert()
			this.zoom = 0.5;

			events.$emit('autoSelectState', this.autoSelectState)

			if (localStorage.designHeight) {
				this.designHeight = parseInt(localStorage.designHeight)
			}

			if (localStorage.designWidth) {
				this.designWidth = parseInt(localStorage.designWidth)
			}

			events.$emit('designWidth', this.designWidth);
			events.$emit('designHeight', this.designHeight);

			document.body.addEventListener('mousewheel', (e) => {
				this.mouseWheel(e)
			}, false)

			document.onkeydown = (e) => {
				let key = window.event.keyCode;
				if (key == 18) {
					this.keyDo(true);
				}
			};
			document.onkeyup = (e) => {
				let key = window.event.keyCode;
				if (key == 18) {
					this.keyDo(false);
				}
			};


		},
		mounted() {
			events.$emit('setPlaygroundZoom', {zoom: this.zoom});
			//console.log(123)
		},
		watch: {
			autoSelectState() {
				events.$emit('autoSelectState', this.autoSelectState);
			},
			designWidth() {
				localStorage.designWidth = this.designWidth
				events.$emit('designWidth', this.designWidth);
			},
			designHeight() {
				localStorage.designHeight = this.designHeight
				events.$emit('designHeight', this.designHeight);
			}
		},
	};
</script>

<style lang="scss">

</style>
