<template>
  <div  :style="currentStyle" ref="mychart">
  </div>
</template>

<script>
import Base from '@/components/mychart/basechart.vue';
// 引入柱状图组件
require('echarts/lib/chart/bar');
export default {
    name: 'bar',
    extends: Base,
    data () {
        return {
            mychartconfig: {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: []
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: []
            },
            myConfig:{
                xfieldname:'', // x轴字段名
                xdata:'',      // x轴数据
                cfieldname:'',  // 分类字段名
                cdata:'',      // 分类数据
                yfieldname:'',   //值字段名
                ydata:'',
                mychartconfig:{},
                valueAxis:'y'
               
            }
        };
    },
    methods: {
        customInitMychartConfig () {
            let curlConfig = Object.assign({},this.mychartconfig,this.myConfig.mychartconfig); 
            let tempData = {};
            let xObj = {};
            let xData = [];
            let legendData = [];
            let self = this;
            let series = [];
            if (this.currentData && this.currentData.length > 0) {
                this.currentData.forEach(el => {
                    if (self.myConfig.cfieldname) {
                        let name = el[self.myConfig.cfieldname];
                        if (!tempData[name])  {
                            tempData[name] = [];
                            legendData.push(name);
                        }
                        tempData[name].push(el);
                    }
                    let xname = null;
                    if (self.myConfig.valueAxis === 'y') {
                        xname = el[self.myConfig.xfieldname];
                    }
                    if (self.myConfig.valueAxis === 'x') {
                        xname = el[self.myConfig.yfieldname];
                    }
                    if (xname !== null) {
                        if (!xObj[xname]) {
                            xObj[xname] = true;
                            xData.push(xname);
                        }
                    }    
                });
                 // 处理分类
                if (this.myConfig.cdata && this.myConfig.cdata.length > 0) {
                    legendData = this.$Method.copy(this.myConfig.cdata);
                } 
                // 当y轴为值时处理x轴数据
                if (this.myConfig.valueAxis === 'y') {
                    if (this.myConfig.xdata && this.myConfig.xdata.length > 0) {
                        xData = this.$Method.copy(this.myConfig.xdata);
                    } 
                }
                // 当x轴为值时处理y轴数据
                if (this.myConfig.valueAxis === 'x') {
                    if (this.myConfig.ydata && this.myConfig.ydata.length > 0) {
                        xData = this.$Method.copy(this.myConfig.ydata);
                    } 
                }
               
                // 处理值
                if (this.myConfig.cfieldname  && legendData.length > 0) {
                    legendData.forEach(c => {
                        let temp = {
                            name:c,
                            type: 'bar'
                        };
                        temp.data = [];
                        let xflag = false;
                        xData.forEach(x => {
                            let valueName = '';
                            let categoryName = '';
                            if (this.myConfig.valueAxis === 'y') {
                                valueName = this.myConfig.yfieldname;
                                categoryName = this.myConfig.xfieldname;
                            }
                            if (this.myConfig.valueAxis === 'x') {
                                valueName = this.myConfig.xfieldname;
                                categoryName = this.myConfig.yfieldname;
                            }
                            tempData[c].some(el =>{
                                if (el[categoryName] === x) {
                                    temp.data.push(el[valueName]);
                                    xflag = true;
                                    return true;
                                }
                            });
                            if (!xflag) {
                                temp.data.push('0');
                            }
                        });
                        if (this.myConfig.OnUpdataSeries) {
                            let that = this;
                            this.myConfig.OnUpdataSeries(temp,that);
                        }
                        series.push(temp);
                    });
                } else {
                    let temp = {
                        type: 'bar'
                    };
                    temp.data = [];
                    let xflag = false;
                    xData.forEach(x => {
                        xflag = false;
                        let valueName = '';
                        let categoryName = '';
                        if (this.myConfig.valueAxis === 'y') {
                            valueName = this.myConfig.yfieldname;
                            categoryName = this.myConfig.xfieldname;
                        }
                        if (this.myConfig.valueAxis === 'x') {
                            valueName = this.myConfig.xfieldname;
                            categoryName = this.myConfig.yfieldname;
                        }
                        this.currentData.some(el => {
                            if (el[categoryName] === x) {
                                temp.data.push(el[valueName]);
                                xflag = true;
                                return true;
                            }
                        })
                        if (!xflag) {
                            temp.data.push('0');
                        }
                    })
                    if (this.myConfig.OnUpdataSeries) {
                        let that = this;
                        this.myConfig.OnUpdataSeries(temp,that);
                    }
                    series.push(temp);
                }    
            }
            // 处理分类
            curlConfig.legend.data = legendData;
            // 当y轴为值时处理x轴数据
            if (this.myConfig.valueAxis === 'y') {
                curlConfig.xAxis[0].data = xData;
            }
            // 当x轴为值时处理y轴数据
            if (this.myConfig.valueAxis === 'x') {
                curlConfig.yAxis[0].data = xData;
            }
            // 处理数据
            curlConfig.series = series;
            // 处理颜色
            if (!this.mychartconfig.color) {
                if (legendData.length > 0) {
                    curlConfig.color  = this._getGlobalColor('bar', legendData.length);
                }  else {
                    curlConfig.color  = this._getGlobalColor('bar', 1);
                }
            } 
            return curlConfig;
        }
       
    }
};
</script>