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

export class List extends Widget {
    private static TemplateCotainer: string = `
    <ul class="adore_list">
    </ul>`;
    private static TemplateHorizontal = `
    <li class="adore_list_li_horizontal">
    <a href="#" class="adore_list_li_a waves-effect">
        <img class="adore_list_img_horizontal">
        <span class="adore_list_span adore_list_span_horizontal"></span>
    </a>
    </li> `;
    private static TemplateVertical = `
    <li class="adore_list_li_vertical">
    <a href="#" class="adore_list_li_a waves-effect">
        <img>

        <div class="adore_list_span">
            <span></span>
        </div>
    </a>
    </li>`;
    private static TemplateSpan = `
    <span class="adore_list_message"></span>`;

    private isHorizontal: boolean;
    private itemTemplate: string;
    private fontSize: string;

    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);
        this.$thisNode = $(List.TemplateCotainer).attr("id", this.id);
        this.itemTemplate = List.TemplateHorizontal;
        this.isHorizontal = true;
        if ((this.style & ADORE.Vertical) === ADORE.Vertical) {
            this.isHorizontal = false;
            this.itemTemplate = List.TemplateVertical;
        }
    }
    /**
     * @attrs {items:[{name:"",imagePath:"",msgNum:""},...]}//
    */
    public addItems(args: { items: { name: string, imagePath: string, msgNum: string }[] }) {
        let items = args.items;
        let $father = this.$thisNode.parent();
        this.$thisNode.detach();
        if (!items || items.length === 0) {
            return;
        }
        for (let i = 0; i < items.length; i++) {
            if (items[i].name) {
                if (this.$thisNode.find("#" + items[i].name).length !== 0) {
                    this.setItem(items[i]);
                } else {
                    this.addItem(items[i]);
                }
            }
        }
        if (this.fontSize) {
            this.$thisNode.find("span").css({ fontSize: this.fontSize });
        }
        this.$thisNode.appendTo($father);
    }
    /**
     * @item{name:"",imagePath:"",msgNum:""}
    */
    private setItem(item: { name: string, imagePath: string, msgNum: string }) {
        let $itemNode = this.$thisNode.find("#" + item.name);
        this.setItemAttr($itemNode, item);
    }
    /**
    * @item{name:"",imagePath:"",msgNum:""}
    */
    private addItem(item: { name: string, imagePath: string, msgNum: string }) {
        let $itemNode = $(this.itemTemplate).attr({ id: item.name });
        $itemNode.appendTo(this.$thisNode);
        this.setItemAttr($itemNode, item);
        let own = this;
        // 添加click
        $itemNode.find("a").on("click", function (e: BaseJQueryEventObject) {
            if (!own.enabled) {
                return;
            }
            //添加选中色
            $("a.adore_list_li_a_selected").removeClass("adore_list_li_a_selected");
            $(this).addClass("adore_list_li_a_selected");
            //事件处理待完善
            let itemIndex = own.indexOf($itemNode[0]);
            e.preventDefault();
            EventHub.dispatchEvent(MessageType.WIDGET, {
                id: own.id,
                selectIndex: itemIndex,
                evtType: Event.ON_CHANGE
            });
        });
    }
    /**
    * @item{name:"",imagePath:"",msgNum:""}
    */
    private setItemAttr($itemNode: JQuery, item: { name: string, imagePath: string, msgNum: string }) {
        $itemNode.find("a").find("span").text(item.name);
        //设置图片
        if (item.imagePath) {
            $itemNode.find("img").attr("src", item.imagePath);
            if (this.isHorizontal) {
                $itemNode.find("img").css({ width: "18px", height: "18px" });
            } else {
                $itemNode.find(".adore_list_span").css("margin-top", "-5px");
            }
        }
        //设置消息提示
        if (item.msgNum) {
            let $msgNode = $itemNode.find(".adore_list_message");
            if ($msgNode.length === 0) {
                $msgNode = $(List.TemplateSpan);
                $itemNode.prepend($msgNode);
                if (this.isHorizontal) {
                    $msgNode.addClass("adore_list_message_horizontal");
                } else {
                    $msgNode.addClass("adore_list_message_vertical");
                }
            }
        } else {
            $itemNode.find(".adore_list_message").remove();
        }
    }
    public setItems(args: { items: { name: string, imagePath: string, msgNum: string }[] }) {
        let items = args.items;
        this.clear(); //先刪除所有
        this.addItems({ items: items });
    }
    public setFontSize(args: { fontSize: string }) {
        this.fontSize = args.fontSize;
        if (this.$thisNode) {
            this.$thisNode.find("span").css({ fontSize: args.fontSize });
        }
    }
    private indexOf(item: HTMLElement): number {
        let $items = this.$thisNode.find("li");
        for (let i = 0; i < $items.length; i++) {
            if (item === $items[i]) {
                return i;
            }
        }
        return -1;
    }
    public select(args: { index: number }) {
        let index = args.index;
        let allA = this.$thisNode.find("a");
        if (index < 0 || index >= allA.length) {
            return;
        }
        $(allA[index]).trigger("click");
    }
    /**
     * @itemNames ["name1","name2",...]
     */
    public removeItem(args: { itemIds: string[] }) {
        let ids = args.itemIds;
        if (ids && ids.length > 0) {
            for (let i = 0; i < ids.length; i++) {
                this.$thisNode.find("#" + ids[i]).remove();
            }
        }
    }
    public clear() {
        this.$thisNode.find("li").remove();
    }
    public setFocus() {

    }
}