<template>
    <widget-card :bodyStyle="bodyStyle" ref="container" class="chart-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'
    import {format} from 'date-fns'

    export default {
        mounted() {
            require.ensure(['@antv/g2'], require => {
                const G2 = require('@antv/g2');
                axios.get(this.$widgetBaseUrl + 'api/Values/GetCowsStock', {
                    params: {
                        FrameName: this.farmName
                    },
                    withCredentials: false
                }).then(res => {
                    if (res.data.rtnCode > 0) {
                        let data = [];
                        res.data.rtnList.forEach(i => {
                            data.push({
                                "牛群": '泌乳牛',
                                date: i['日期'],
                                "数量": i['泌乳牛头数']
                            });
                            data.push({
                                "牛群": '干奶牛',
                                date: i['日期'],
                                "数量": i['干奶牛头数']
                            });
                            data.push({
                                "牛群": '成母牛',
                                date: i['日期'],
                                "数量": i['成母牛头数']
                            });
                        });
                        this.chartData = data;
                        this.drawChart(G2);
                    }
                })
            });
        },
        data() {
            return {
                myChart: null,
                bodyStyle: {
                    display: 'flex',
                    alignItems: 'center'
                },
                chartData: []
            }
        },
        computed: {
            ...mapState(['farmName'])
        },
        methods: {
            drawChart(G2) {
                let data = [
                    {
                        "牛群": "泌乳牛",
                        "date": format(new Date("2018.09.27"), 'YYYY年MM月DD日'),
                        "数量": 3623
                    },
                    {
                        "牛群": "干奶牛",
                        "date": format(new Date("2018.09.27"), 'YYYY年MM月DD日'),
                        "数量": 714
                    },
                    {
                        "牛群": "成母牛",
                        "date": format(new Date("2018.09.27"), 'YYYY年MM月DD日'),
                        "数量": 4337
                    },
                    {
                        "牛群": "泌乳牛",
                        "date": format(new Date("2018.09.28"), 'YYYY年MM月DD日'),
                        "数量": 3623
                    },
                    {
                        "牛群": "干奶牛",
                        "date": format(new Date("2018.09.28"), 'YYYY年MM月DD日'),
                        "数量": 714
                    },
                    {
                        "牛群": "成母牛",
                        "date": format(new Date("2018.09.28"), 'YYYY年MM月DD日'),
                        "数量": 4337
                    }
                ];
                let chart = new G2.Chart({
                    container: this.$refs.chart,
                    forceFit: true,
                    height: this.$refs.container.$el.offsetHeight - 75,
                });
                chart.source(data);
                chart.interval().position('牛群*数量').color('date').adjust([{
                    type: 'dodge',
                    marginRatio: 1 / 32
                }]);
                chart.render();
            }
        },
        components: {
            WidgetCard
        }
    }
</script>
<style lang="less" scoped>
    .chart {
        width: 100%;
    }
</style>
