
<script>
import Checkbox from '../checkbox';
import { prefix, prefixMixins, getValue } from 'jdd-design/utils';
export default {
    name: `${prefix}-table-column`,
    mixins: [prefixMixins],
    props: {
        dataIndex: {
            type: String,
            default: null
        },
        name: {
            type: [String, Object],
            default: null
        },
        width: {
            type: Number,
            default: 0
        },
        align: {
            type: String,
            default: 'left'
        },
        fixed: {
            type: [String, Boolean],
            default: false
        },
        selection: {
            type: Boolean,
            default: false
        },
        showLabel: {
            type: Boolean,
            default: false
        }
    },
    inject: {
        jddTable: {
            default: null
        }
    },
    data() {
        return {
            columnWidth: 0,
            selAll: false
        };
    },
    computed: {
        cellClass() {
            let clsNames = [`${prefix}-table__cell`];
            this.align && clsNames.push(`${prefix}-table__cell--${this.align}`);
            return clsNames;
        }
    },
    mounted() {
        this.jddTable.addColumn(this);
        this.columnWidth = this.width;
    },
    beforeDestroy() {
        this.jddTable.removeColumn(this);
    },
    methods: {
        renderCell(data) {
            let children = getValue(data, this.dataIndex || '').value;
            if (this.$scopedSlots.default) {
                children = this.$scopedSlots.default(data);
            } else if (this.selection) {
                let label = '';
                let rowKey = this.jddTable.rowKey;
                if (this.showLabel) {
                    label = children;
                }
                children = (
                    <Checkbox
                        id={data[rowKey]}
                        value={data.$$checked}
                        label={label}
                        onInput={v => {
                            let oldV = data.$$checked;
                            if (oldV === v) {
                                return;
                            }
                            this.$set(data, '$$checked', v);
                            this.jddTable.selectChange();
                        }}
                    />
                );
            }
            return <div class={this.cellClass}>{children}</div>;
        },
        renderHeader() {
            let children = this.name;
            let parent = this.jddTable;
            let depIds = parent.dataList.map(m => m[parent.rowKey]);
            if (this.selection) {
                children = (
                    <Checkbox
                        value={this.selAll}
                        label=""
                        onInput={v => {
                            this.selAll = v;
                        }}
                        multiTypeDepends={depIds}
                    />
                );
            }
            return <div class={this.cellClass}>{children}</div>;
        }
    },
    render() {
        return <div>{this.$slots.default}</div>;
    }
};
</script>
