/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * Special Declaration: These technical material reserved as the technical secrets by AGREE 
 * TECHNOLOGY have been protected by the "Copyright Law" "ordinances on Protection of Computer 
 * Software" and other relevant administrative regulations and international treaties. Without 
 * the written permission of the Company, no person may use (including but not limited to the 
 * illegal copy, distribute, display, image, upload, and download) and disclose the above 
 * technical documents to any third party. Otherwise, any infringer shall afford the legal 
 * liability to the company.
 */
import {Widget} from "widget/Widget";
import {ADORE} from "ADORE";
import {EChart} from "widget/echart/EChart";

export class BarGraph extends Widget {
    private static Template: string = `
    <div>
        <div style="width:100%;height:100%"></div>
    </div>
    `;
    private data: Array<Entry> = new Array<Entry>();
    private resizeFunction: any;
    private echart: Echart;
    private option = {};
    private $graphNode: JQuery;

    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);

        let own = this;
        this.$thisNode = $(BarGraph.Template).attr("id", this.id);
        this.$graphNode = this.$thisNode.children("div");

        this.resizeFunction = function () {
            own.echart.resize();
        };
        $(window).on("resize", this.resizeFunction);
    }

    setData(args: { data: Array<Entry> }) {
        this.data = args.data;
    }

    clear() {
        this.data = [];
        this.option = [];
        this.echart.clear();
    }

    clearData() {
        this.data = [];
        let graphOption = {
            title: {
                text: "等待时间队列",
                subtext: "",
                x: "center"
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: "line"        // 默认为直线，可选为："line" | "shadow"
                }
            },
            legend: {
                data: ["预警内已等待时间", "距离预警时间", "超出预警时间"],
                orient: "vertical",
                x: "left"
            },
            grid: {
                top: "103px",
                left: "3%",
                right: "10%",
                bottom: "3%",
                containLabel: true
            },
            xAxis: {
                type: "category",
                name: "客户名称",
                data: [""],
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: "value",
                name: "时间/分"
            }
        };

        this.option = graphOption;
        if (this.echart) {
            this.echart.clear();
            this.echart.setOption(this.option);
        }
    }

    postLayout() {
        let own = this;
        //layout后组件的高度才能够确定，echarts.init()需要width和height确定的div
        if (this.data.length > 0) {
            this.redrawGraph();
        }
        if (!this.echart) {
            this.echart = echarts.init(this.$graphNode.get(0) as HTMLDivElement);

            if (this.option) {
                this.echart.setOption(this.option);
            }
        }
    }

    //重写dispose方法,清除绑定的resize事件
    dispose() {
        $(window).off("resize", this.resizeFunction);
        super.dispose();
    }


    redrawGraph() {
        let nameList: Array<string> = new Array<string>();
        //使用string队列是因为需要使用""空字符
        let blueValueList: Array<string> = new Array<string>();
        let whiteValueList: Array<string> = new Array<string>();
        let redValueList: Array<string> = new Array<string>();
        let dValueList: Array<number> = new Array<number>();
        for (let entry of this.data) {
            let dValue: number = entry.value - entry.alertValue;
            dValueList.push(dValue);
            let blueValue: string;
            let whiteValue: string;
            let redValue: string;
            if (dValue === 0) {
                blueValue = entry.value + "";
                whiteValue = "";
                redValue = "";
            } else if (dValue > 0) {
                blueValue = entry.alertValue + "";
                whiteValue = "";
                redValue = dValue + "";
            } else if (dValue < 0) {
                blueValue = entry.value + "";
                whiteValue = 0 - dValue + "";
                redValue = "";
            }
            //为0时置为""
            blueValue = blueValue === "0" ? "" : blueValue;
            whiteValue = whiteValue === "0" ? "" : whiteValue;
            redValue = redValue === "0" ? "" : redValue;

            nameList.push(entry.name);
            blueValueList.push(blueValue);
            whiteValueList.push(whiteValue);
            redValueList.push(redValue);
        }

        //设置两个标记点的逻辑


        let tempDValueList: Array<number> = dValueList.concat();
        //将dValueList从小到大排列
        tempDValueList.sort(function (a: number, b: number) {
            return a - b;
        });

        let signWhiteValue: number = tempDValueList[0];
        let signWhiteX: number = dValueList.indexOf(signWhiteValue);
        let signWhiteY: number = this.data[signWhiteX].alertValue;
        signWhiteValue = 0 - tempDValueList[0];

        let signRedValue: number = tempDValueList[tempDValueList.length - 1];
        let signRedX: number = dValueList.lastIndexOf(signRedValue);
        let signRedY: number = this.data[signRedX].value;

        let graphOption = {
            title: {
                text: "等待时间队列",
                subtext: "",
                x: "center"
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: "line"        // 默认为直线，可选为："line" | "shadow"
                }
            },
            legend: {
                data: ["预警内已等待时间", "距离预警时间", "超出预警时间"],
                orient: "vertical",
                x: "left"
            },
            grid: {
                top: "103px",
                left: "3%",
                right: "10%",
                bottom: "3%",
                containLabel: true
            },
            xAxis: {
                type: "category",
                name: "客户名称",
                data: nameList,
                axisTick: {
                    alignWithLabel: true
                }
            },
            yAxis: {
                type: "value",
                name: "时间/分"
            },
            series: [
                {
                    name: "预警内已等待时间",
                    type: "bar",
                    stack: "等待时间",
                    label: {
                        normal: {
                            show: true,
                            position: "inside"
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#004B97",
                            borderColor: "#004B97"
                        }
                    },
                    data: blueValueList
                },
                {
                    name: "距离预警时间",
                    type: "bar",
                    stack: "等待时间",
                    label: {
                        normal: {
                            show: true,
                            position: "inside",
                            textStyle: {
                                color: "#009100"
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#FCFCFC",
                            borderColor: "#004B97"
                        }
                    },
                    data: whiteValueList
                },
                {
                    name: "超出预警时间",
                    type: "bar",
                    stack: "等待时间",
                    label: {
                        normal: {
                            show: true,
                            position: "inside"
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: "#CE0000",
                            borderColor: "#CE0000"
                        }
                    },
                    data: redValueList
                }
            ]
        };

        this.option = graphOption;
        if (this.echart) {
            this.echart.setOption(this.option);
        }
    }
}

interface Entry {
    name: string;
    value: number;
    alertValue: number;
}