<template>
    <widget-card :bodyStyle="bodyStyle" ref="container">
        <div slot="header">平均泌乳天数</div>
        <div ref="chart" class="chart"></div>
    </widget-card>
</template>
<script>
    import WidgetCard from './WidgetCard'
    import {mapState} from 'vuex'
    import axios from 'axios'

    export default {
        mounted() {
            require.ensure(['@antv/g2'], require => {
                const G2 = require('@antv/g2');
                axios.get(this.$widgetBaseUrl + 'api/Values/GetCowsAvgMrDays', {
                    withCredentials: false
                }).then(res => {
                    if (res.data.rtnCode > 0) {
                        this.chartData = res.data.rtnList.map(i => {
                            return {
                                name: String(i['当前牧场']),
                                value: i['泌乳天数']
                            }
                        });
                        this.drawChart(G2);
                    }
                })
            });
        },
        data() {
            return {
                myChart: null,
                bodyStyle: {
                    display: 'flex',
                    alignItems: 'center'
                },
                chartData: []
            }
        },
        computed: {
            ...mapState(['farmName'])
        },
        methods: {
            drawChart(G2) {
                var chart = new G2.Chart({
                    container: this.$refs.chart,
                    forceFit: true,
                    height: this.$refs.container.$el.offsetHeight - 75,
                    padding: 'auto',
                });
                chart.source(this.chartData);
                chart.scale('sales', {
                    tickInterval: 20
                });
                chart.interval().position('name*value');
                chart.render();
            }
        },
        components: {
            WidgetCard
        }
    }
</script>
<style lang="less" scoped>
    .chart {
        width: 100%;
    }
</style>
