<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 VipUserWidget from "../widgets/VipUserWidget";
    import GoodsWidget from "../widgets/GoodsWidget";
    import OrderWidget from "../widgets/OrderWidget";
    import LineChartWidget from "../widgets/LineChartWidget";
    import BarChartWidget from "../widgets/BarChartWidget";
    import OrderListWidget from "../widgets/OrderListWidget";

    export default {
        created() {
            // 请求数据
            this.$axios.get("/platformFlow/getDashboard").then(res => {
                this.tableList = res.data["今日商品销量排行"];
                this.vipNum = res.data["merchant"];
                this.goodsNum = res.data["rider"];
                this.orderNum = res.data["order"];
                this.userNum = res.data["user"];
                this.LineChartInfo = res.data["月份新入会员统计"];
            });
        },
        data() {
            return {
                layout: [
                    {
                        x: 0,
                        y: 0,
                        w: 3,
                        h: 4,
                        i: "0",
                        name: "UserWidget",
                        key: "userNum"
                    },
                    {
                        x: 3,
                        y: 0,
                        w: 3,
                        h: 4,
                        i: "1",
                        name: "VipUserWidget",
                        key: "vipNum"
                    },
                    {
                        x: 6,
                        y: 0,
                        w: 3,
                        h: 4,
                        i: "2",
                        name: "GoodsWidget",
                        key: "goodsNum"
                    },
                    {
                        x: 9,
                        y: 0,
                        w: 3,
                        h: 4,
                        i: "3",
                        name: "OrderWidget",
                        key: "orderNum"
                    },
                    {
                        x: 0,
                        y: 4,
                        w: 6,
                        h: 12,
                        i: "5",
                        name: "LineChartWidget",
                        key: "LineChartInfo"
                    },
                    // { x: 0, y: 10, w: 6, h: 6, i: "4", name: "BarChartWidget" },
                    {
                        x: 6,
                        y: 4,
                        w: 6,
                        h: 12,
                        i: "6",
                        name: "OrderListWidget",
                        key: "tableList"
                    }
                ],
                editable: false,
                tableList: [],
                vipNum: 0,
                goodsNum: 0,
                userNum: 0,
                orderNum: 0,
                LineChartInfo: {}
            };
        },
        methods: {
            save() {
                console.log(JSON.stringify(this.layout));
                this.editable = false;
            },
            getValue(key) {
                console.log(this.$data);
                return this[key];
            }
        },
        components: {
            GridLayout,
            GridItem,
            UserWidget,
            VipUserWidget,
            OrderWidget,
            GoodsWidget,
            LineChartWidget,
            BarChartWidget,
            OrderListWidget
        }
    };
</script>

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