<template>
    <el-row :gutter="10" type="flex" justify="space-between">
        <el-col>
            <widget-card :bodyStyle="bodyStyle" style="height:100%">
                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
                <div class="info">
                    <div class="text">总牛头数</div>
                    <div class="num">{{realTimeData['总牛头数']}}</div>
                </div>
            </widget-card>
        </el-col>
        <el-col>
            <widget-card :bodyStyle="bodyStyle" style="height:100%">
                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
                <div class="info">
                    <div class="text">泌乳牛头数</div>
                    <div class="num">{{realTimeData['泌乳牛头数']}}</div>
                </div>
            </widget-card>
        </el-col>
        <el-col>
            <widget-card :bodyStyle="bodyStyle" style="height:100%">
                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
                <div class="info">
                    <div class="text">病牛头数</div>
                    <div class="num">{{realTimeData['病牛头数']}}</div>
                </div>
            </widget-card>
        </el-col>
        <el-col>
            <widget-card :bodyStyle="bodyStyle" style="height:100%">
                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
                <div class="info">
                    <div class="text">总牛头数</div>
                    <div class="num">{{realTimeData['后备牛头数']}}</div>
                </div>
            </widget-card>
        </el-col>
        <el-col>
            <widget-card :bodyStyle="bodyStyle" style="height:100%">
                <i class="fa-fw fas fa-chart-bar fa-3x" style="color: #40c9c6;"></i>
                <div class="info">
                    <div class="text">犊牛头数</div>
                    <div class="num">{{realTimeData['犊牛头数']}}</div>
                </div>
            </widget-card>
        </el-col>
    </el-row>
</template>
<script>
    import WidgetCard from './WidgetCard'
    import axios from 'axios'
    import {mapState} from 'vuex'

    export default {
        created() {
            axios.get(this.$widgetBaseUrl + 'api/Values/GetCowsCount', {
                params: {
                    FrameName: this.farmName
                },
                withCredentials: false
            }).then(res => {
                if (res.data.rtnCode > 0) {
                    this.realTimeData = res.data.rtnList[0]
                }
            })
        },
        data() {
            return {
                bodyStyle: {
                    display: 'flex',
                    alignItems: 'center',
                    height: '100%'
                },
                realTimeData: {}
            }
        },
        computed: {
            ...mapState(['farmName'])
        },
        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>
