<template>
    <su-table
        ref="multipleTable"
        @row-click="rowClick"
        :highlight-current-row="true"
        :current-row-key="currentRowKey"
        :data="tableData"
        v-bind="$attrs"
        v-on="$listeners"
    >
        <el-table-column width="55">
            <template slot-scope="scope">
                <div>
                    <el-radio v-model="value"
                              :label="scope.row[rowKey]"
                              :disabled="scope.row._radioDisabled"
                              @change="changeValue(scope.row)"
                              @click="e=>{e.stopPropagation();}">&nbsp;
                    </el-radio>
                </div>
            </template>
        </el-table-column>
        <slot></slot>
    </su-table>
</template>

<script>
import seTable from '../su-table/index.vue';

export default {
    components: {
        seTable
    },
    data() {
        return {
            value: null,
            checkData: null,
            tableData: [],
        };
    },
    name: "seTableRadio",
    props: {
        data: {
            type: Array,
            default() {
                return [];
            },
        },
        /* 行点击是否能选中 */
        rowSelection: {
            type: Boolean,
            default: true,
        },
        /* 禁止选择的数据项id数组 */
        disabledIds: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    watch: {
        data: {
            immediate: true,
            handler(newV, oldV) {
                if (!newV) return;
                this.initData();
            }
        },
    },
    computed: {
        rowKey() {
            return this.$attrs['row-key']
        },
        currentRowKey() {
            if (this.checkData) {
                return this.checkData[this.rowKey];
            }
        }
    },
    methods: {
        initData() {
            let vm = this;
            let tableData = [];
            let disabledIds_ = [];
            vm.disabledIds.forEach(function (id) {
                disabledIds_.push(id + "");
            })
            this.data.forEach(function (item) {
                let id = item[vm.rowKey] + "";
                tableData.push({
                    ...item,
                    _radioDisabled: disabledIds_.indexOf(id) > -1
                })
            })
            this.tableData = tableData;
        },
        rowClick(row, column, event) {
            if (this.rowSelection) {
                this.changeValue(row);
            }
            this.$emit("row-click", row, column, event);
        },
        setSelectionData(data) {
            this.value = (data || {})[this.rowKey];
            this.checkData = data;
        },
        getSelectionData() {
            return this.checkData;
        },
        clearSelection(){
            this.setSelectionData(null);
        },
        changeValue(row) {
            if (this.checkData == row || row._radioDisabled) {
                return;
            }
            this.checkData = row;
            this.value = row[this.rowKey];
            this.$emit("selection-change", this.checkData)
        }
    }
};
</script>

<style scoped>
</style>
