<template>
  <el-table ref="table" :data="teamData" style="width: 100%;margin-bottom: 15px;" :row-key="getRowKeys"
      :expand-row-keys="expands" @expand-change="expndChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="teamList" style="width:80%; margin:0 auto" border>
            <el-table-column prop="userName" label="用户名" width="180">
            </el-table-column>
            <el-table-column prop="realName" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="fileName" label="战队头像">
        <template slot-scope='scope'>
          <img v-if='scope.row.teamPicture' :src="`/service/mooc-file-server/file/browse/${scope.row.teamPicture}`"
            width="40" height="40" alt="">
          <img v-else src="@/assets/team.png" width="40" height="40" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="name" label="战队名称">
        <template slot-scope='scope'>
          <a style="cursor: pointer;" @click='detail(scope.row.id)'> {{scope.row.name}}</a>
        </template>
      </el-table-column>
      <el-table-column prop="slogan" label="战队口号">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="toogleExpand(scope.row)" type="text" size="small">队员列表</el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

<script>
 //实现只有一个展开折叠
      expndChange(row, expandedRows) {
        // console.log(ex)
        this.teamList = []
        if (expandedRows.length) {
          this.expands = []
          if (row) {
            this.expands.push(row.id)// 每次push进去的是每行的ID
            api.teamDataList({
              orgId: row.id
            }).then(data => {
              if (data) {
                this.teamList = data.resultData
              }
            })
          }
        } else {
          this.expands = []// 默认不展开
        }
      },
      //点击队员列表使其展开
      toogleExpand(row) {
       let $table = this.$refs.table;
       $table.toggleRowExpansion(row)
     },
      getRowKeys(row) {
        return row.id
      },
      //导入队员时关闭折叠框
      closeExpand(){
        this.expands = []
      },
</script>