<template >
    <div>
        <div style="display: flex;align-items: center;">
            <a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch">
                <a-radio-button value="year">
                    按年份
                </a-radio-button>
                <a-radio-button value="month">
                    按月份
                </a-radio-button>
                <a-radio-button value="day">
                    按本月
                </a-radio-button>
                <a-radio-button value="week">
                    按本周
                </a-radio-button>
                <a-radio-button value="day7">
                    最近7天
                </a-radio-button>
                <a-radio-button value="day30">
                    最近30天
                </a-radio-button>
            </a-radio-group>
            <p v-if='interval' style="margin: 0 10px;">(数据每 {{interval}} 分钟刷新一次)</p>
        </div>
        
        <div :id="id" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
        <div class="loading-box" v-else style="width: 95%;height: 500px;margin: 20px auto 0;display: flex;align-items: center;justify-content: center;">
            <a-icon type="loading" spin style="font-size: 50px;color: #122ed1;margin-left: 10px;" />
        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
// import BASE_URL from '@/services/Middle/transport/Custom/api.js';
// 从父组件中获取数据，id是echarts专属id，同个页面需要传不同id，actions是请求数据的接口，type是图表类型 bar条形图 line折线图，title是图表标题
export default {
    name: 'MyStatistics',
    props: {
        id:{
            type:String
        },
        actions:{
            type:String
        },
        type:{
            type:String
        },
        title:{
            type:String
        }
    },
    data() {
        return {
            isShowCustomChart: false,
            interval:null,
            options:{
            year:{
                cycle: 'year',
                span: 0,
                recently:false,
            },
            month:{
                cycle:'month',
                span: 0,
                recently:false,
            },
            day:{
                cycle: 'day',
                span: 0,
                recently:false,
            },
            week:{
                cycle: 'week',
                span: 0,
                recently:false,
            },
            day7:{
                cycle: 'day',
                span: 7,
                recently:true,
            },
            day30:{
                cycle: 'day',
                span: 30,
                recently:true,
        },
            //搜索区
        searchFormData: {
            cycle: 'day',
            span: 7,
            recently:true,
        },
        searchFormItems: [
            {field: 'cycle', title: '类型', span: 5, itemRender: {name: '$select', props: {placeholder: '请输入名称', 
            options:[
                    {label: '按日', value: 'day'},
                    {label: '按周', value: 'week'},
                    {label: '按月', value:'month'},
                ]
            }}},
            {field: 'span', title: '条数', span: 5, itemRender: {name: '$input', props: {type:'number'}}},
            {field: 'recently', title: '从今天开始', span: 5, itemRender: {name: '$radio', options:[
                {label: '是', value: true},
                {label: '否', value: false}
            ]
            }},
            {
            align: 'right', span: 4, itemRender: {
                name: '$buttons', children: [{props: {type: 'submit', content: '筛选', status: 'primary'}},
                {props: {type: 'reset', content: '重置'}}]
            }
            }
        ],
        }
        }
    },
    created(){
        this.createChart('month')
    },
    methods: {
        //选中日期后，创建图表
        onSearch(e) {
            this.isShowCustomChart = false;
            this.createChart(e.target.value);
        },
        createChart(name){
            let searchData = this.options[name];
            if(this.type == 'bar'){
                this.$mk.post({
                url: this.actions,
                data: searchData
            }).then(res => {
                this.isShowCustomChart = true;
                this.interval = res.data.interval;
                setTimeout(() => {
                    let myChart = echarts.init(document.getElementById(this.id));
                let option = {
                    title:{
                        text:this.title,
                        left: 'left',
                        textStyle:{
                            fontSize: 20,
                        }
                    },
                    xAxis: {
                        name:res.data.label[0],
                        type: 'category',
                        data:res.data.items?res.data.items.map(item => item.name):[],
                        left: '0',
                        top: '60',
                        orient: 'vertical',
                        textStyle: {
                            fontSize: 15,
                        }
                    },
                    yAxis: {
                        name:res.data.label[1],
                        type: 'value'
                    },
                    series: [
                        {
                        data:res.data.items?res.data.items.map(item => item.data[0]):[],
                        type: 'bar',
                        barWidth: '30px' // 设置为类目宽度的50%
                        }
                    ],
                    tooltip:{
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    }
                }
                myChart.setOption(option)
                }, 100);
                
            })

            }else if(this.type == 'line'){
                this.$mk.post({
                url: this.actions,
                data: searchData
            }).then(res => {
                this.isShowCustomChart = true;
                this.interval = res.data.interval;
                setTimeout(() => {
                    let myChart = echarts.init(document.getElementById(this.id));
                let option = {
                    title:{
                        text: this.title,
                        left: 'left',
                        textStyle:{
                            fontSize: 20,
                        }
                    },
                    legend: {
                        data:res.data.items?res.data.items.map(item => item.name):[],
                        left: '0',
                        top: '60',
                        orient: 'vertical',
                        textStyle: {
                            fontSize: 15,
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: res.data.label
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series:res.data.items? res.data.items.map((item) => {
                        return {
                            name:item.name,
                            data: item.data,
                            type: 'line',
                        }
                    }, ):{},
                    tooltip:{
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    }
                };
                myChart.setOption(option)
                }, 100);
               
            })
            }
        },
    }
}
</script>
<style lang="">
    
</style>