const priceOptionIndex = ()=>{
    return {
        init(){
            this.renderPagination();
            this.initButtons(this.kind);
            this.options = this.options.slice(0, this.pageLength)
        },
        kind: kind,
        pageLength: 50,
        search: '',
        orioptions: options,
        options: options,
        options_arr: {
            1:'標',
            2:'選',
        },
        btntype:1,
        buttons:[],
        pageLength: 50,
        currentpage:1,
        dataLangth:options.length,
        search: '',
        pageNumber:1,
        initButtons(kind){
            if(kind == 'A'){
                this.buttons = [
                    {name: '車廂意匠', type: 'A1'}
                ]
            }else if(kind == 'B'){
                this.buttons = [
                    {name: '天井', type: 'B1'},
                    {name: '地板', type: 'B2'},
                    {name: '操縱盤', type: 'B3'},
                    {name: '扶手', type: 'B4'},
                    {name: '車廂門與層門(轎門/層門)', type: 'B5'},
                    {name: '轎壁(車廂側板)', type: 'B6'},
                    {name: '其他車廂內裝配件', type: 'B7'},
                ]
            }else if(kind == 'C'){
                this.buttons = [
                    {name: '框', type: 'C1'},
                    {name: '乘場指示器', type: 'C2'},
                    {name: '燈', type: 'C3'},
                    {name: '方式與門', type: 'C4'},
                ]
            }else if(kind == 'D'){
                this.buttons = [
                    {name: '功能與配置', type: 'D1'},
                    {name: 'OH與樓高', type: 'D2'},
                ]
            }else if(kind == 'E'){
                this.buttons = [
                    {name: '平台梯', type: 'E1'},
                ]
            }
            this.buttons.unshift({
                name:'顯示全部',type:'1',
            })
            this.btntype = this.buttons[0].type;
        },
        changeType(type=this.btntype){
            this.currentpage = 1
            this.btntype = type;
            this.options = this.orioptions;
            this.options = this.getOptions();
            this.inputSearch()
        },
        getOptions(start=0, end=this.pageLength){
            if(this.btntype != 1){
                return this.options.filter(item=>(item.subkind == this.btntype)).slice(start, end)
            }
            return this.options.slice(start, end);
        },
        inputSearch(e=null){
            let text = e!=null ? e.target.value : this.search;
            this.search = text.toLowerCase();
            if(text != ''){
                this.currentpage = 1;
                this.options = this.orioptions
                this.options = this.options.filter(item=>{
                    if(item.subkind == this.btntype || this.btntype == 1){
                        if(item.group_name == null) item.group_name = ''
                        if(item.spec == null) item.spec = ''
                        if(item.memo == null) item.memo = ''
                        if(item.price == null) item.price = 0
                        return (item.group_name.toLowerCase().includes(text.toLowerCase()) || item.spec.toLowerCase().includes(text.toLowerCase()) || item.memo.toLowerCase().includes(text.toLowerCase()) || String(item.price).includes(text.toLowerCase())) ;
                    }
                }).slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength))
                this.dataLangth = this.options.length
            }else{
                this.options = this.orioptions
                if(this.btntype == 1){
                    this.options = this.options.filter(item=> item.kind == this.kind)
                }else{
                    this.options = this.options.filter(item=> (item.subkind == this.btntype))
                }
                if(this.btntype == 1){
                    this.dataLangth = this.orioptions.filter(item=> (item.kind == this.kind)).length
                }else{
                    this.dataLangth = this.orioptions.filter(item=> (item.subkind == this.btntype)).length
                }
                this.options = this.options.slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength))
            }
            this.pageNumber = Math.ceil(Number(this.dataLangth)/Number(this.pageLength))
            this.pageNumberArr  = []
            for(let i=0;i<this.pageNumber;i++){
                this.pageNumberArr.push({page:i+1, disabled:false})
            }
        },
        renderPagination(){
            this.inputSearch();
        },
        switchPage(page){
            if(page == '...') return
            this.currentpage = page
            this.renderPagination()
        },
        selectPage(e){
            this.currentpage = e.target.value
            this.renderPagination()
        }
    }
}

