/*
* @author: lyh
* @last-update: 2020-08-21 11:39
*/

'use strict';

const webaxios = axios.create({
  baseurl: 'web_api/'
})


/*  mixins */
let split_page =  function(){

    let template = `<ul class="pagetoolbar">

        <li v-for="i in pagecodearray"  :class="{active:i==current_page}" @click="handlejumppage(i)">
        {{i}}
        </li>

        <form class="page-jump" @submit.prevent="handlejumppage(input_page)" v-if="total_page>btn_num">
             鍏眥{total_page}}椤? 璺宠嚦绗?input type="number" v-model.number="input_page" class="ui-paging-count" min="1" :max="total_page"> 椤?             <button  class="active">纭畾</button>
         </form>
    </ul>`;


    //vue component
    let page_selectbar = {

        name:'page-selector',

        data(){

            return {input_page:''}
        },

        template:template,

        props:{

            //搴曢儴鏄剧ず椤电爜鎸夐挳鐨勬暟鐩? 娉ㄦ剰 v-for="i in btn_num" 灏嗕粠1寮€濮?            btn_num:{

                type: number,
                default: 6,
            },

            //褰撳墠鏄惁鍙€夐〉,ajax鏄紓姝ョ殑锛屽姞杞芥椂搴旈伩鍏嶉€夐〉锛屾€曞悗鍙戝厛鑷筹紝鍏堝彂鍚庤嚦瀵艰嚧椤甸潰閿欎贡
            can_select:{
               type:boolean,
               required: true,
            },

            count:{ //鎬昏褰曟暟

                type: number,
                required: true,
            },

            current_page:{

                type: number,
                required: true,
            },

            per:{
                type: number,
                required: true
            }

        },

    //avoid mutating a prop directly since(鍥犱负) the value will be overwritten whenever(姣忓綋) the parent component re-renders.

        methods:{

           
            handlejumppage(page) {

                if(this.can_select && page!=this.current_page) this.$emit('page-select',page);
            }


        },

        computed:{

            pagecodearray(){

                let {btn_num:length, current_page, total_page} = this;

                let half = math.ceil(this.btn_num/2);

                let offset ;

                //鎬婚〉鏁版瘮闇€瑕佸睍绀虹殑鎸夐挳鏁板皬  浠?寮€濮嬫樉绀?锛?椤甸暱涓簍otal_page  
                if(total_page < this.btn_num){ 

                    length = total_page;
                    offset = 1;

                //褰撳墠椤垫暟灏忎簬绛変簬涓€鍗? 浠?寮€濮嬫樉绀?
                }else if(current_page <= half ){

                    offset = 1;
                
                //褰撳墠椤电爜澶т簬  total_page - half ,  浠?total_page - btn_num+1 寮€濮嬫樉绀?                }else if( current_page > total_page - half ){

                    offset = total_page - length + 1;

                }else{ //褰撳墠椤垫暟澶т簬  half 椤?, 鏄剧ず current_page - half  鑷? current_page - half +  btn_num -1

                    offset = current_page - half ;
                }

                //console.log({offset, half, length, total_page});
                
                return array.from({length}, (v,i)=>offset+i);
          
            },

            // 鎬婚〉鏁? 鏈€灏忓€间负1
            total_page(){

                return this.count?math.ceil(this.count/this.per):1;
            }

        }
    };




    // this is  the mixin
   return {

        data(){

            return {
                count:0, //鎬昏褰曟暟
                per:10,  //姣忛〉鏄剧ず
                current_page:1,  //褰撳墠椤电爜
                list:[],
                can_select:true
            }
        },

        components:{ [page_selectbar.name]:page_selectbar },

        methods:{

            handlepageselect(n) {

                this.current_page = n;

                this.loadlist(n);

            },


            loadlist(page){  //鍔犺浇鏌愰〉鍒楄〃鏁版嵁

                var url_list = ''


                if(this.api_list){

                    url_list = this.api_list.replace('$page', page);


                }else if(this.api_prefix){

                    url_list = `${this.api_prefix}list/${page}`
                }
            

                if(!url_list) return promise.reject('api_list 鎴?api_prefix 涓虹┖');

                this.can_select = false;

                return webaxios.get(url_list).then(res=>{

                    var {list, count, per} = res.data;

                    if(!list) return ;

                    this.list = list;

                    this.count = count;

                    if(per) this.per = per;
                    

                }).catch(e=>{

                    console.error(e);

                }).then(()=>{

                    this.can_select = true ;

                })

            }
        }

        

    }

}();



void function(){

    var el_style = document.createelement('style');

    el_style.innerhtml = `.pagetoolbar {
            padding-bottom: 60px;
            display: flex;
        }

        .pagetoolbar li {
            padding: 9px 16px;
            margin: 0 5px;
                color: #555;
            cursor:pointer;
        }

        .pagetoolbar input {
            line-height: 39px;
            padding: 0;
            border: 1px solid #d7d7d7;
            text-align: center;
            width: 40px;
            margin: 0 0 0 10px;
            vertical-align: middle;
            margin-right: 6px;
        }

        .pagetoolbar  button {
            display: inline-block;
            vertical-align: top;
            border-radius: 2px;
            line-height: 40px;
            width: 70px;
            cursor: pointer;
            margin-left: 7px;

            box-sizing: border-box;

            text-align: center;
        }

        .page-jump {
            padding:0 !important;
        }

        .pagetoolbar .active {

            background-color: var(--theme-color, #d6010e);
            color: #fff;
        }`;

    document.head.append(el_style);

}();