<template>
    
    <div ref="chartEl" class="charDiv">

    </div>
</template>

<script>
import echarts from 'echarts';

export default {
    props:{
        chrCfg:{},
    },
    data() {
        var that = this;
        return {
            curChart: null,
            defX:{
                type : 'category',
                // name : '序号',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick:{
                    alignWithLabel:true,
                },
                // axisLabel: {
                //     rotate:40
                // }
            },
            defY:{
                type : 'value',
                // name : "当前金币",
                min: "dataMin",
                axisLabel: {
                    rotate:0,
                    formatter: (value, index)=> {
                        if(value>10000){
                            value = this.moneyFixed(value);
                        }
                        return value;
                    }
                }
            },
            defCfg:{
                title : {
                    text : "",
                },
                color: ['#bda29a','#8dc44d', '#122e7b', '#0f67e0', '#9e2ab1','#f58e0d',  '#27c6da', '#8f7065','#627f8d', '#61a0a8', '#304655'],
                grid: {
                    left: '100px',
                    // right: '0%',
                    top: "70px",
                    // bottom: '20%'
                },
                legend : {
                    data : [],
                    // selected: {"当前金币":true,"预设金币":true,"下一预设金币":true,"倍率":false},
                },
                // dataZoom : [ { type : 'inside'}],
                xAxis : {
                },
                yAxis: [
                    // {type:"value"}
                    // {
                    //     type : 'value',
                    //     // name : "当前金币",
                    //     min: "dataMin",
                    //     axisLabel: {
                    //         rotate:0,
                    //         formatter: (value, index)=> {
                    //             if(value>10000){
                    //                 value = this.moneyFixed(value);
                    //             }
                    //             return value;
                    //         }
                    //     }
                    // },
                    // {
                    //     name: '倍率',
                    //     nameLocation: 'end',
                    //     type: 'value',
                    //     axisLabel: {
                    //         rotate:40
                    //     },
                    //     // inverse: true
                    // }
                ],
                tooltip: {
                    trigger: 'axis',
                    formatter(datas){
                        var res = datas[0].name + '<br/>'
                        var otherInfo = "";
                        for (var i = 0, length = datas.length; i < length; i++) {
                            var curitem =datas[i];
                            var value = curitem.data;
                            if(typeof(value)=="Array"){
                                value = value[1];
                            }
                            if(isNaN(value)){
                                res += curitem.marker+ curitem.seriesName + '：' + value + '<br/>'
                            }else{
                                res += curitem.marker+ curitem.seriesName + '：' + that.bigMoneyFormat(value) + '<br/>'
                            }
                        }
                        res+=otherInfo;
                        if(that.chrCfg.tooltipFormatter){
                            var tmpinfo = that.chrCfg.tooltipFormatter(datas[0].dataIndex);
                            res+= tmpinfo || "";
                        }
                        return res
                    },
                    // formatter(datas){
                    //     var res = "id:"+datas[0].name + '<br/>'
                    //     var otherInfo = "";
                    //     for (var i = 0, length = datas.length; i < length; i++) {
                    //         var value = datas[i].data;
                    //         var dateitem = datainfo[datas[i].dataIndex]
                    //         if(datas[i].seriesName=="当前金币"){
                    //             res += datas[i].marker+ datas[i].seriesName + '：' + that.bigMoneyFormat(value) + '<br/>'
                    //         }else if(datas[i].seriesName=="预设金币"){
                    //             res += datas[i].marker+ datas[i].seriesName + '：' + that.bigMoneyFormat(value[1]) + '<br/>'
                    //         }

                    //         if(i==0){
                    //             otherInfo=
                    //              '时间 : '+dateitem.createTime + '<br/>'
                    //             + '玩家Id : '+dateitem.memberId + '<br/>'
                    //             + '投注 : '+dateitem.bet + '<br/>'
                    //             + '倍数 : '+dateitem.coinBonus + '<br/>'
                    //             + '获得金币 : '+dateitem.winGold + '<br/>'
                    //             + '阶段索引 : '+dateitem.stageIndex + '<br/>'
                    //             + '队列ID : '+dateitem.queueId + '<br/>'
                    //             + '阶段起始标记 : '+tagMap[dateitem.originTag] + '<br/>'
                    //             + '预设金币 : '+dateitem.initCapitalGold + '<br/>'
                    //             + '摇奖结果 : '+that.$dict.tranDict("dbdict.coinSlot",20000+dateitem.slotResult) + '<br/>';
                    //             if(dateitem.slotResult == 11){
                    //                 res+= '大奖<br/>'
                    //             }
                    //         }
                    //     }
                    //     res+=otherInfo;
                    //     return res
                    // }
                },
                series : [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    }
                ]

            }
        }
    },


    mounted() {
        this.initChart();
        this.reDraw();
    },
    computed:{
    },

    methods: {
        reDraw(){
            const newoption = this.getChartOption();
            this.curChart.setOption(newoption);
        },
        initChart(){
            if(!this.curChart){
                const container = this.$refs.chartEl;
                if (container) {
                    this.curChart = echarts.init( container );
                }
                this.curChart.on("click",(param)=>{
                    if(param.dataIndex){
                        this.$emit("onClickPoint",param.dataIndex);
                        // var memberId = this.chartData.total[param.dataIndex].memberId
                    }
                })
            }else{
                this.clearChartData();
            }
        },
        clearChartData(){
            var chart = this.curChart;
            if(chart){
                var option = chart.getOption();
                if(!option) return;
                option.series=[];
                chart.setOption(option,true)
            }
        },
        getChartOption(){
            var that = this;
            var option = Object.assign({},this.defCfg,this.chrCfg)
            option.xAxis = Object.assign({},this.defX,this.chrCfg.xAxis);
            if(option.yAxis.length){
                var first = option.yAxis[0];
                var firstcfg = Object.assign({},this.defY,first);
                option.yAxis[0] = firstcfg;
            }else{
                option.yAxis = Object.assign({},this.defY,this.chrCfg.yAxis);
            }
            return option;
        },
    }
}
</script>
<style lang="less" scoped>

.charDiv{
    height: 500px;
    width:100%;
    // border:1px red solid;
}

</style>


