/*
 * 特别声明：本技术材料受《中华人民共和国著作权法》、《计算机软件保护条例》等法律、法规、行政
 * 规章以及有关国际条约的保护，赞同科技享有知识产权、保留一切权利并视其为技术秘密。未经本公司书
 * 面许可，任何人不得擅自（包括但不限于：以非法的方式复制、传播、展示、镜像、上载、下载）使用，
 * 不得向第三方泄露、透露、披露。否则，本公司将依法追究侵权者的法律责任。特此声明！
 *
 * 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 ImageViewer extends Widget {
    private static Template = `
    <div class="adore_picture">
    <div class="adore_picture_left">
        <div class="adore_picture_text">图片列表</div>
        <!-- 图片列表-->
        <div class="adore_picture_list">
            <ul class="picture_list">
               
            </ul>
        </div>
    </div>
    <div class="adore_picture_right">
        <div class="adore_picture_text">图片预览</div>
        <!-- 放大缩小按钮-->
        <div style="display: inline-block;width: 100%">
            <img src="images/image_viewer/icon_blow_up.png" class="adore_picture_blowup" value="放大" style="margin-right: 15px;float: right"/>
            <img src="images/image_viewer/icon_reset.png" class="adore_picture_reset" value="还原" style="margin-right: 15px;float: right"/>
            <img src="images/image_viewer/icon_reduce.png" class="adore_picture_reduce" value="缩小" style="margin-right: 15px;float: right"/>
        </div>
        <!-- 大图预览-->
        <div class="adore_picture_preview">
            
        </div>
    </div>
    </div>`;

    private imgWidth: number;
    private imgHeight: number;
    private width: number;
    private height: number;
    private imgs: String[];

    private $pictureList: JQuery;
    private $btnBig: JQuery; //放大按钮
    private $btnSmall: JQuery; //缩小按钮
    private $btnReset: JQuery; //还原按钮

    constructor(parentId: string, id: string, style: number) {
        super(parentId, id, style);
        this.$thisNode = $(ImageViewer.Template).attr("id", this.id);
        this.$pictureList = this.$thisNode.find(".picture_list");
        this.$btnBig = this.$thisNode.find(".adore_picture_blowup");
        this.$btnSmall = this.$thisNode.find(".adore_picture_reduce");
        this.$btnReset = this.$thisNode.find(".adore_picture_reset");
    }

    private blowup() {
        this.imgWidth = $(".adore_picture_preview_img").width();
        this.imgHeight = $(".adore_picture_preview_img").height();
        if ((this.imgHeight <= this.imgHeight * 2) || (this.imgWidth <= this.imgWidth * 2)) {
            this.imgHeight = this.imgHeight + 20;
            this.imgWidth = this.imgWidth + 20;
            $(".adore_picture_preview_img").css("width", this.imgWidth + "px");
            $(".adore_picture_preview_img").css("height", this.imgHeight + "px");
        }
    }

    private reduce() {
        this.imgWidth = $(".adore_picture_preview_img").width();
        this.imgHeight = $(".adore_picture_preview_img").height();
        if ((this.imgHeight > 200) && (this.imgWidth > 200)) {
            this.imgHeight = this.imgHeight - 20;
            this.imgWidth = this.imgWidth - 20;
            $(".adore_picture_preview_img").css("width", this.imgWidth + "px");
            $(".adore_picture_preview_img").css("height", this.imgHeight + "px");
        }
    }
    /**
     * imgs:["","",...]
     */
    public setImages(args: { imgs: String[] }) {
        this.imgs = args.imgs;
        if (this.imgs.length <= 0) {
            return;
        }
        let own = this;

        for (let i = 0; i < own.imgs.length; i++) {
            let flag = own.imgs[i].replace(/\//g, "v"); //标记，用于删除
            flag = flag.replace(/\\/g, "v");
            flag = flag.replace(/\:/g, "v");
            flag = flag.replace(/\./g, "v");
            if (own.$pictureList.find("#" + flag).length <= 0) {
                own.$pictureList.append(`<li id="` + flag + `"><div style="float: left"><input type='checkbox' value="` + own.imgs[i] + `" name="choose" class="adore_picture_checkbox"/></div><img src="` + own.imgs[i] + `" class="adore_picture_list_img"/></li>`);
            }
        }

        this.$btnBig.click(function () {
            if (own.$thisNode.find(".adore_picture_preview_img").length > 0) {
                own.blowup();
            }
        });

        this.$btnSmall.click(function () {
            if (own.$thisNode.find(".adore_picture_preview_img").length > 0) {
                own.reduce();
            }
        });

        this.$btnReset.click(function () {
            if (own.$thisNode.find(".adore_picture_preview_img").length > 0) {
                $(".adore_picture_preview_img").css("width", own.width + "px");
                $(".adore_picture_preview_img").css("height", own.height + "px");
            }
        });

        this.$pictureList.click(function (event) {
            let $li = $(this).children();
            let cur = event.target;
            let imgSrc: String;
            own.$thisNode.find(".adore_picture_preview_img").remove();
            if ($(cur).is($li)) {
                $(cur).addClass("picture_select_current");
                $(cur).siblings().removeClass("picture_select_current");
            } else if ($(cur).is("img")) {
                $(cur).parent().addClass("picture_select_current");
                $(cur).parent().siblings().removeClass("picture_select_current");
            }
            let $pictureli = own.$thisNode.find(".picture_select_current");
            let $thisPicture = $pictureli.find(".adore_picture_list_img");
            imgSrc = $thisPicture.attr("src");
            if (imgSrc != null && imgSrc.length > 0) {
                own.$thisNode.find(".adore_picture_preview").append(`<img src="` + imgSrc + `" class="adore_picture_preview_img"/>`);
                own.width = $(".adore_picture_preview_img").width();
                own.height = $(".adore_picture_preview_img").height();
            }
        });

        let $checked = this.$thisNode.find("input[type='checkbox']");
        for (let i = 0; i < $checked.length; i++) {
            $checked.eq(i).click(function () {
                if ($(this).is(":checked")) {
                    let result = $(this).val() + "";
                    //传递已选择图片路径
                    EventHub.dispatchEvent(MessageType.WIDGET, {
                        id: own.id,
                        selectedImage: result,
                        evtType: Event.CLICK
                    });
                }
            });
        }
    }
    /**
     * removeImgs:["","",...]
     */
    public removeImages(args: { removeImgs: String[] }) {
        let rImgs = args.removeImgs;
        for (let i = 0; i < rImgs.length; i++) {
            let result = rImgs[i].replace(/\//g, "v");
            result = result.replace(/\\/g, "v");
            result = result.replace(/\:/g, "v");
            result = result.replace(/\./g, "v");
            this.$thisNode.find("#" + result).remove();
        }
    }
}