 <template>
  <div class="component-table">
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      :data="tableData"
      style="width: 100%"
      ref="table"
      :class="{ radio }"
      @selection-change="changeFun"
    >
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "sh-table",
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    radio: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkedList: [],
    };
  },
  methods: {
    changeFun(val) {
      let selectRow = null;
      if (this.radio) {
        if (val.length == 1) {
          this.$emit("radioSelect", val[0]);
        } else if (val.length > 1) {
          let tempArr = [...val];
          selectRow = null;
          selectRow = { ...tempArr.pop() };
          let tempBrr = val.slice(0, val.length - 1);
          tempBrr.forEach((row) => {
            this.$refs.table.toggleRowSelection(row, false);
          });
          this.$emit("radioSelect", selectRow);
        } else if (val.length == 0) {
          this.$emit("radioSelect", "");
        }
      }else{
        this.$emit('select',val,val[val.length-1])
      }
      this.$emit("selection-change");
    },
    toggleRowSelection(row, selected) {
      this.$refs.table.toggleRowSelection(row, selected);
    },
  },
};
</script>