<template>
    <div
        style="width: 1000px;height:800px;"
        class="echar"
        ref="charts"
        id="main"
    ></div>
</template>

<script>
import * as echarts from "echarts/core";
import { DatasetComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { Scatter3DChart } from "echarts-gl/charts";
import { Grid3DComponent } from "echarts-gl/components";

echarts.use([
    DatasetComponent,
    Grid3DComponent,
    Scatter3DChart,
    CanvasRenderer,
]);
export default {
    props: ["src"],
    name: "pointCloud",
    watch: {
        src(newVal) {
            console.log(src);
            this.srcPath = newVal; //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
    },
    data() {
        return {
            dat: [],
            option: {},
            myChart: {},
            srcPath: "",
        };
    },
    methods: {
        getData(myChart, option) {
            let file_url = this.srcPath;
            console.log(file_url);
            let xhr = new XMLHttpRequest();
            xhr.open("get", file_url, true);
            xhr.onload = function () {
                if (xhr.status == 200) {
                    // if (callback) {
                    // callback();
                    console.log(xhr.response);
                    var lines = xhr.response.split("\r\n").slice(12);
                    console.log(lines);
                    // 将每行以空格作为分隔符形成二维数组
                    var dataArray = lines
                        .map(function (line) {
                            console.log();
                            var arry = line
                                .trim()
                                .split(" ")
                                .map(function (value) {
                                    return 1 * parseFloat(value);
                                });
                            if (arry[2] > 3000) {
                                console.log(arry);
                                return "";
                            }
                            if (arry[1] > 1000 || arry[1] < -1000) {
                                console.log(arry);
                                return "";
                            }
                            if (arry[0] > 1000 || arry[0] < -500) {
                                console.log(arry);
                                return "";
                            }
                            arry[2] = arry[2] - 1000;
                            return arry;
                        })
                        .filter((item) => item !== "");
                    if (dataArray != null) {
                        option.dataset.source = dataArray;
                    }
                    console.log(option);
                    myChart.setOption(option);
                }
            };
            xhr.send();
            
            myChart.setOption(option);
            // 读取文件内容
        },
        myEcharts() {
            
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main"));

            console.log(this.srcPath);
            // x 轴的最小值和最大值

            // 定义颜色渐变范围
            let colorMin = "#61dfff "; // 最小值的颜色
            let colorMax = "#366fff"; // 最大值的颜色
            var symbolSize = 1.5;
            
            var option = {
                grid3D: {
                    viewControl: {
                        beta: -90,
                        alpha: 15,
                        distance: 75,
                    },
                },
                xAxis3D: {
                    min: 0,
                    max: 2000,
                },
                yAxis3D: {
                    min: -1000,
                    max: 1000,
                },
                zAxis3D: {
                    min: -1000,
                    max: 1000,
                },
                dataset: {
                    dimensions: ["z", "y", "x"],
                    source: this.dat,
                },
                series: [
                    {
                        itemStyle: {
                            color: function (params) {
                                // 计算当前点在 x 轴上的位置比例
                                let ratio =
                                    (params.data[0] - minX) / (maxX - minX);
                                // 根据比例计算对应的颜色
                                let color = echarts.color.gradient(
                                    colorMin,
                                    colorMax
                                )(ratio);

                                return color;
                            },
                        },
                        type: "scatter3D",
                        symbolSize: symbolSize,
                        encode: {
                            x: "x",
                            y: "y",
                            z: "z",
                        },
                    },
                ],
            };

            this.getData(myChart, option);
        },
    },
    mounted() {
        if(this.srcPath ==null || this.srcPath ==""){
            this.srcPath= this.src
        }
        this.myEcharts();
    },
};
</script>