<template>
    <widget-card :bodyStyle="bodyStyle" class="widget" ref="container">
        <div slot="header">牛群结构</div>
        <div ref="chart" class="chart"></div>
    </widget-card>
</template>
<script>
    import {mapState} from 'vuex'
    import WidgetCard from './WidgetCard'
    import axios from 'axios'

    export default {
        mounted() {
            require.ensure(['@antv/g2'], require => {
                const G2 = require('@antv/g2');
                axios.get(this.$widgetBaseUrl + 'api/Values/GetCowsFramework', {
                    params: {
                        FrameName: this.farmName
                    },
                    withCredentials: false
                }).then(res => {
                    if (res.data.rtnCode > 0) {
                        let sum = res.data.rtnList.map(i => i['牛只数目']).reduce((total, num) => total + num);
                        this.chartData = res.data.rtnList.map(i => {
                            return {count: i['牛只数目'], item: i['当前状态'], percent: Number((i['牛只数目'] / sum).toFixed(2))}
                        });
                        this.drawChart(G2);
                    }
                })
            });
        },
        data() {
            return {
                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',
                    options: {}
                });
                chart.source(this.chartData, {
                    percent: {
                        formatter: function formatter(val) {
                            val = val * 100 + '%';
                            return val;
                        }
                    }
                });
                chart.coord('theta', {
                    radius: 0.7
                });
                chart.tooltip({
                    showTitle: false,
                    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                });
                chart.intervalStack().position('percent').color('item').label('percent', {
                    formatter: function formatter(val, item) {
                        return item.point.item + ': ' + val;
                    }
                }).tooltip('item*percent', function (item, percent) {
                    percent = percent * 100 + '%';
                    return {
                        name: item,
                        value: percent
                    };
                }).style({
                    lineWidth: 1,
                    stroke: '#fff'
                });
                chart.render();
            }
        },
        components: {
            WidgetCard
        }
    }
</script>
<style lang="less" scoped>
    .chart {
        width: 100%;
    }
</style>