const priceOptionSelect = ()=>{
    return {
        init(){
            this.renderPagination();
            this.options = this.options.slice(0, this.pageLength)
        },
        orioptions: options,
        options: options,
        options_arr: {
            1:'標',
            2:'選',
        },
        btntype:1,
        buttons:[],
        pageLength: 50,
        currentpage:1,
        dataLangth:options.length,
        search: '',
        pageNumber:1,
        startpage:0,
        endpage:this.startpage + this.pageLength,
        pageNumberArr:[],
        changeType(){
            this.options = this.orioptions;
            this.options = this.getOptions();
            this.inputSearch()
        },
        getOptions(start=0, end=this.pageLength){
            return this.options.slice(start, end);
        },
        inputSearch(e=null){
            let text = e!=null ? e.target.value : this.search;
            this.search = text.toLowerCase();
            if(text != ''){
                this.currentpage = 1;
                this.options = this.orioptions
                this.options = this.options.filter(item=>{
                    if(item.group_name == null) item.group_name = ''
                    if(item.spec == null) item.spec = ''
                    if(item.memo == null) item.memo = ''
                    if(item.price == null) item.price = 0
                    return (item.group_name.toLowerCase().includes(text.toLowerCase()) || item.spec.toLowerCase().includes(text.toLowerCase()) || item.memo.toLowerCase().includes(text.toLowerCase()) || String(item.price).includes(text.toLowerCase())) ;
                }).slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength))
                this.dataLangth = this.options.length
            }else{
                this.options = this.orioptions
                this.options = this.options.slice((Number(this.currentpage)-1)*Number(this.pageLength), (Number(this.currentpage)-1)*Number(this.pageLength) + Number(this.pageLength))
                this.dataLangth = this.orioptions.length
            }
            this.pageNumber = Math.ceil(Number(this.dataLangth)/Number(this.pageLength))
            this.pageNumberArr  = []
            for(let i=0;i<this.pageNumber;i++){
                this.pageNumberArr.push({page:i+1, disabled:false})
            }
        },
        renderPagination(){
            this.inputSearch();
        },
        switchPage(page){
            if(page == '...') return
            this.currentpage = page
            this.renderPagination()
        },
        selectPage(e){
            this.currentpage = e.target.value
            this.renderPagination()
        }
    }
}

const pricereviewOptionSelect = ()=>{
    return {
        init(){
            console.log(options);
            this.optionCategory = 0
            this.initButtons();
        },
        options: options,
        orioptions: options,
        optionalArr: {
            1:'標配',
            2:'選配',
            3:'加價',
        },
        searchtext:'',
        kind:0,
        subkind:0,
        buttons:[],
        initButtons(kind){
            if(kind == 'A'){
                this.buttons = [
                    {name: '車廂意匠', type: 'A1'}
                ]
            }else if(kind == 'B'){
                this.buttons = [
                    {name: '天井', type: 'B1'},
                    {name: '地板', type: 'B2'},
                    {name: '操縱盤', type: 'B3'},
                    {name: '扶手', type: 'B4'},
                    {name: '車廂門與層門(轎門/層門)', type: 'B5'},
                    {name: '轎壁(車廂側板)', type: 'B6'},
                    {name: '其他車廂內裝配件', type: 'B7'},
                ]
            }else if(kind == 'C'){
                this.buttons = [
                    {name: '框', type: 'C1'},
                    {name: '乘場指示器', type: 'C2'},
                    {name: '燈', type: 'C3'},
                    {name: '方式與門', type: 'C4'},
                ]
            }else if(kind == 'D'){
                this.buttons = [
                    {name: '功能與配置', type: 'D1'},
                    {name: 'OH與樓高', type: 'D2'},
                ]
            }else if(kind == 'E'){
                this.buttons = [
                    {name: '平台梯', type: 'E1'},
                ]
            }else if(kind == 'F'){
                this.buttons = [
                    {name: '汰改', type: 'F1'},
                ]
            }else if(kind == 0){
                this.buttons = []
            }
        },
        optionSubCategory:1,
        changeCategory(category, subcategory=0){
            this.kind = (category=='sub') ? this.kind : category;
           
            if(subcategory != 0) {
                this.subkind = subcategory
            }else{
                this.subkind = 0
            }
            
            if(category == 0){
                this.kind = 0;
                this.subkind = 0;
            }
            this.initButtons(category)
            this.reloadOptions();
        },
        reloadOptions(){
            if(this.kind == 0){
                this.options = this.orioptions
                return;
            }
            if(this.subkind == 0){
                this.options = this.orioptions.filter(option=> option.kind == this.kind)
                return;
            }
            this.options = this.orioptions.filter(option=> option.kind == this.kind && option.subkind == this.subkind)
        },
        searchOptions(e){
            this.reloadOptions();
            let val = e.target.value.toLowerCase()
            this.options = (this.options).filter(option=>{
                if(option.group_name == null) option.group_name = ''
                if(option.spec == null) option.spec = ''
                if(option.memo == null) option.memo = ''
                if(option.price == null) option.price = 0
                if(option.unit == null) option.unit = ''
                return option.group_name.includes(val) || option.memo.toLowerCase().includes(val) || option.spec.toLowerCase().includes(val) || option.unit.includes(val) || String(option.price).includes(val)
            })
        }
        
    }
}