<template>
    <div style="padding-bottom: 80px">
        <div class="edit-icon-wrapper">
            <template v-if="editable">
                <i class="edit-icon el-icon-plus"></i>
                <i class="edit-icon el-icon-close" @click="editable = false"></i>
                <i class="edit-icon el-icon-check" @click="save"></i>
            </template>
            <i v-else class="edit-icon el-icon-edit" @click="editable=true"></i>
        </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"></component>
            </grid-item>
        </grid-layout>
    </div>
</template>

<script>
    import {GridLayout, GridItem} from 'vue-grid-layout'
    import defaultLayout from './DashboardDefaultLayout.json'
    import {mapState} from 'vuex'

    export default {
        created() {
            let layout;
            try {
                let config = JSON.parse(this.userInfo.config);
                layout = config.dashboard;
            } catch (e) {
            }
            if (!layout) {
                layout = defaultLayout
            }
            // layout = defaultLayout;
            this.layout = layout;
        },
        data() {
            return {
                layout: [],
                editable: false
            }
        },
        computed: {
            ...mapState(['userInfo'])
        },
        methods: {
            save() {
                console.log(JSON.stringify(this.layout, null, 4));
                this.editable = false;
                let config = JSON.parse(this.userInfo.config || "{}");
                config.dashboard = this.layout;
                config = JSON.stringify(config);
                this.$http.post({
                    url: '/userInfo/update',
                    data: {
                        id: this.userInfo.id,
                        config: config
                    }
                }).then(res => {
                    if (res.success) {
                        this.$message.success('保存成功')
                    }
                })
            }
        }
        ,
        components: {
            GridLayout,
            GridItem,
            CowStructure: () => import('../widgets/CowStructure'),
            FarmNum: () => import('../widgets/FarmNum'),
            AverageLactation: () => import('../widgets/AverageLactation'),
            AreaLivestock: () => import('../widgets/AreaLivestock'),
            CowNum: () => import('../widgets/CowNum'),
            CowStockChange: () => import('../widgets/CowStockChange'),
            CowDistribution: () => import('../widgets/CowDistribution')
        }
    }
</script>

<style lang="less">
    .edit-icon-wrapper {
        position: fixed;
        bottom: 40px;
        right: 40px;
        display: flex;
        flex-direction: column;
        z-index: 999;
        .edit-icon {
            margin-top: 20px;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            background: #ffffff;
            text-align: center;
            line-height: 40px;
            box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
            cursor: pointer;
            &:hover {
                background: fade(#ffffff, 20%);
            }
        }
    }

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