function Page(classname,options={}){
    // 根據傳進來的類名獲取大盒子
    this.box = document.querySelector("."+classname);
    // 定義預設的引數
    this.default = {
        language:{ // 因為使用者可以不傳，所以需要定義預設值
            first:"首頁",
            prev:"上一頁",
            list:null,
            next:"下一頁",
            last:"尾頁"
 

        },
        pageInfo:{ // 因為使用者可以不傳，所以需要定義預設值
            total:100,
            pageSize:10
        },
        showData:function(){}
    }
    // 定義當前頁
    this.currentPage = 1;
    // 定義放頁碼的盒子
    this.list = null;

    // 引數替換
    // 替換語言
    for(var attr in options.language){
        this.default.language[attr] = options.language[attr];
    }
    
 
// 替換頁碼資訊
    for(var attr in options.pageInfo){
        this.default.pageInfo[attr] = options.pageInfo[attr];
    }
    // 定義總頁數
    this.totalPage = Math.ceil(this.default.pageInfo.total/this.default.pageInfo.pageSize)

    // 以後在使用這些資料的時候，使用default
    // 建立標籤 - 通過語言
    for(var attr in this.default.language){
        
 
var div = document.createElement("div");
        div.className = attr;
        div.innerText = this.default.language[attr];
        this.box.appendChild(div)
        // 加樣式是除了list都加
        if(attr != 'list'){
            setStyle(div,{
                float:"left",
                padding:"5px",
                margin:"5px",
                border:"1px solid #000"
            });
        }else{
            this.list = div;
        }
    }
    // 建立頁碼
    /*
    頁碼有3種情況：
        1.前2頁
        2.最後2頁
        3.中間的頁碼
    條件：需要知道當前是第幾頁 - 一開啟就是第一頁 - 定義當前頁，作為物件的屬性
    */

    // 處理showData的可選性
    if(options.showData){
        this.default.showData = options.showData
    }
    
    // console.log(this.default);

    this.createPageNum();
    this.setDisabled()
    this.default.showData(this.currentPage)
    // 應該給這些標籤新增點選事件，讓整個分頁動起來，事件挺多 - 事件委託
    this.box.onclick = (e)=>{
        // 通過事件物件，獲取目標元素
        var e = e || window.event;
        var target = e.target || e.srcElement;
        // 判斷是哪個標籤，每個標籤的功能是不一樣的
        if(target.className == "first" && target.getAttribute("disabled")!="true"){ // 點選了首頁
            // 將當前頁設定為1
            this.currentPage = 1;
            this.setDisabled()
            this.list.innerHTML = '';
            this.createPageNum();
            this.default.showData(this.currentPage)
        }else if(target.className == "prev" && target.getAttribute("disabled")!="true"){ // 點選了上一頁
            this.currentPage-- // 當前頁-1
            // 在第1頁點選會出問題
            if(this.currentPage<=1){
                this.currentPage = 1;
            }
            this.setDisabled()
            this.list.innerHTML = '';
            this.createPageNum();
            this.default.showData(this.currentPage)
        }else if(target.className == 'next' && target.getAttribute("disabled")!="true"){ // 點選了下一頁
            // 讓當前頁+1
            this.currentPage++
            if(this.currentPage>=this.totalPage){
                this.currentPage=this.totalPage
            }
            this.setDisabled()
            this.list.innerHTML = '';
            this.createPageNum();
            this.default.showData(this.currentPage)
        }else if(target.className == 'last' && target.getAttribute("disabled")!="true"){ // 點選了尾頁
            // 讓當前頁=最後一頁
            this.currentPage=this.totalPage
            this.setDisabled()
            this.list.innerHTML = '';
            this.createPageNum();
            this.default.showData(this.currentPage)
        }else if(target.nodeName == 'P' && target.innerText-0 != this.currentPage){ // 點選了頁碼
            // 將當前頁設定為這個頁碼標籤中的內容
            // 獲取頁碼標籤中的內容
            var num = target.innerText;
            this.currentPage = num-0;
            this.setDisabled()
            this.list.innerHTML = '';
            this.createPageNum();
            this.default.showData(this.currentPage)
        }else if(target.nodeName === "BUTTON"){
            // 獲取輸入的頁碼
            var num = target.previousElementSibling.value-0;
            if(num<1 || num>this.totalPage){
                alert("請輸入合法的頁碼數字");
                return false;
            }
            // 將當前頁設定為這個頁碼
            this.currentPage = num;
            this.setDisabled()
            this.list.innerHTML = '';
            this.createPageNum();
            this.default.showData(this.currentPage)
        }
    }
    var input = document.createElement("input");
    input.setAttribute("type","number")
    this.box.appendChild(input)
    setStyle(input,{
        outline:"none",
        border:"none",
        padding:"8px",
        border:"1px solid #000",
        margin:"5px",
        width:"50px"
    })
    var btn = document.createElement("button");
    btn.innerText = 'GO';
    this.box.appendChild(btn)
    setStyle(btn,{
        outline:"none",
        border:"none",
        padding:"8px",
        border:"1px solid #000",
        margin:"5px",
    })
    var div = document.createElement("span");
    div.innerText = `共${this.totalPage}頁，當前第${this.currentPage}頁`;
    this.box.appendChild(div);
}
// 設定禁用項
Page.prototype.setDisabled = function(){
    if(this.currentPage==1){
        this.box.children[0].setAttribute("disabled",true)
        this.box.children[0].style.backgroundColor = '#ccc';
        this.box.children[1].setAttribute("disabled",true)
        this.box.children[1].style.backgroundColor = '#ccc';
    }else{
        this.box.children[0].setAttribute("disabled",false)
        this.box.children[1].style.backgroundColor = this.box.children[0].style.backgroundColor = '#fff';
        this.box.children[1].setAttribute("disabled",false)
    }
    if(this.currentPage == this.totalPage){
        this.box.children[3].setAttribute("disabled",true)
        this.box.children[3].style.backgroundColor = '#ccc';
        this.box.children[4].setAttribute("disabled",true)
        this.box.children[4].style.backgroundColor = '#ccc';
    }else{
        this.box.children[3].setAttribute("disabled",false)
        this.box.children[4].style.backgroundColor = this.box.children[3].style.backgroundColor = '#fff';
        this.box.children[4].setAttribute("disabled",false)
    }
}
// 建立頁碼標籤的
Page.prototype.createPageNum = function(){
    if(this.totalPage>=5){
        if(this.currentPage<3){ // 前2頁
            for(var i=1;i<=5;i++){ // 建立1~5的頁碼
                var p = document.createElement("p");
                p.innerText = i;
                // 將p標籤放到放頁碼的list裡面 - 獲取list - 將list作為自己的屬性
                this.list.appendChild(p)
                // 給p標籤加樣式
                setStyle(p,{
                    float:"left",
                    padding:"5px",
                    margin:"5px",
                    border:"1px solid #000"
                })
                if(this.currentPage == i){
                    p.style.backgroundColor = '#ff0036';
                }
            }
        }else if(this.currentPage > this.totalPage-2){ // 判斷當前頁是否大於總也是-2，發現沒有總頁數
            for(var i=this.totalPage-4;i<=this.totalPage;i++){ // 迴圈總頁數-4開始，到總頁數結束
                var p = document.createElement("p");
                p.innerText = i;
                // 將p標籤放到放頁碼的list裡面 - 獲取list - 將list作為自己的屬性
                this.list.appendChild(p)
                // 給p標籤加樣式
                setStyle(p,{
                    float:"left",
                    padding:"5px",
                    margin:"5px",
                    border:"1px solid #000"
                })
                if(this.currentPage == i){
                    p.style.backgroundColor = '#ff0036';
                }
            }
        }else{
            for(var i=this.currentPage-2;i<=this.currentPage+2;i++){ // 中間頁是  當前頁-2開始到當前頁+2結束
                var p = document.createElement("p");
                p.innerText = i;
                // 將p標籤放到放頁碼的list裡面 - 獲取list - 將list作為自己的屬性
                this.list.appendChild(p)
                // 給p標籤加樣式
                setStyle(p,{
                    float:"left",
                    padding:"5px",
                    margin:"5px",
                    border:"1px solid #000"
                })
                if(this.currentPage == i){
                    p.style.backgroundColor = '#ff0036';
                }
            }
        }
    }else{ // 總頁數小於5的情況
        for(var i=1;i<=this.totalPage;i++){ // 展示1~總頁數
            var p = document.createElement("p");
            p.innerText = i;
            // 將p標籤放到放頁碼的list裡面 - 獲取list - 將list作為自己的屬性
            this.list.appendChild(p)
            // 給p標籤加樣式
            setStyle(p,{
                float:"left",
                padding:"5px",
                margin:"5px",
                border:"1px solid #000"
            })
            if(this.currentPage == i){
                p.style.backgroundColor = '#ff0036';
            }
        }
    }
}

function setStyle(ele,styleObj){
    for(var attr in styleObj){
        ele["style"][attr] = styleObj[attr];
    }
}