<template>
  <div>
    <div style="margin-top: 49px;">
      <el-table
        ref="moveTable"
        stripe
        border
        size="small"
        highlight-current-row
        :data="getPage"
        style="width: 100%"
        :height="350"
        @select-all="_selectAll"
        @selection-change="_selectRowChange"
        @row-click="_clickRow"
      >
        <el-table-column
          type="selection"
          width="55"
          fixed="left"
          align="center"
        />
        <el-table-column
          v-for="item in pageColumns"
          :key="item.id"
          show-overflow-tooltip
          :prop="item.key"
          :label="item.title"
          :min-width="item.width"
        >
          <template slot-scope="scope">
            <span v-if="item.sex">{{ scope.row.sex === 1 ? '女' : '男' }}</span>
            <span v-else>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
/**
 * 已选人员
 */
export default {
  props: ['getPage'],
  data() {
    return {
      pageColumns: [
        { title: '用户名', key: 'username', width: 150 },
        { title: '姓名', key: 'realname', width: 100 },
        { title: '性别', key: 'sex', sex: true }
      ]
    }
  },
  methods: {
    // 选中行的同时选中checkbox
    _clickRow(row) {
      this.$refs.moveTable.toggleRowSelection(row)
    },
    // 多选
    _selectRowChange(data) {
      this.$emit('on-result-change', 'click', data)
    },
    _selectAll: function(data) {
      this._selectRowChange(data)
    }
  }
}
</script>
