<template>
    <widget-card :bodyStyle="bodyStyle">
        <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
        <div class="info">
            <div class="text">牧场</div>
            <div class="num">{{num}}</div>
        </div>
    </widget-card>
</template>
<script>
    import WidgetCard from './WidgetCard'
    import axios from 'axios'

    export default {
        created() {
            axios.get(this.$widgetBaseUrl + 'api/Values/GetFrameCount', {
                params: {
                    FrameName: this.farmName
                },
                withCredentials: false
            }).then(res => {
                this.num = res.data.rtnCode
            })
        },
        data() {
            return {
                bodyStyle: {
                    display: 'flex',
                    alignItems: 'center'
                },
                num: 0
            }
        },
        components: {
            WidgetCard
        }
    }
</script>
<style lang="less" scoped>
    .info {
        flex-grow: 1;
        text-align: right;
        .text {
            color: #999;
            font-size: 16px;
            margin-bottom: 6px;
        }
        .num {
            font-size: 20px;
            color: #333;
        }
    }
</style>
