<template>
    <div>
        <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" :value="$data[item.key]"></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 UserWidget from '../widgets/UserWidget';
import OrderWidget from '../widgets/OrderWidget';
import CompanyWidget from '../widgets/CompanyWidget';
import FeeWidget from '../widgets/FeeWidget';
import RecentSales from '../widgets/RecentSales';
import RecentOrder from '../widgets/RecentOrder';

export default {
    created() {
        this.$axios.get('/statistic/data').then(res => {
            this.user = res.data['user'];
            this.company = res.data['company'];
            this.order = res.data['order'];
            this.fee = res.data['fee'];
        });
    },
    data() {
        return {
            layout: [
                { x: 0, y: 0, w: 3, h: 3, i: '0', name: 'UserWidget', key: 'user' },
                { x: 3, y: 0, w: 3, h: 3, i: '1', name: 'CompanyWidget', key: 'company' },
                { x: 6, y: 0, w: 3, h: 3, i: '2', name: 'OrderWidget', key: 'order' },
                { x: 9, y: 0, w: 3, h: 3, i: '3', name: 'FeeWidget', key: 'fee' },
                { x: 0, y: 4, w: 12, h: 12, i: '4', name: 'RecentOrder' },
                { x: 0, y: 10, w: 12, h: 12, i: '5', name: 'RecentSales' }
                /*{ x: 6, y: 4, w: 6, h: 12, i: '6', name: 'PieChartWidget' }*/
            ],
            editable: false,
            user: 0,
            company: 0,
            order: 0,
            fee: 0
        };
    },
    methods: {
        save() {
            console.log(JSON.stringify(this.layout));
            this.editable = false;
        }
    },
    components: {
        GridLayout,
        GridItem,
        UserWidget,
        OrderWidget,
        FeeWidget,
        CompanyWidget,
        RecentSales,
        RecentOrder
    }
};
</script>

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