<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import util from "@tools/util";
    import partten from "@tools/partten";
    import * as echarts from "echarts";
    import chartTheme from './current-scatter-chart.json'

    export default {
        name: 'currentScatterChart',
        props: {
            // 图表宽度
            width: {
                type: String,
                default: "100%",
            },
            // 图表高度
            height: {
                type: String,
                default: "350px",
            },
            // 图表主标题
            chartTitle: {
                type: String,
                default: "自定义图表组件",
            },
            // X 轴配置项
            xAxisData: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            // Y 轴配置项
            yAxisData: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            dataSet: {
                type: String,
                default: ''
            },
            // 图表核心数据
            seriesData: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            seriesAllData: {
                type: Array,
                default: () => {
                    return [];
                },
            },
            // 是否显示图表图例
            showLegend: {
                type: Boolean,
                default: true,
            },
            // 是否默认采用笔刷模式
            brushSelected: {
                type: Boolean,
                default: false,
            },
            theme: {
                type: Boolean,
                default: false,
            },
            echartsTheme: {
                type: String,
                default: '',
            },
        },
        data() {
            return {
                id: "",
                chart: null,
                color: [
                    "#05bb4c",
                    "#4b55ae",
                    "#fa8c16",
                    "#f8de5b",
                    "#1a93cf",
                    "#c531c7",
                    "#bd3338",
                ],
                theme: 'dark'
            };
        },
        computed: {
            collapse() {
                return this.$store.state.collapse
            }
        },
        watch: {
            height() {
                if (this.chart) {
                    this.chart.resize()
                }
            },
            collapse(val) {
                if (this.chart) {
                    setTimeout(() => {
                        this.chart.resize()
                    }, 300)
                }
            }
        },
        methods: {
            resize() {},
            getColorFn() {
                let arr = []
                this.seriesAllData.forEach((item, index) => {
                    let obj = {
                        gt: index,
                        lt: index + 1
                    }
                    if (item.tag === 'tj') {
                        obj.color = "#FF5378"
                    } else {
                        obj.color = "#05BB4C"
                    }
                    arr.push(obj)
                })
                return arr
            },
            getToolTipFn(params) {
                let tit = ''
                this.seriesAllData.forEach((item, index) => {
                    if (params[0].axisValue === item.time && params[0].data === item.value) {
                        tit = item.tag === 'tj' ? '停机' : '并网'
                    }
                })
                let str = `<span style="display:inline-block;margin-bottom: 5px">${params[0].axisValue}</span></br>`
                let str2 = `<div style="margin-bottom: 5px">
                    <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${params[0].color};\"></span>&nbsp;
                    <span style="display:inline-block;">${tit}:</span>&nbsp;&nbsp;<span>${params[0].value}</span>
                        </div>`
                return str + str2
            },
            initChart() {
                const that = this;
                echarts.registerTheme('chartTheme', chartTheme)
                let myChart = echarts.init(document.getElementById(this.id), 'dark');
                that.chart = myChart
                //指定图表的配置项和数据
                const option = {
                    backgroundColor: '',
                    //标题
                    title: {
                        text: that.chartTitle,
                        right: 440,
                        top: 4,
                        textStyle: {
                            fontSize: 14,
                            // color: that.echartsTheme === "dark" ? partten.getColor("grayl") : "#000",
                        },
                    },
                    // backgroundColor:
                    //   that.theme === "dark"
                    //     ? "rgba(0,0,0,0.4)"
                    //     : "rgba(255,255,255,0.5)",
                    //工具箱
                    // color: [
                    //     "#cda819",
                    //     "rgb(255,0,0)",
                    //     "#0098d9",
                    //     "#a9e3f199",
                    //     "#a9e3f199",
                    //     "#005eaa",
                    //     "#0a4468",
                    //     "#32a487"
                    // ],
                    color: ['#7981AF', '#1C99FF', '#E57F25'],
                    toolbox: {
                        show: false,
                        x: "right",
                        position: [10, 10],
                        // backgroundColor:'rgba(0,0,0,0.4)',
                        // borderColor: partten.getColor("gray"),
                        textStyle: {
                            fontSize: util.vh(16),
                            // color: partten.getColor("gray")
                        },
                        iconStyle: {
                            // borderColor: partten.getColor("gray")
                        },
                        emphasis: {
                            iconStyle: {
                                // borderColor: partten.getColor("gray")
                            },
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                        },
                        // backgroundColor: "rgba(0,0,0,0.4)",
                        // borderColor: partten.getColor("gray"),
                        // textStyle: {
                        //   fontSize: util.vh(16),
                        //   color: partten.getColor("gray"),
                        // },
                        // formatter(params) {
                        //     let str = that.getToolTipFn(params)
                        //     return str
                        //     // return params.value ? .x ?
                        //     //     `${params.seriesName}<br />风速：${params.value.x}m/s<br />功率：${params.value.y}kW` :
                        //     //     `${params.name}`;
                        // },
                    },
                    brush: {
                        seriesIndex: [2, 3],
                        yAxisIndex: 0,
                        transformable: true,
                        throttleType: "debounce",
                        throttleDelay: 1000,
                        removeOnClick: true,
                        brushType: "polygon",
                        brushMode: "multiple",
                        brushStyle: {
                            borderWidth: 1,
                            borderColor: "#ff2424",
                        },
                    },
                    dataZoom: [{
                            type: "inside", //图表下方的伸缩条
                            show: true, //是否显示
                            realtime: true, //拖动时，是否实时更新系列的视图
                            start: 0, //伸缩条开始位置（1-100），可以随时更改
                            end: 5, //伸缩条结束位置（1-100），可以随时更改
                        },
                        {
                            type: "slider", //图表下方的伸缩条
                            show: true, //是否显示
                            realtime: true, //拖动时，是否实时更新系列的视图
                            start: 0, //伸缩条开始位置（1-100），可以随时更改
                            end: 5, //伸缩条结束位置（1-100），可以随时更改
                        },
                    ],
                    textStyle: {
                        fontSize: util.vh(16),
                        color: that.echartsTheme === "dark" ? "#fff" : "#000",
                    },
                    // visualMap: {
                    //     type: "piecewise",
                    //     show: false,
                    //     dimension: 0,
                    //     seriesIndex: 0,
                    //     // pieces: that.getColorFn()
                    // },
                    //图例-每一条数据的名字
                    legend: {
                        show: that.showLegend,
                        // data: [ "拟合功率", "保证功率","无用点", "有用点", "Cp值"],
                        right: 170,
                        type: 'scroll',
                        top: "5",
                        // icon: "circle",
                        itemWidth: 6,
                        // inactiveColor: that.echartsTheme === "dark" ?
                        //     partten.getColor("gray") : "#000",
                        textStyle: {
                            // color: that.echartsTheme === "dark" ?
                            //     partten.getColor("grayl") : "#000",
                            fontSize: 12,
                        },

                    },
                    grid: {
                        top: 58,
                        left: 40,
                        right: 48,
                        // bottom: 24,
                    },
                    //x轴
                    xAxis: [{
                        name: '时间',
                        nameTextStyle: {
                            color: '#838383'
                        },
                        type: "category",
                        boundaryGap: true,
                        data: that.xAxisData || [],
                        axisLabel: {
                            formatter: "{value}",
                        },
                        splitLine: {
                            show: false,
                        },
                        smooth: true,
                        textStyle: {
                            // color: that.echartsTheme === "dark" ?
                            //     partten.getColor("gray") : "#000",
                        },
                    }, ],
                    //y轴没有显式设置，根据值自动生成y轴
                    yAxis: [{
                        splitLine: {
                            show: false
                        },
                        position: 'left',
                        min: 0,
                        name: '度',
                        nameTextStyle: {
                            color: '#838383'
                        },
                    }],
                    animation: true,
                    dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
                    //数据-data是最终要显示的数据
                    series: that.seriesData,
                };

                that.resize = function () {
                    myChart.resize();
                };

                window.addEventListener("resize", that.resize);

                myChart.setOption(option);
                // if (that.brushSelected) {
                //   myChart.dispatchAction({
                //     type: "takeGlobalCursor",
                //     // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
                //     key: "brush",
                //     brushOption: {
                //       seriesIndex: [2,3],
                //       yAxisIndex: 0,
                //       transformable: true,
                //       throttleType: "debounce",
                //       throttleDelay: 1000,
                //       removeOnClick: true,
                //       brushType: "polygon",
                //       brushMode: "multiple",
                //       brushStyle: {
                //         borderWidth: 1,
                //         color: "rgba(255,36,36,0.2)",
                //         borderColor: "#ff2424",
                //       },
                //     },
                //   });
                // }
                myChart.off("brushSelected");
                myChart.on("brushSelected", (params) => {
                    that.$emit("getSelected", params.batch || []);
                });
                myChart.off('click')
                myChart.on('click', params => {
                    // if(params.componentType === 'markArea'){
                    //   myChart.dispatchAction({
                    //     type: 'brush',
                    //     areas: [
                    //       {
                    //         xAxisIndex: 0,
                    //         brushType: 'lineX',
                    //         coordRange: [params.data.coord[0][0], params.data.coord[1][0]]
                    //       },
                    //     ]
                    //   });
                    // }
                })
            },
        },
        created() {
            this.id = "chart-" + util.newGUID();
        },
        mounted() {
            // this.$nextTick(() => {
            this.$el.style.width = this.width;
            this.$el.style.height = this.height;
            this.initChart();
            // });
        },
        updated() {
            // console.log('update')
            let myChart = echarts.init(document.getElementById(this.id));
            myChart.dispose();
            this.$nextTick(() => {
                this.initChart();
            });
        },
        unmounted() {
            window.removeEventListener("resize", this.resize);
        },
    };
</script>

<style lang="less">
    .chart {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
</style>