<template>
    <el-card shadow="hover" :body-style="[bodyStyle]" class="farm-map-container">
        <template slot="header">
            牧场分布
        </template>
        <remote-js src="https://webapi.amap.com/loca?key=bf91055058a47a7dc387e40ab6256a5f"
                   @load="jsFlag|=0x01"></remote-js>
        <remote-js src="https://a.amap.com/Loca/static/mock/districts.js"
                   @load="jsFlag|=0x11"></remote-js>
        <div class="map" id="cow-distribution-map"></div>
        <div class="chart-container" ref="charts">
            <div class="chart-wrapper">
                <div class="title">牛群状态分布</div>
                <div class="chart" ref="chart1"></div>
            </div>
            <div class="chart-wrapper">
                <div class="title">繁殖状态分布</div>
                <div class="chart" ref="chart2"></div>
            </div>
            <div class="chart-wrapper">
                <div class="title">胎次状态分布</div>
                <div class="chart" ref="chart3"></div>
            </div>
        </div>
    </el-card>
</template>

<script>
    import {mapState} from 'vuex'
    import axios from 'axios'

    export default {
        mounted() {
            require.ensure(['@antv/g2'], require => {
                const G2 = require('@antv/g2');
                this.drawChart(G2);
            })
        },
        data() {
            return {
                myChart: null,
                bodyStyle: {
                    flexGrow: 1,
                    alignItems: 'center',
                    padding: 0,
                    display: 'flex',
                    height: '100%'
                },
                chartData: [],
                jsFlag: 0x00
            }
        },
        computed: {
            ...mapState(['farmName'])
        },
        methods: {
            init() {
                var map = Loca.create('cow-distribution-map', {
                    mapStyle: 'amap://styles/twilight',
                    zoom: 4,
                    center: [107.4976, 32.1697],
                    features: ['bg', 'road']
                });

                var layer = Loca.visualLayer({
                    container: map,
                    // 指定数据类型
                    type: 'point',
                    // 展示形状
                    shape: 'circle'
                });

                layer.setData(districts, {
                    // 指定经纬度所在字段
                    lnglat: 'center'
                });

                layer.setOptions({
                    style: {
                        // 圆形半径
                        radius: 13,
                        // 填充颜色
                        fill: '#f3ad6a',
                        // 透明度
                        opacity: 0.9,
                        // 阴影虚化半径
                        shadowBlur: 4,
                        // 阴影颜色
                        shadowColor: '#000000'
                    }
                });
                layer.render();
            },
            drawChart(G2) {
                let data1 = [{
                    "类型": '哺乳犊牛',
                    "数量": 50
                }, {
                    "类型": '哺乳公牛',
                    "数量": 60
                }, {
                    "类型": '哺乳母牛',
                    "数量": 130
                }, {
                    "类型": '育成牛',
                    "数量": 800
                }, {
                    "类型": '青年牛',
                    "数量": 900
                }, {
                    "类型": '成母牛',
                    "数量": 1000
                }];
                let chart1 = new G2.Chart({
                    container: this.$refs.chart1,
                    forceFit: true,
                    height: (this.$refs.charts.offsetHeight - 20) / 3 - 24,
                    padding: 'auto',
                    options: {
                        legends: {
                            position: 'bottom',
                        }
                    }
                });
                chart1.source(data1);
                chart1.interval().position('类型*数量');
                chart1.render();

                let data2 = [{
                    "类型": '尚未配种',
                    "数量": 50
                }, {
                    "类型": '已配未检',
                    "数量": 60
                }, {
                    "类型": '初检已孕',
                    "数量": 130
                }, {
                    "类型": '初检未孕',
                    "数量": 800
                }];
                let chart2 = new G2.Chart({
                    container: this.$refs.chart2,
                    forceFit: true,
                    height: (this.$refs.charts.offsetHeight - 20) / 3 - 24,
                    padding: 'auto',
                    options: {
                        legends: {
                            position: 'bottom',
                        }
                    }
                });
                chart2.source(data2);
                chart2.interval().position('类型*数量');
                chart2.render();

                let data3 = [{
                    "类型": '0',
                    "数量": 1000
                }, {
                    "类型": '1',
                    "数量": 800
                }, {
                    "类型": '2',
                    "数量": 700
                }, {
                    "类型": '3',
                    "数量": 600
                }, {
                    "类型": '4',
                    "数量": 500
                }, {
                    "类型": '5',
                    "数量": 400
                }, {
                    "类型": '6',
                    "数量": 300
                }, {
                    "类型": '7',
                    "数量": 100
                }];
                let chart3 = new G2.Chart({
                    container: this.$refs.chart3,
                    forceFit: true,
                    height: (this.$refs.charts.offsetHeight - 20) / 3 - 24,
                    padding: 'auto',
                    options: {
                        legends: {
                            position: 'bottom',
                        }
                    }
                });
                chart3.source(data3);
                chart3.interval().position('类型*数量');
                chart3.render();
            }
        },
        watch: {
            jsFlag(val) {
                if (val === 0x11) {
                    let i = setInterval(() => {
                        if (window.Loca) {
                            clearInterval(i);
                            this.init();
                        }
                    }, 100);
                }
            }
        },
        components: {
            'remote-js': {
                render(createElement) {
                    let node = createElement('script', {
                        attrs: {
                            type: 'text/javascript',
                            src: this.src
                        }
                    });
                    return node;
                },
                props: {
                    src: {
                        type: String,
                        required: true
                    },
                },
                mounted() {
                    this.$el.onload = () => {
                        this.$emit('load')
                    }
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .farm-map-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        .map {
            height: 100%;
            flex-grow: 1;
        }
        .chart-container {
            width: 500px;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 10px 0;
            box-sizing: border-box;
            .chart-wrapper {
                flex-grow: 1;
                .title {
                    height: 24px;
                    line-height: 24px;
                    text-align: center;
                }
                .chart {

                }
            }
        }
    }
</style>
