<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" :info="info"></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 NumWidget from '../widgets/NumWidget';
import PriceWidget from '../widgets/PriceWidget';
import LineChartWidget from '../widgets/LineChartWidget';
import BarChartWidget from '../widgets/BarChartWidget';
import PieChartWidget from '../widgets/PieChartWidget';
import TopWidget from '../widgets/TopWidget';
import UserHoldTop from '../widgets/UserHoldTop';
import MonthWidget from '../widgets/MonthWidget';

export default {
    created() {},
    data() {
        return {
            layout: [],
            editable: false,
            info: {}
        };
    },
    mounted() {
        if (this.$store.state.userInfo.company) {
            this.layout = [
                { x: 0, y: 0, w: 6, h: 4, i: '2', name: 'PriceWidget' },
                { x: 6, y: 0, w: 6, h: 4, i: '1', name: 'NumWidget' },
                // { x: 0, y: 12, w: 6, h: 6, i: '4', name: 'BarChartWidget' },
                { x: 0, y: 4, w: 12, h: 12, i: '6', name: 'PieChartWidget' }
            ];
        } else {
            this.layout = [
                { x: 6, y: 0, w: 6, h: 16, i: '5', name: 'LineChartWidget' },
                { x: 0, y: 0, w: 3, h: 4, i: '2', name: 'PriceWidget' },
                { x: 3, y: 0, w: 3, h: 4, i: '1', name: 'NumWidget' },
                // { x: 0, y: 12, w: 6, h: 6, i: '4', name: 'BarChartWidget' },
                { x: 0, y: 4, w: 6, h: 12, i: '6', name: 'PieChartWidget' },
                { x: 0, y: 20, w: 6, h: 10, i: '8', name: 'MonthWidget' },
                { x: 6, y: 20, w: 6, h: 10, i: '7', name: 'TopWidget' },
                { x: 6, y: 20, w: 12, h: 10, i: '9', name: 'UserHoldTop' }
            ];
        }
        this.$http.get('/statistic/total').then(res => {
            this.info = res;
        });
    },
    methods: {
        save() {
            console.log(JSON.stringify(this.layout));
            this.editable = false;
        }
    },
    components: {
        GridLayout,
        GridItem,
        UserWidget,
        NumWidget,
        PriceWidget,
        LineChartWidget,
        BarChartWidget,
        PieChartWidget,
        TopWidget,
        MonthWidget,
        UserHoldTop
    }
};
</script>

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