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:'選配',
            3:'選配'
        },
        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:'選配',
            3:'選配'
        },
        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() {
            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) {
            // console.log(this.$refs.selectModalBody);
            this.initButtons(category)
            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.searchtext = ""
            this.reloadOptions();


        },
        reloadOptions() {
            if (this.kind == 0) {
                this.options = this.orioptions
                return;
            }
            if (this.subkind == 0) {
                this.options.forEach(option =>{
                    if (option.kind == this.kind) {
                        option.status = "Y"
                    }else{
                        option.status = "H"
                    }
                })
                return;
            }
            this.options.forEach(option => {
                if(option.kind == this.kind && option.subkind == this.subkind){
                    option.status = "Y"
                }else{
                    option.status = "H"
                }
            })
        },
        searchOptions(e) {
            e = null;
            this.options = this.orioptions
            this.reloadOptions();
            let val = (e== null) ? this.searchtext.toLowerCase() : e.target.value.toLowerCase()
            this.options.forEach(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 = ''
                if(option.group_name.includes(val) || option.memo.toLowerCase().includes(val) || option.spec.toLowerCase().includes(val) || option.unit.includes(val) || String(option.price).includes(val)){
                    option.status = "Y"
                }else{
                    option.status = "N"
                }
            })
        },
    }
}