/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * 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";
/// <reference path="../typings/jquery.d.ts" />
/**
 * Created by tangqianchong on 2016/6/16.
 * Last Modified on 2016/10/26
 */

export class Wizard extends Widget {
    private blockStates: Array<{
        state: string, text: string
    }>;
    private maxATBlockWidth: number;
    private static NORMAL_STYLE_COLOR: string = "#57668E";
    private static ARROR_STYLE_COLOR: string = "#E4DEDE";


    private static mainTemplate = `
     <div class="wizard"></div>
    `;
    private static circleBlockTemplate: string = `
     <div class="wizard_CT_block">
        <div class="wizard_CT_line_block">
            <hr class="wizard_CT_left_line"/>
        </div>
        <div class="wizard_CT_index_block">
            <div class="wizard_CT_outCircle unreached">
                <div class="wizard_CT_inCircle unreached">
                    <span class="wizard_CT_circleText unreached">1</span>

                    <div class="wizard_CT_left_tick unreached"></div>
                    <div class="wizard_CT_right_tick unreached"></div>
                </div>
            </div>
        </div>
        <div class="wizard_CT_line_block">
            <hr class="wizard_CT_right_line"/>
        </div>
        <div class="wizard_CT_text_block">
            <span class="wizard_CT_text"></span>
        </div>
    </div>
    `;
    private static arrowBlockTemplate: string = `
    <div class="wizard_AT_block">
        <div class="wizard_AT_left_part unreached"></div>
        <div class="wizard_AT_center_block unreached">
              <span class="wizard_AT_text_part unreached"></span>
        </div>
        <div class="wizard_AT_right_part unreached"></div>
    </div>
    `;

    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);
        this.$thisNode = $(Wizard.mainTemplate).attr("id", this.id);
        if (style === ADORE.Normal) {
            //reset Function
            this.setAllBlocks = this.setAllCircleBlocks;
            this.$thisNode.css({
                "background-color": Wizard.NORMAL_STYLE_COLOR
            });
        } else if (style === ADORE.Arrow) {
            //reset Function
            this.setAllBlocks = this.setAllArrowBlocks;
            this.$thisNode.css({
                "background-color":Wizard.ARROR_STYLE_COLOR
            });
        }
    }
    //重设所有模块
    public setAllBlocks: (
        args: {
            blockStates: Array<{ text: string, state: string }>
        }) => void;

    private setAllCircleBlocks(args: {
        blockStates: Array<{ text: string, state: string }>
    }) {
        let bs: Array<{ state: string, text: string }> = args.blockStates;
        this.$thisNode.children().remove();
        for (let index = 1; index <= bs.length; index++) {
            let $blockNode: JQuery = $(Wizard.circleBlockTemplate);
            let $outCircleNode: JQuery = $blockNode.find(".wizard_CT_outCircle");
            let $circleTextNode: JQuery = $blockNode.find(".wizard_CT_circleText");
            let $textNode: JQuery = $blockNode.find(".wizard_CT_text");

            this.changeState($outCircleNode, bs[index - 1].state);
            $circleTextNode.html(index.toString());
            $textNode.html(bs[index - 1].text);
            this.$thisNode.append($blockNode);
        }
    }

    private setAllArrowBlocks(args: {
        blockStates: Array<{ text: string, state: string }>
    }) {
        let bs: Array<{ state: string, text: string }> = args.blockStates;
        this.$thisNode.children().remove();
        for (let index = 1; index <= bs.length; index++) {
            let $blockNode: JQuery = $(Wizard.arrowBlockTemplate);
            let $textNode: JQuery = $blockNode.find(".wizard_AT_text_part");

            this.changeState($blockNode, bs[index - 1].state);
            $textNode.html(bs[index - 1].text);
            this.$thisNode.append($blockNode);
        }
    }

    // 将相应节点下的所有内部元素的标识state的class全部替换成对应state
    private changeState($node: JQuery, state: string) {
        let own = this;
        if ($node.children().length > 0) {
            $node.removeClass("finished").removeClass("handling").
                removeClass("unreached").removeClass("unreachable").addClass(state);
            $node.children().each(function (index: number, e: Element) {
                own.changeState($(e), state);
            });
        } else {
            $node.removeClass("finished").removeClass("handling").
                removeClass("unreached").removeClass("unreachable").addClass(state);
        }
    }
}



