<template>
    <div class="dashboard">
        <div class="top">
            <div class="title">录入数据</div>
            <div class="border"></div>
            <div class="content">
                <el-button class="btn" type="info">总计</el-button>
                <div class="conTent">
                    <div class="text">
                        <div class="text1">政策</div>
                        <div class="text2">{{ list.policy }}</div>
                    </div>
                    <div class="text">
                        <div class="text1">法律</div>
                        <div class="text2">{{ list.law }}</div>
                    </div>
                    <div class="text">
                        <div class="text1">知产</div>
                        <div class="text2">{{ list.intellectualProperty }}</div>
                    </div>
                    <div class="text">
                        <div class="text1">技术</div>
                        <div class="text2">{{ list.technology }}</div>
                    </div>
                    <div class="text">
                        <div class="text1">产品</div>
                        <div class="text2">{{ list.product }}</div>
                    </div>
                    <div class="text">
                        <div class="text1">企业</div>
                        <div class="text2">{{ list.company }}</div>
                    </div>
                    <div class="text">
                        <div class="text1">专家</div>
                        <div class="text2">{{ list.expert }}</div>
                    </div>
                    <div class="text">
                        <div class="text1">军采信息</div>
                        <div class="text2">{{ list.purchase }}</div>
                    </div>
                    <div class="text">
                        <div class="text1">成交案例</div>
                        <div class="text2">{{ list.successCase }}</div>
                    </div>
                </div>
            </div>
        </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 PersonalWidget from '../widgets/PersonalWidget';
// import InstitutionlWidget from '../widgets/InstitutionlWidget';
// import LineChartWidget from '../widgets/LineChartWidget';
// import BarChartWidget from '../widgets/BarChartWidget';
import RecentDemandWidget from '../widgets/RecentDemandWidget';
import RecentSupplyWidget from '../widgets/RecentSupplyWidget';
import RecentDemand from '../widgets/RecentDemand';
import RecentSupply from '../widgets/RecentSupply';

export default {
    created() {
        this.$axios.post('/statistic/getTotal').then(res => {
            // console.log(res);
            this.list = res.data;
            // this.user = res.data['user'];
            // this.personal = res.data['personal'];
            // this.institution = res.data['institution'];
        });
    },
    data() {
        return {
            layout: [
                // { x: 0, y: 0, w: 4, h: 4, i: '0', name: 'UserWidget', key: 'user' },
                // { x: 4, y: 0, w: 4, h: 4, i: '1', name: 'PersonalWidget', key: 'personal' },
                // { x: 8, y: 0, w: 4, h: 4, i: '2', name: 'InstitutionlWidget', key: 'institution' },
                // { x: 0, y: 4, w: 6, h: 6, i: '2', name: 'BarChartWidget' },
                // { x: 0, y: 10, w: 6, h: 6, i: '3', name: 'LineChartWidget' },
                { x: 6, y: 4, w: 5.9, h: 12, i: '6', name: 'RecentDemandWidget' },
                { x: 6, y: 4, w: 5.9, h: 12, i: '4', name: 'RecentSupplyWidget' },
                { x: 0, y: 4, w: 5.8, h: 12, i: '3', name: 'RecentDemand' },
                { x: 0, y: 4, w: 5.8, h: 12, i: '5', name: 'RecentSupply' }
            ],
            editable: false,
            user: 0,
            personal: 0,
            institution: 0,
            list: []
        };
    },
    methods: {
        save() {
            console.log(JSON.stringify(this.layout));
            this.editable = false;
        }
    },
    components: {
        GridLayout,
        GridItem,
        // UserWidget,
        // PersonalWidget,
        // InstitutionlWidget,
        // LineChartWidget,
        // BarChartWidget,
        RecentDemandWidget,
        RecentSupplyWidget,
        RecentDemand,
        RecentSupply
    }
};
</script>

<style lang="less" scoped>
.dashboard {
    padding: 10px 20px;
    .top {
        width: 100%;
        padding-bottom: 29px;
        background: #ffffff;
        .title {
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
            margin: 20px 0 0 14px;
            padding-top: 12px;
        }
        .border {
            height: 1px;
            background: #f2f3f5;
            margin: 12px 0 21px 29px;
        }
        .content {
            display: flex;
            .btn {
                width: 90px;
                height: 30px;
                background: rgb(215, 235, 252);
                text-align: center;
                border: 0;
                margin: 28px 54px 0 37px;
                font-size: 16px;
                font-weight: bold;
                color: #214bbe;
            }
            .conTent {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-right: 100px;
                .text {
                    text-align: center;
                    .text1 {
                        font-size: 16px;
                        font-weight: 400;
                        color: #000000;
                        line-height: 22px;
                        margin-bottom: 16px;
                    }
                    .text2 {
                        font-size: 18px;
                        font-family: Arial-BoldMT, Arial;
                        font-weight: normal;
                        color: #214bbe;
                        line-height: 22px;
                        text-align: center;
                    }
                }
            }
        }
    }
}
/deep/ .widget-wrapper {
    display: flex;
    flex-direction: column;
    .el-card {
        flex-grow: 1;
    }
}
</style>
