<template>
  <div>
    <el-table
      :data="list"
      ref='studentTable'
      style
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      tooltip-effect="dark"
      
       @selection-change="handleSelectionChange"
    >
     <el-table-column v-if="isChiose"
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column
        prop="userId"
        align="center"
        width="120"
        label="学员编号"
      ></el-table-column>
      <el-table-column
        prop="nickName"
        align="center"
        width="120"
        label="学员姓名"
      ></el-table-column>
      <el-table-column
        prop="name"
        align="center"
        width="120"
        label="性别"
      >
      <template slot-scope="scope">
        <div>
          {{scope.row.gender| sex}}
        </div>
      </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        align="center"
        width="120"
        label="联系电话"
      ></el-table-column>
      <el-table-column
        prop="subjectNames"
        align="center"       
        label="专业"
      ></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer" v-if="showOk">
      <el-button type="primary" @click="$listeners.close(selectList)">确 定</el-button>
    </div>
    <div style="clear: both;" v-if="showOk"></div>
  </div>
</template>
<script>
export default {
  props: ['list','isChiose','chioseList','showOk'],
  data(){
    return{
      selectList:this.chioseList
    }
  },mounted(){
    if(this.chioseList){
          let idList = this.chioseList.map((item,index)=>{
      return item.userId
    })
    this.list.forEach((item,index)=>{
      if(idList.indexOf(item.userId)!= -1){
        this.$refs.studentTable.toggleRowSelection(item,true);
      }
    })
    }
  },
  methods:{
    handleSelectionChange(val){
      this.selectList = val
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.dialog-footer{
  margin-top: 10px;
}
  .dialog-footer {
  float: right;
 
}
</style>
