<template>
    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
import tool from "./common/tool.js";

export default {
    name: "lineChartCarsimA", // carsim-折线图
    mixins: [tool],
    props: {
        id: {
            default: "lineChartCarsimA",
            type: String,
        },
        dataList: {
            default: function () {
                return [];
            },
            type: Array,
        },
        dataListA: {
            default: function () {
                return [];
            },
            type: Array,
        },
        columns: {
            default: function () {
                return [];
            },
            type: Array,
        },
    },

    data() {
        return {
            charts: "",
            xName: "油门位置",
            yName: "低挡输出转速(rpm)",
        };
    },

    watch: {
        dataList: {
            handler(val) {
                if (val.length > 0) {
                    this.initStateList();
                }
            },
            deep: true,
        },
        dataListA: {
            handler(val) {
                if (val.length > 0) {
                    this.initStateList();
                }
            },
            deep: true,
        },
    },

    methods: {
        initStateList() {
            let array = this.dataList;
            let array1 = this.dataListA;

            for (let index = 0; index < array.length; index++) {
                const element = array[index];

                let flag = Object.values(element).some((i) => i === "");

                if (flag) {
                    this.charts.clear();
                    this.charts.setOption(this.option1);
                    return;
                }
            }

            for (let index = 0; index < array1.length; index++) {
                const element = array1[index];

                let flag = Object.values(element).some((i) => i === "");

                if (flag) {
                    this.charts.clear();
                    this.charts.setOption(this.option1);
                    return;
                }
            }

            // if (
            //     !this.isSorted(array.map((i) => i.x)) ||
            //     !this.isSorted(array1.map((i) => i.x))
            // ) {
            //     this.$message.error("X轴的坐标应逐渐增大");
            //     this.charts.clear();
            //     this.charts.setOption(this.option1);
            //     return;
            // }

            // let props = ["x", "y"];

            // let xData = [];
            // let yData = [];

            /* props.forEach((j) => {
                let arr = [];
                array.forEach((i) => {
                    let a = i[j] || 0;
                    if (j === "x") {
                        xData.push(a);
                    } else {
                        arr.push(a);
                    }
                });

                if (j != "x") yData.push(arr);
            }); */

            /* props.forEach((j) => {
                let arr = [];
                array1.forEach((i) => {
                    let a = i[j] || 0;
                    if (j != "x") {
                        arr.push(a);
                    }
                });

                if (j != "x") yData.push(arr);
            }); */

            let series = [];

            let names = ["升挡", "降挡"];

            let brr = [];
            let brr1 = [];

            array.forEach((i) => {
                brr.push([i.x, i.y]);
            });

            array1.forEach((i) => {
                brr1.push([i.x, i.y]);
            });

            series[0] = {
                data: brr,
                type: "line",
                name: names[0],
                smooth: false,
            };

            series[1] = {
                data: brr1,
                type: "line",
                name: names[1],
                smooth: false,
            };

            /* yData.forEach((i, index) => {
                series.push({
                    name: names[index],
                    data: i,
                    type: "line",
                    smooth: false,
                    symbol: "circle",
                    symbolSize: 6,
                    lineStyle: {
                        normal: {
                            width: 1.5,
                            // color: this.themeColor,
                        },
                    },
                    itemStyle: {
                        normal: {
                            // color: this.themeColor,
                        },
                    },
                });
            }); */

            let option = {
                title: {
                    text: "暂无数据",
                    show: series.length === 0,
                    left: "center",
                    top: "center",
                },
                tooltip: {
                    //提示框，可以在全局也可以在
                    trigger: "item", //提示框的样式
                    formatter: "{b}: {c}",
                    color: "#000", //提示框的背景色
                    textStyle: {
                        //提示的字体样式
                        color: "#ffffff",
                    },
                    confine: true,
                },
                xAxis: {
                    name: this.xName,
                    type: "value",
                    // type: "category",
                    // boundaryGap: false,
                    // data: xData,
                    nameLocation: "center",
                    nameGap: 30,
                    min: 0,
                    max: 1,
                    axisTick: { inside: true },
                },
                yAxis: {
                    name: this.yName,
                    axisTick: { inside: true },
                    type: "value",
                    scale: true,
                    // nameGap: 45
                },
                legend: {},
                series,
                grid: {
                    top: "60px",
                    left: "30px",
                    right: "30px",
                    bottom: "10%",
                    containLabel: true,
                },
            };
            this.charts.setOption(option);
        },
    },
};
</script>

<style lang='less' scoped>
.linechart {
    margin: 0 auto;
    overflow: hidden;
}
</style>