<template>
    <div class="main">
        <div class="list" :style="{width: widthLeft+'px'}">
            <chart-list ref="list" :height="height"></chart-list>
        </div>
        <drap-left :widthLeft="widthLeft" @drapWidth="drapWidth"></drap-left>
        <transition>
            <router-view style="float: right;" :style="{width: width+'px'}"></router-view>
        </transition>
    </div>
</template>

<script>
    import WindowResizeHandler from '@/mixin/WindowResizeHandler';
    import DrapLeft from '@/views/components/drapLeft/index';
    import ChartList from './manage/list';

    export default {
        name: 'runPlan',
        mixins: [WindowResizeHandler],
        components: {
            DrapLeft,
            ChartList,
        },
        data() {
            return {
                width: 0,
                height: 0,
                widthLeft: 320,
            }
        },
        watch: {
            widthLeft(val) {
                this.setRunPlanResize(val);
            }
        },
        methods: {
            drapWidth(width) {
                this.widthLeft = Number(width);
            },
            setRunPlanResize(LeftWidth) {
                if (this.$refs) {
                    this.width = this._clientWidth - LeftWidth;
                    this.height = this._clientHeight - 150;
                    this.$store.dispatch('runPlan/resize', { width: this.width, height: this.height + 90 });
                } else {
                    setTimeout(() => { this.setRunPlanResize(LeftWidth); }, 300)
                }
            },
            resizeHandler() {
                this.setRunPlanResize(this.widthLeft);
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";

    .main {
        width: 100%;
        height: 100%;

        .list {
            float: left;
        }
    }
</style>