var UICtrl = function (){
    var _inst = this;
    var sel = null;
    var currIndex = -1;
    var itemDatas = null
    
    this.start = function (){
        this.initUI();
        this.updateUI();
    }
    this.initUI = function (){
        $("#guzhang").click(function(){
            DataConfig.getGuZhang(id, (count)=>{
                let p = document.getElementById('gznum');
                p.innerText = "("+count+")";
            })
        });
        $("#dianzan").click(function(){
            DataConfig.getDianZa(id, (count)=>{
                let p = document.getElementById('dznum');
                p.innerText = "("+count+")";
            })
        });
        $("#songhua").click(function(){
            DataConfig.getSongHua(id, (count)=>{
                let p = document.getElementById('shnum');
                p.innerText = "("+count+")";
            })
        });
        $("#closeDetial").click(function(){
            $("#showDetial").hide();
        });
        let isOpen = true;
        $("#switchOpen").click(function(){
            isOpen = !isOpen;
            if(isOpen){
                $("#switchOpen").attr("src", "http://exhibition.szwyg.org.cn/resources/studio_ancient/res/imgs/shouqi.png");
                $("#allItems").show();
            }
            else{
                $("#switchOpen").attr("src", "http://exhibition.szwyg.org.cn/resources/studio_ancient/res/imgs/zhankai.png");
                $("#allItems").hide();
            }
        });
    }
    this.createLeftMenu = function (datas){
        console.log(datas);
        itemDatas = datas;
        for(let i = 0; i < itemDatas.length; i++){
            let exhibit = itemDatas[i]
            let title = ""
            if (exhibit.title == null || exhibit.title == "") {
                title = "视频"+(i+1);
            } else {
                title = exhibit.title;
            }
            let item = `
            <div class="item" style="position: relative;">
                <p>${title}</p>
                <button type="button" id="${i}" onclick="uiCtrl.onItemClick(this)" style="background:transparent;border:0;position: absolute;width:100%;height:100%;"></button>
                <button type="button" id="${exhibit.id}" onclick="uiCtrl.onDetailBtnClick(this)" style="color:white;background:transparent;border:1;position: absolute;width:20%;height:30%;right:10px;top:2px;">详情</button>
                <div style="width:100%;"></div>
            </div>
            `
            $(item)._url = exhibit.url
            $(item).attr("_url", exhibit.url)
            $(item).attr("_id", exhibit.id)
            $(".allItems").append(item);
        }
    }
    this.playNextVideo = function (){
        currIndex++;
        let items = $(".allItems").children();
        currIndex = currIndex%items.length;
        if(sel) {
            sel.style.background = "#ffffff00";
        }
        
        sel = items[currIndex];
        sel.style.background = "#ffffff88";
        if (itemDatas != null && itemDatas.length > currIndex) {
            playPingMu(itemDatas[currIndex].url);
        }
    }

    this.playSelectedVideo = function (index){
        currIndex = index;
        let items = $(".allItems").children();
        currIndex = currIndex%items.length;
        if(sel) {
            sel.style.background = "#ffffff00";
        }
        sel = items[currIndex];
        sel.style.background = "#ffffff88";
        if (itemDatas != null && itemDatas.length > currIndex) {
            playPingMu(itemDatas[currIndex].url);
        }
    }

    this.onItemClick = function(item) {
        this.playSelectedVideo(Number(item.id))
    }

    this.onDetailBtnClick = function(detailBtn) {
        showPicInfo(detailBtn.id);
    }

    this.updateUI = function (){
        let ratio = document.body.clientWidth/1920;
    }
    this.setProgress = function(value){
        $('#progress')[0].innerHTML = value;
    };
    this.loadFinish = function () {
        document.body.removeChild($('.loading')[0]);
    }
    this.start();
}
