<template>
  <div class="script-parent">
    <div class="script-card">
      <tip-script-record ref="tipTaskRecord" :group="group" />
    </div>
    <div class="script-display">
      <display ref="display" :size="size" />
    </div>
  </div>
</template>

<script>
import Display from '@/views/display/index';
import TipScriptRecord from './tipScriptRecord';

export default {
	name: 'ScriptDisplay',
	components: {
		Display,
		TipScriptRecord
	},
	data() {
		return {
			size: {
				width: document.documentElement.clientWidth - 780,
				height: document.documentElement.clientHeight
			},
			group: this.$route.query.group
		};
	},
	computed: {
	},
	watch: {
		'$store.state.app.windowSizeCount': function() {
			this.size = { width: this.$store.state.app.width - 780, height: this.$store.state.app.height};
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .script-parent {
        display: flex;
        flex-flow: row;
        .script-card {
            width: 780px;
        }
    }
</style>
