/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * 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 ProductShow extends Widget {
    private static TemplateRow = `<div class="row"> </div>`;
    private static TemplateShow = `
    <div class="col s6 m6 l4 product-show">
    <div class="product-show-container">
        <img class="product-show-container-img" src="../www/images/product_show/hot-sell.png">

        <div class="product-show-container-prefix">
            <div class="product-show-title">
                <p></p>
            </div>
            <div class="product-show-second-container">
                <div class="product-show-subtitle">
                    <p></p>
                </div>
                <div class="product-show-income">
                    <p></p>
                </div>
                <div class="product-show-image">
                    <img style="max-width: 100%;max-height: 100%;">
                </div>
                <div class="product-show-details">
                    <p class="product-show-details-content">
                        
                    </p>
                </div>
                <div class="product-show-button">
                    <p></p>
                </div>
            </div>
        </div>
    </div>
</div> `;
    private noIncome: boolean;

    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);
        this.$thisNode = $(ProductShow.TemplateRow).attr({ id: this.id });
        this.noIncome = false;
        let result = ADORE.ProductShowNoIncome & style;
        if (result === ADORE.ProductShowNoIncome) {
            this.noIncome = true;
        }
    }

    /**
     * @item{id:"",title:"",subTitle:"",income:"预期收益",image:"",details:"",btnText:""}
    */
    public addItems(args: { items: { id: string, title: string, subTitle: string, income: string, image: string, details: string, btnText: string }[] }) {
        let items = args.items;
        if (!items || items.length === 0) {
            return;
        }
        let $father = this.$thisNode.parent();
        this.$thisNode.detach();
        for (let i = 0; i < items.length; i++) {
            if (this.$thisNode.find("#" + items[i].id).length !== 0) {
                this.setItem(items[i]);
            } else {
                this.addItem(items[i]);
            }
        }
        this.$thisNode.appendTo($father);
    }

    public setItems(args: { items: { id: string, title: string, subTitle: string, income: string, image: string, details: string, btnText: string }[] }) {
        let items = args.items;
        this.clear();//先刪除所有
        this.addItems({ items: items });
    }

    /**
     * @item{id:"",title:"",subTitle:"",income:"预期收益",image:"",details:"",btnText:""}
    */
    private addItem(item: { id: string, title: string, subTitle: string, income: string, image: string, details: string, btnText: string }) {
        let itemNode = $(ProductShow.TemplateShow).attr({ id: item.id });
        itemNode.appendTo(this.$thisNode);
        this.setItemAttr(itemNode, item);
        let own = this;
        //添加click
        itemNode.find("div.product-show-button").on("click", function (e) {
            let index = own.indexOf(itemNode[0]);
            let productID = itemNode.attr("id");
            EventHub.dispatchEvent(MessageType.WIDGET, {
                id: own.id,
                evtType: Event.CLICK,
                index: index,
                itemID: productID
            });
        });
    }

    private indexOf(item: HTMLElement): number {
        let items = this.$thisNode.find("div.product-show");
        for (let i = 0; i < items.length; i++) {
            if (item === items[i]) {
                return i;
            }
        }
        return -1;
    }

    /**
     * @item{id:"",title:"",subTitle:"",income:"预期收益",image:"",details:"",btnText:""}
    */
    private setItem(item: { id: string, title: string, subTitle: string, income: string, image: string, details: string, btnText: string }) {
        let itemNode = this.$thisNode.find("#" + item.id);
        this.setItemAttr(itemNode, item);
    }

    /**
     * @item{id:"",title:"",subTitle:"",income:"预期收益",image:"",details:"",btnText:""}
    */
    private setItemAttr(itemNode: JQuery, item: { id: string, title: string, subTitle: string, income: string, image: string, details: string, btnText: string }) {
        //title、subTitle,income
        itemNode.find("div.product-show-title").find("p").html(this.parseText(item.title));
        if (this.noIncome) {
            itemNode.find("div.product-show-income").css("display", "none");
            itemNode.find("div.product-show-subtitle").css("display", "none");
            itemNode.find("div.product-show-image").css("margin-top", "10px");
            itemNode.css("height", "408px");
        } else {
            itemNode.find("div.product-show-subtitle").find("p").html(this.parseText(item.subTitle));
            itemNode.find("div.product-show-income").find("p").text(item.income);
        }
        //设置image
        if (item.image) {
            itemNode.find("div.product-show-image").find("img").attr("src", item.image);
        } else {
            itemNode.find("div.product-show-image").find("img").attr("src", "../www/images/product_show/product-image.png");
        }
        //设置details和btnText
        itemNode.find("div.product-show-details").find("p").html(this.parseText(item.details));
        itemNode.find("div.product-show-button").find("p").text(item.btnText);
    }

    private parseText(text: string): string {
        if (text) {
            return text.replace(/\n/g, "<br>");
        }
        return "";
    }

    /**
    * 根据id列表删除item
    *
    * @param itemIds ["id1","id2",...]
    */
    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("div.product-show").remove();
    }
}