<template>
  <div>
    <el-form ref="search" :model="search" inline @submit.stop.native="submit" @reset.stop.native="reset">
      <el-form-item prop="keyword">
        <el-input v-model.trim="search.keyword" clearable placeholder="学生姓名(手机、编号)"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">搜索</el-button>
        <el-button type="danger" native-type="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      style="width: 100%"
      max-height="300px"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      :data="filterlist"
    >
      <el-table-column prop="realName" align="center" label="学员姓名">
        <template slot-scope="scope">
          <copy-text>{{ scope.row.realName }}</copy-text>
        </template>
      </el-table-column>
      <el-table-column prop="phone" align="center" label="手机号码">
        <template slot-scope="scope">
          <copy-text>{{ scope.row.phone }}</copy-text>
        </template>
      </el-table-column>
      <el-table-column prop="subjectName" align="center" label="声部">
        <template slot-scope="scope">
          <copy-text>{{ scope.row.subjectName }}</copy-text>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getTeamStudentList } from '@/api/buildTeam'
export default {
  data() {
    return {
      id: this.$route.query.id,
      list: [],
      filterlist: [],
      passed: [],
      search: {
        keyword: '',
        hastimer: ''
      }
    }
  },
  mounted() {
    this.FetchDetail()
  },
  methods: {
    filter() {
      const { keyword, hastimer } = this.search
      this.filterlist = this.list.filter(item => {
        const user = !keyword || (
          ('' + item.userId).indexOf(keyword) > -1 ||
          ('' + item.phone).indexOf(keyword) > -1 ||
          ('' + item.realName).indexOf(keyword) > -1
        )
        return user
      })
    },
    submit(evt) {
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      this.filter()
    },
    reset(evt) {
      evt.stopPropagation()
      evt.stopImmediatePropagation()
      evt.preventDefault()
      this.search = {
        keyword: '',
        hastimer: ''
      }
      this.filter()
    },
    handleSelectionChange(arr) {
      const passed = [];
      for (let i in arr) {
        passed.push(arr[i].id);
      }
      this.passed = passed;
      this.$emit('selected', this.passed, this.id)
    },
    async FetchDetail() {
      try {
        const res = await getTeamStudentList({
          musicGroupId: this.id,
        })
        this.list = res.data.rows
        this.filterlist = res.data.rows
      } catch (error) {}
    }
  }
}
</script>
