import ProDataTable from 'mars-pro/packages/pro-data-table';
export default {
    name: 'ProSelectTableList',
    componentName: 'ProSelectTableList',
    components: {
        ProDataTable
    },
    inject: ['proselect'],
    props: {},
    computed: {
        labelKey() {
            return this.proselect.labelKey
        },
        filterDatas() {
            return this.proselect.filterDatas || []
        },
        datas() {
            return this.proselect.selectDatas || []
        },
        paginationProps() {
            const dataSource = this.proselect.realDataSource
            if (dataSource && dataSource.isDataSource == true) {
                return dataSource.pagination
            }
            return null
        },
        paginationOn() {
            const dataSource = this.proselect.realDataSource
            if (dataSource && dataSource.isDataSource == true) {
                return {
                    'size-change': dataSource['size-change'],
                    'current-change': dataSource['current-change'],
                }
            }
            return {}
        },
        columnsData() { 
            if (this.proselect.selectModel !== 'multiple') { 
                return [{
                    type: 'singleSelect',
                    width: 55,
                    prop: this.proselect.valueKey || 'value'
                }].concat(this.proselect.$attrs.columns || [])
            }
            return this.proselect.$attrs.columns
        }
    },
    methods: {
        getRowClassName({ row }) { 
            const values = this.proselect.value || []
            const valueKey = this.proselect.valueKey
            if (values.indexOf(row[valueKey]) > -1) { 
                return 'row-selection'
            }
            return ''
        },
        handSelectRows(v, isDataChange) { 
            const k = this.proselect.valueKey
            if (this.proselect.selectModel === 'multiple') { 
                let _v = (v || []).map(r => r[k])
                this.proselect.$emit('input', _v)
                this.proselect.$emit('change', _v)
            } else {
                if (isDataChange) { 
                    return
                }
                let _v = (v || {})[k]
                this.proselect.$emit('input', _v)
                //关闭下拉框
                this.proselect.$refs.elselect.handleClose()
                this.proselect.$emit('change', _v)
            }
        },
        renderSingleSlot({ row }) {
            const valueKey = this.proselect.valueKey
            if (row[valueKey] === this.proselect.value) { 
                return <i class="el-icon-check"></i>
            } else {
                return null
            }
        }
    },
    render() {
        const useAtrrs = this.proselect.$attrs
        const _datas = {
            props: {
                selectRows: this.proselect.value,
                selectModel: this.proselect.selectModel === 'multiple' ? 'multiple' : true,
                rowKey: this.proselect.valueKey,
                enableClickRowSelect: true,
                ...useAtrrs,
                //数据源
                dataSource: this.filterDatas,
                columns: this.columnsData
            },
            attrs: {
                size: this.proselect.selectSize,
                height: 250,
                layout: 'prev,pager,next,->, total',
                ...this.paginationProps,
                pagerCount: 5,
                loading: this.proselect.isLoading,
                ...(this.proselect.selectModel === 'multiple' ? {rowClassName: this.getRowClassName} : {}),
                ...useAtrrs
            },
            on: {
                'update:selectRows': this.handSelectRows,
                ...this.paginationOn,
                ...this.$listeners
            },
            scopedSlots: {
                ...this.proselect.$scopedSlots,
                [this.proselect.valueKey + 'Content']: this.renderSingleSlot
            },
            ref: 'eltable'
        }
        return (
            <ProDataTable {..._datas}> </ProDataTable>
        )
    }
}