import {YvEventDispatch} from "./YvanEvent";

export default class CtlGridCellCheckbox {

    checkedToggle(vue: any, childSpan: any, id: any, data: any) {
        return function () {
            // if (childSpan.classList.contains('checked')) {
            //     const index = vue.checkedIds.indexOf(id)
            //     if (index >= 0) {
            //         vue.checkedIds.splice(index, 1)
            //     }
            //     childSpan.classList.remove('checked')

            // } else {
            //     vue.checkedIds.push(id)
            //     childSpan.classList.add('checked')
            // }
            if (childSpan.classList.contains('checked')) {
                childSpan.classList.remove('checked')
            }
            else {
                childSpan.classList.add('checked')
            }
            data.__grid_row_checked = !data.__grid_row_checked;
            if (vue.useCrossPageCheck) {
                if (data.__grid_row_checked) {
                    let has = false;
                    for (let index = 0; index < vue.allCheckedData.length; index++) {
                        const item = vue.allCheckedData[index];
                        if (vue._getIdByRow(data) === vue._getIdByRow(item)) {
                            has = true
                            break
                        }
                    }
                    if (!has) {
                        vue.allCheckedData.push(data);
                    }
                }
                else {
                    _.remove(vue.allCheckedData, item => {
                        return vue._getIdByRow(data) === vue._getIdByRow(item)
                    })
                }
            }
            // 观测，是否显示"全选"框的函数
            if (vue.allCheckedBoxStateChanged) {
                vue.allCheckedBoxStateChanged();
            }
        }
    }

    innerRefresh(this: any, gridOptions: any) {
        const vue = gridOptions.api.vue
        const data = gridOptions.data
        const id = vue._getIdByRow(data)
        const childSpan = this.$el.querySelectorAll('.yvan-checkbox-switch')[0]
        if (!childSpan) {
            return
        }

        if (gridOptions.isCheckedIds) {
            //用来做勾选数据行用 checkedIds
            // if (vue.checkedIds.indexOf(id) >= 0) {
            //     childSpan.classList.add('checked')
            // } else {
            //     childSpan.classList.remove('checked')
            // }
            if (data && data.__grid_row_checked) {
                childSpan.classList.add('checked')
            } else {
                childSpan.classList.remove('checked')
            }

            // 观测，是否显示"全选"框的函数
            if (vue.allCheckedBoxStateChanged) {
                vue.allCheckedBoxStateChanged();
            }

        } else {
            //用来做数据展示用
            childSpan.classList.add('disabled')
            if (typeof gridOptions.on === 'string') {
                //on 是个字符串
                if (gridOptions.on === '' + gridOptions.value) {
                    childSpan.classList.add('checked')
                }

            } else if (typeof gridOptions.on === 'function') {
                //on 是个函数
                if (gridOptions.on.call(vue, gridOptions.value, data)) {
                    childSpan.classList.add('checked')
                }
            }
        }
    }

    init(this: any, gridOptions: any) {
        this.$el = document.createElement('div')
        if (gridOptions.node.rowPinned) {
            //这是在添加行或结尾行的数据，不用任何展示
            return
        }

        this.$el.classList.add('yvan-checkbox')
        this.$el.innerHTML =
            '<span class="yvan-checkbox-switch"><span class="yvan-checkbox-status"></span></span>'

        this.innerRefresh(gridOptions)

        const vue = gridOptions.api.vue;
        const childSpan = this.$el.querySelectorAll('.yvan-checkbox-switch')[0];
        const data = gridOptions.data
        const id = vue._getIdByRow(data)
        if (gridOptions.checkboxDisabled?.type && gridOptions.checkboxDisabled?.bind) {
            const module = vue._webix.$scope
            const diabledValue =  YvEventDispatch(gridOptions.checkboxDisabled, vue, data, module)
            if (!!diabledValue) {
                childSpan.classList.add('disabled')
                return;
            }
        }
        this.$el.addEventListener('click', this.checkedToggle(vue, childSpan, id, data))
    }

    getGui(this: any) {
        return this.$el
    }

    destroy() {
    }

    refresh(gridOptions: any) {
        this.innerRefresh(gridOptions)
    }
}