<template>
    <div class="page-body">
        <a-tabs default-active-key="1"  size="large">
            <a-tab-pane key="1" tab="客户" :forceRender="true">
                <div class="chart-container">
                    <!-- 搜索区 -->
                    <!-- <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch"></vxe-form> -->
                    <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>
                    <!-- <h3>客户结余统计</h3> -->
                    <div id="myChart" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
                    <div id="myChart2" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
                    <div id="myChart3" v-if="isShowCustomChart" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="供应商" :forceRender="true">
                <div class="chart-container">
                    <!-- 搜索区 -->
                    <!-- <vxe-form :data="searchFormData" :items="searchFormItems" titleColon @submit="onSearch"></vxe-form> -->
                    <a-radio-group default-value="month" size="large" button-style="solid" @change="onSearch1">
                        <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>
                    <!-- <h3>客户结余统计</h3> -->
                    <div id="myChart4" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
                    <div id="myChart5" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
                    <div id="myChart6" v-if="isShowCustomChart1" style="width: 95%;height: 500px;margin: 20px auto 0;"></div>
                </div>
            </a-tab-pane>
        </a-tabs>
       
    </div>
</template>
<script>
import * as echarts from 'echarts';
import BASE_URL from '@/services/Middle/transport/Custom/api.js';
export default {
    data() {
        return {
        isShowCustomChart:false,
        isShowCustomChart1:false,
        actions:{
            CustomBalance: `${BASE_URL.BASE_URL}/Custom/v1/Custom/balance`, // 客户结余统计
            CustomNumber: `${BASE_URL.BASE_URL}/Custom/v1/Custom/number`, // 客户交易次数统计
            CustomTon: `${BASE_URL.BASE_URL}/Custom/v1/Custom/ton`, // 客户交易吨数统计

            SupplierBalance: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/balance`, // 供应商结余统计
            SupplierNumber: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/number`, // 供应商交易次数统计
            SupplierTon: `${BASE_URL.BASE_URL}/Custom/v1/Supplier/ton`, // 供应商交易吨数统计
        },
        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');
       this.createChart1('month');
    },
    methods: {
        createChart(name){
            this.isShowCustomChart = true;
            let searchData = this.options[name];
            this.$mk.post({
                url: this.actions.CustomBalance,
                data: searchData
            }).then(res => {
                console.log(res)
                let myChart = echarts.init(document.getElementById('myChart'));
                let option = {
                    title:{
                        text: '客户结余统计',
                        left: 'left',
                        textStyle:{
                            fontSize: 20,
                        }
                    },
                    xAxis: {
                        name:res.data.label[0],
                        type: 'category',
                        data: res.data.items.map(item => item.name)
                    },
                    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)
            })
            this.$mk.post({
                url: this.actions.CustomNumber,
                data: searchData
            }).then(res => {
                let myChart = echarts.init(document.getElementById('myChart2'));
                let option = {
                    title:{
                        text: '客户交易次数统计',
                        left: 'left',
                        textStyle:{
                            fontSize: 20,
                        }
                    },
                    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)
            })
            this.$mk.post({
                url: this.actions.CustomTon,
                data: searchData
            }).then(res => {
                let myChart = echarts.init(document.getElementById('myChart3'));
                let option = {
                    title:{
                        text: '客户交易吨数统计',
                        left: 'left',
                        textStyle:{
                            fontSize: 20,
                        }
                    },
                    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)
            })
         
        },
        createChart1(name){
            this.isShowCustomChart1 = true;
            let searchData = this.options[name];
            this.$mk.post({
                url: this.actions.SupplierBalance,
                data: searchData
            }).then(res => {
                console.log(res)
                let myChart = echarts.init(document.getElementById('myChart4'));
                let option = {
                    title:{
                        text: '供应商结余统计',
                        left: 'left',
                        textStyle:{
                            fontSize: 20,
                        }
                    },
                    xAxis: {
                        name:res.data.label[0],
                        type: 'category',
                        data: res.data.items.map(item => item.name)
                    },
                    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)
            })
            this.$mk.post({
                url: this.actions.SupplierNumber,
                data: searchData
            }).then(res => {
                let myChart = echarts.init(document.getElementById('myChart5'));
                let option = {
                    title:{
                        text: '供应商交易次数统计',
                        left: 'left',
                        textStyle:{
                            fontSize: 20,
                        }
                    },
                    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)
            })
            this.$mk.post({
                url: this.actions.SupplierTon,
                data: searchData
            }).then(res => {
                let myChart = echarts.init(document.getElementById('myChart6'));
                let option = {
                    title:{
                        text: '供应商交易吨数统计',
                        left: 'left',
                        textStyle:{
                            fontSize: 20,
                        }
                    },
                    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)
            })
         
        },
        onSearch(e) {
            this.isShowCustomChart = false;
            this.createChart(e.target.value);
        },
        onSearch1(e) {
            this.isShowCustomChart1 = false;
            this.createChart1(e.target.value);
        }
    }            
}
</script>
<style lang="">
    
</style>