<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: 705px; height: 300px"></div>
    </div>
</template>

<script>
export default {
    name: 'lineChart', //折线图组件
    props: {
        itemData: {
            type: Object,
            default() {
                return {};
            }
        },
        originalDataArr: {
            type: Array,
            default() {
                return [];
            }
        },
        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
            },
            name: 'km/h',
            series: [],

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

    methods: {
        drawLine(newVal, title, timeMode) {
            // console.log('newVal == ', newVal)
            let myChart = this.$echarts.getInstanceByDom(this.$refs.lineChart);
            if (myChart == null) {
                myChart = this.$echarts.init(this.$refs.lineChart);
            }
            // var series = []
            if (newVal) {
                this.xData = newVal.map((val) => {
                    return val.time;
                });
            }

            // myChart.showLoading()　　//开启loading
            let option = {
                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.reverse()
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: this.name,
                        axisLabel: {
                            color: '#6c6c6c'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#eeebeb',
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                series: this.getMessage(newVal, title, timeMode)
            };
            myChart.setOption(option);
            window.addEventListener('resize', function () {
                myChart.resize();
            });
            //  this.$nextTick(() => {
            //   myChart.setOption(option)
            //                 myChart.resize();
            //             })
        },

        getMessage(newVal, title, timeMode) {
            if (newVal) {
                var series = [
                    {
                        name: '',
                        type: 'line',
                        symbolSize: 6,
                        smooth: true,
                        itemStyle: {
                            color: '#fb864b',
                            borderColor: '#fb864b'
                            // borderWidth: 2
                        },
                        data: []
                    }
                ];

                if (title === '类型') {
                    this.tooltip = {
                        formatter: '{a} {b}:{c}个',
                        show: true,
                        confine: true
                    };
                    this.name = '';
                    series[0].name = '总量';
                    // 映射出类型数组
                    let arr = newVal.map(function (ele) {
                        if (ele.type_data != null) {
                            return ele.type_data;
                        }
                    });
                    var mapN = [];
                    if (arr && arr.length > 0) {
                        for (var t = 0; t < arr.length; t++) {
                            if (arr[t] && arr[t].length > 0) {
                                for (var i = 0; i < arr[t].length; i++) {
                                    mapN.push(arr[t][i]);
                                }
                            }
                        }
                    }

                    var lineArr = [];
                    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, index) => {
                        if (lineArr[index] && lineArr[index].data) {
                            lineArr[index].data.push(ele.quantity);
                        }
                        // 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);
                        // }
                    });
                    if (lineArr && lineArr.length > 0) {
                        for (let j = 0; j < lineArr.length; j++) {
                            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);
                        }
                    });
                    series[0].data = mapNR1;
                } else if (title === '速度') {
                    let unit = 'km/h';
                    if (this.originalDataArr && this.originalDataArr.length > 0) {
                        if (this.originalDataArr[0].speed >= 0) {
                            unit = 'km/h';
                        } else {
                            unit = 'pix/s';
                        }
                    }
                    this.tooltip = {
                        formatter: `{a} {b}:{c}${unit}`,
                        show: true,
                        confine: true
                    };
                    this.name = unit;
                    // console.log(this.status + '-速度-' + JSON.stringify(newVal));
                    series[0].data = newVal.map((val) => {
                        if (val.speed == -1) {
                            return '-';
                        }
                        return Math.abs(val.speed);
                    });
                } else if (title === '流量') {
                    this.name = '辆';
                    if (this.status != '实时触发') {
                        this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
                    }
                    series[0].data = newVal.map((ele) => {
                        return ele.in_flow + ele.out_flow;
                    });
                } else if (title === '车头时距') {
                    this.name = '秒';
                    this.tooltip = {
                        formatter: '{a} {b}:{c}/s',
                        show: true,
                        confine: true
                    };
                    series[0].data = newVal.map((val) => {
                        if (timeMode == '固定间隔') {
                            return val.ave_headway;
                        } else {
                            return val.headway;
                        }
                    });
                } else if (title === '排队数') {
                    this.name = '辆';
                    if (this.status != '实时触发') {
                        this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
                    }
                    series[0].data = newVal.map((val) => {
                        // return val.n_queue;
                        if (timeMode == '固定间隔') {
                            return val.ave_queue;
                        } else {
                            return val.n_queue;
                        }
                    });
                } else if (title === '检测数') {
                    this.name = '辆';
                    if (this.status != '实时触发') {
                        this.name = `辆/${this.itemData.cycleInterval}${this.itemData.unit}`;
                    }
                    series[0].data = newVal.map((val) => {
                        if (timeMode == '固定间隔') {
                            return val.ave_stay;
                        } else {
                            return val.n_stay;
                        }
                    });
                } else if (title === '延误') {
                    this.name = '秒';
                    series[0].data = newVal.map((val) => {
                        return val.ave_delay;
                    });
                } else if (title === '拥堵') {
                    this.name = '秒';
                    series[0].data = newVal.map((val) => {});
                }
                series.forEach((ele) => {
                    ele.data.reverse();
                });
                return series;
            }
        }
    },
    mounted() {
        // if (this.historyData.length != 0) {
        //     this.drawLine(this.historyData, this.title, this.status);
        // }
        // this.getMessage(this.list)
        // console.log(this.$parent.dataArr, '父组件的dataArr');
        // this.$set(this.$parent.dataArr)
    },
    watch: {}
};
</script>
<style scoped>
.tableTitle {
    background: #f7f8fa;
    margin-bottom: 5px;
    padding: 8px;
}
</style>
