<template>
    <div class="dashboard">
        <grid-layout
            style="margin: 0 -10px;"
            :layout="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="editable"
            :is-resizable="editable"
            :is-mirrored="false"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
        >
            <grid-item
                v-for="item in layout"
                class="widget-wrapper"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :key="item.i"
            >
                <component :is="item.name"></component>
            </grid-item>
        </grid-layout>
        <!-- <el-button v-if="editable" @click="save">保存</el-button>
        <el-button v-else @click="editable = true">编辑</el-button> -->
    </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';
import LineChartWidget from '../widgets/LineChartWidget';
import BarChartWidget from '../widgets/BarChartWidget';
import PieChartWidget from '../widgets/PieChartWidget';
import MenusWidget from '../widgets/MenusWidget';
import WaitWidget from '../widgets/WaitWidget';
import DoingWidget from '../widgets/DoingWidget';

export default {
    created() {},
    data() {
        return {
            layout: [
                { x: 0, y: 0, w: 12, h: 4, i: '0', name: 'MenusWidget' },
                { x: 0, y: 4, w: 6, h: 10, i: '1', name: 'WaitWidget' },
                { x: 0, y: 10, w: 6, h: 10, i: '2', name: 'LineChartWidget' },
                { x: 6, y: 4, w: 6, h: 20, i: '3', name: 'DoingWidget' }
            ],
            editable: false
        };
    },
    methods: {
        save() {
            console.log(JSON.stringify(this.layout));
            this.editable = false;
        }
    },
    components: {
        GridLayout,
        GridItem,
        MenusWidget,
        LineChartWidget,
        BarChartWidget,
        PieChartWidget,
        WaitWidget,
        DoingWidget
    }
};
</script>

<style lang="less" scoped>
.dashboard {
    padding: 10px 20px;
}
/deep/ .widget-wrapper {
    display: flex;
    flex-direction: column;
    .el-card {
        flex-grow: 1;
    }
}
</style>
