<template>
    <chart-el :chartOpt="chartConf" />
</template>

<script>
import mixinChart from 'runner/common/mixins/mixinChart'

export default {
    name: 'LineChart',

    mixins: [mixinChart],

    data () {
        return {
            chartConf: {}
        }
    },

    props: {
        // 图表布局配置 - width, height
        layout: {
            type: Object,
            default () {
                return {
                    width: '100%',
                    height: '160px'
                }
            }
        },

        // 图表配置
        option: {
            type: Object,
            default () {
                return {
                    base: {},
                    seriesData: []
                }
            }
        }
    },

    mounted () {
        this.initComponents()
    },

    methods: {
        initComponents () {
            const { width = '100%', height = '160px' } = this.layout
            const option = this.getChartOption() || {}
            this.chartConf = {
                width,
                height,
                option
            }
        },

        /**
         * @method getSeriesData 图表数据
         */
        getSeriesData () {
            const defSeriesOpts = {
                type: 'line',
                symbol: 'circle',
                symbolSize: 4,
                lineStyle: {
                    width: 2,
                    shadowOffsetX: 5,
                    shadowOffsetY: 3,
                    shadowBlur: 20
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgba(36, 139, 255, 0.85)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(0, 190, 255, 0.11)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
                data: []
            }

            let result = [defSeriesOpts]
            const { seriesData = [] } = this.option
            if (seriesData.length) {
                const temp = []
                seriesData.forEach(item => {
                    temp.push(this.deepMerge({}, defSeriesOpts, item))
                })
                result = temp
            }

            return result
        },

        /**
         * @method getSeriesData 图表数据
         */
        getChartOption () {
            const defaultColors = ['#00BEFF', '#00DE7D']
            const defaultOption = {
                color: defaultColors,
                title: {
                    show: false
                },
                legend: {
                    icon: 'circle',
                    itemWidth: 8,
                    itemHeight: 8,
                    top: '-2%',
                    right: '0%',
                    itemGap: 40,
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                        fontFamily: 'MicrosoftYaHei'
                    },
                    data: []
                },
                tooltip: {
                    trigger: 'item',
                    position: 'top',
                    padding: [3, 5],
                    borderColor: '#3EB9FF',
                    backgroundColor: '#1771B8',
                    textStyle: {
                        height: 12,
                        fontSize: 14,
                        color: '#fff'
                    },
                    formatter (item) {
                        return item.value
                    }
                },
                grid: {
                    left: 0,
                    right: 30,
                    bottom: 0,
                    top: 20,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    // 两边留白
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 14,
                            fontFamily: 'CenturyGothic',
                            fontWeight: 400,
                            color: '#469CCC'
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#3EB9FF',
                            opacity: 0.3
                        }
                    },
                    data: []
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#9CBCF9',
                            opacity: 0.5
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 14,
                            fontFamily: 'CenturyGothic',
                            fontWeight: 400,
                            color: '#469CCC'
                        }
                    }
                }
            }
            // 添加series
            const result = this.deepMerge({}, defaultOption, this.option.base)
            result.series = this.getSeriesData()

            return result
        }
    }
}
</script>
