<template>
    <div style="width: 100%;margin-top: 5px;">
        <div class="tableTitle">
            <div>
                <span
                    style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"></span>
                <span style="font-size:18px;">{{ this.componentName + '-' + this.chartName + '-' + '曲线图' + '-' + status,
                                    }}</span>
            </div>
        </div>
        <div id="lineChart" ref="lineChart" style="width: 100%; height: 300px"></div>
    </div>
</template>

<script>
export default {
    name: 'lineChart', //折线图组件
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        pageType: {
            type: String
        },
        title: {
            type: String
        },
        // 时间模式
        status: {
            type: String
        },
        // 组件名称
        componentName: {
            type: String
        },
        chartName: {
            type: String
        },
        // 单个数据接收
        typeValue: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            xData: [],
            yData: [],
            yData1: [],
            yData2: [],
            yData3: [],
            arrN: [],
            // series: []
            // triggerType:'触发时刻'
            myChart: null,
            tooltip: {
                show: true
            },
            series: [],

            // 
            listArr: []
        };
    },
    created() {
        // console.log( this.componentName + '-' + this.chartName + '-' + '曲线图','40');
    },

    methods: {
        drawLine() {
            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
            if (myChart == null) {
                myChart = this.$echarts.init(this.$refs.lineChart);
            }
            // myChart.showLoading()　　//开启loading
            let option = {
                // title: {
                //     show: true,
                //     text: this.componentName + '-' + this.chartName + '-' + '曲线图',
                //     textStyle: {
                //         lineHeight: '30'
                //     }
                // },
                legend: {},
                grid: {
                    left: '2%',
                    right: '4%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true
                },
                tooltip: this.tooltip,
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#eeebeb',
                                type: 'dashed'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#6c6c6c'
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: ['5%', '5%'],

                        data: this.xData
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: '#6c6c6c'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eeebeb',
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                series: this.series
            };
            myChart.setOption(option)　　//再设置配置
            // myChart.hideLoading()
            // myChart.setOption(option);
            // window.onresize = () => {  // 根据窗口大小变化图表自适应
            //     myChart.resize();
            // };
            window.addEventListener('resize', function () {
                myChart.resize();
            });
        }
    },
    mounted() {
        this.drawLine();
        console.log(this.$parent.dataArr, '父组件的dataArr');
    },
    computed: {
        listTotal() {
            return JSON.parse(JSON.stringify(this.$parent.dataArr))
        }
    },
    watch: {
        list: {
            handler(newVal) {
                if (newVal.length != 0) {
                    // x轴的数据
                    this.xData = newVal.map(val => {
                        return val.time;
                    });

                    this.series = [
                        {
                            name: '',
                            type: 'line',
                            symbolSize: 6,
                            smooth: true,
                            itemStyle: {
                                color: '#fb864b',
                                borderColor: '#fb864b'
                                // borderWidth: 2
                            },
                            data: []
                        }
                    ];

                    // 区域组件触发y轴展示
                    if (this.title == '类型') {
                        this.tooltip = {
                            formatter: '{a} {b}:{c}个',
                            show: true,
                            confine: true
                        };
                        this.series[0].name = '总量';
                        console.log('折线图', newVal);
                        // 映射出类型数组
                        let arr = newVal.map(function (ele) {
                            if (ele.type_data != null) {
                                return ele.type_data;
                            }
                        });
                        var mapN = [];
                        for (var t = 0; t < arr.length; t++) {
                            for (var i = 0; i < arr[t].length; i++) {
                                mapN.push(arr[t][i]);
                            }
                        }
                        var lineArr = [{
                            name: '机动车',
                            type: 'line',
                            data: [],
                            smooth: true
                        }, {
                            name: '非机动车',
                            type: 'line',
                            data: [],
                            smooth: true
                        }, {
                            name: '行人',
                            type: 'line',
                            data: [],
                            smooth: true
                        }];
                        // if (newVal[0].type_data != undefined) {
                        //     newVal[0].type_data.forEach(ele => {
                        //         lineArr.push({
                        //             name: ele.name,
                        //             type: 'line',
                        //             data: [],
                        //             smooth: true
                        //         });
                        //     });
                        // }
                        mapN.forEach(ele => {
                            if (ele.name == '机动车') {
                                lineArr[0].data.push(ele.quantity);
                            } else if (ele.name == '非机动车') {
                                lineArr[1].data.push(ele.quantity);
                            } else {
                                lineArr[2].data.push(ele.quantity);
                            }
                        });
                        for (let j = 0; j < lineArr.length; j++) {
                            this.series.push(lineArr[j]);
                        }
                        // 总和数量
                        let mapNR1 = [];
                        newVal.map(function (ele) {
                            if (ele.type_data != null) {
                                var sum = ele.type_data.reduce(function (prev, cur) {
                                    return cur.quantity + prev;
                                }, 0);
                                mapNR1.push(sum);
                            }
                        });
                        // console.log("mapNR1", mapNR1)
                        this.series[0].data = mapNR1;
                    } else if (this.title == '速度') {
                        console.log('速度的折线图');
                        this.tooltip = {
                            formatter: '{a} {b}:{c}km/h',
                            show: true,
                            confine: true
                        };
                        // console.log("newVal",newVal)
                        this.series[0].data = newVal.map(val => {
                            return val.speed;
                        });
                    } else if (this.title == '流量') {
                        this.tooltip = {
                            formatter: '{a} {b}:{c}辆',
                            show: true,
                            confine: true
                        };
                        this.series[0].data = newVal.map(ele => {
                            return ele.in_flow + ele.out_flow;
                        });
                    } else if (this.title == '车头时距') {
                        console.log('车头时距', newVal);
                        this.tooltip = {
                            formatter: '{a} {b}:{c}/s',
                            show: true,
                            confine: true
                        };
                        this.series[0].data = newVal.map(val => {
                            return val.headway;
                        });
                    } else if (this.title == '排队数' && this.status == '触发') {
                        this.series[0].data = newVal.map(val => {
                            return val.n_queue;
                        });
                    } else if (this.title == '排队数' && this.status == '周期统计') {
                        this.series[0].data = newVal.map(val => {
                            return val.ave_queue;
                        });
                    } else if (this.title == '检测数') {
                        this.series[0].data = newVal.map(val => {
                            return val.n_stay;
                        });
                    } else if (this.title == '延误') {
                        this.series[0].data = newVal.map(val => {
                            return val.ave_delay;
                        });
                    } else if (this.title == '拥堵') {
                        this.series[0].data = newVal.map(val => { });
                    }

                    this.drawLine()

                }
            },
            deep: true
        },


    }
};
</script>
<style scoped>
.tableTitle {
    background: #f7f8fa;
    margin-bottom: 5px;
    padding: 8px;
}
</style>
