<template>
    <div>
        <grid-layout
            style="margin: 0 -10px;"
            :layout="layout"
            :col-num="12"
            :row-height="10"
            :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 Video1 from '../widgets/Video1';
import Video2 from '../widgets/Video2';
import Video3 from '../widgets/Video3';
import Video4 from '../widgets/Video4';
import Video5 from '../widgets/Video5';

export default {
    created() {},
    data() {
        return {
            layout: [
                { x: 0, y: 0, w: 4, h: 17.5, i: '0', name: 'Video3' },
                { x: 0, y: 0, w: 4, h: 20, i: '2', name: 'Video1' },
                { x: 4, y: 4, w: 4, h: 16.5, i: '3', name: 'Video4' },
                { x: 8, y: 4, w: 3, h: 24, i: '1', name: 'Video2' },
                { x: 4, y: 12.5, w: 4, h: 17.5, i: '4', name: 'Video5' }
                // { x: 0, y: 12.5, w: 4, h: 12.5, i: '5', name: 'Video4' }
                // { x: 8, y: 0, w: 4, h: 13.5, i: '6', name: 'Video3' }
            ],
            editable: false
        };
    },
    methods: {
        save() {
            console.log(JSON.stringify(this.layout));
            this.editable = false;
        }
    },
    components: {
        GridLayout,
        GridItem,
        Video1,
        Video2,
        Video3,
        Video4,
        Video5
    }
};
</script>

<style lang="less">
.widget-wrapper {
    display: flex;
    flex-direction: column;
    .el-card {
        flex-grow: 1;
    }
}
</style>
