<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"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
      :data="filterlist"
    >
      <el-table-column type="selection"
        width="50">
      </el-table-column>
        <el-table-column prop="id" width="100" align="center" label="乐团编号">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.id }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="学员姓名">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.name }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column prop="parentsName" align="center" label="家长姓名">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.parentsName }}</copy-text>
          </template>
        </el-table-column>
        <el-table-column prop="parentsPhone" align="center" label="家长电话">
          <template slot-scope="scope">
            <copy-text>{{ scope.row.parentsPhone }}</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 { getMusicGroupStu } from '@/views/resetTeaming/api'
export default {
  props: ['id', 'active', 'name'],
  data() {
    return {
      list: [],
      filterlist: [],
      passed: [],
      search: {
        keyword: '',
        hastimer: ''
      }
    }
  },
  watch: {
    active: {
      immediate: true,
      handler() {
        if (this.active.includes(this.id) && !this.list.length) {
          this.FetchDetail()
        }
      }
    }
  },
  methods: {
    filter() {
      const { keyword, hastimer } = this.search
      this.filterlist = this.list.filter(item => {
        const user = !keyword || (
          ('' + item.userId).indexOf(keyword) > -1 ||
          ('' + item.parentsName).indexOf(keyword) > -1 ||
          ('' + item.parentsPhone).indexOf(keyword) > -1 ||
          ('' + item.name).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 getMusicGroupStu({
          musicGroupId: this.id,
          studentStatus: 'NORMAL',
          paymentStatus: 1
        })
        this.list = res.data
        this.filterlist = res.data
      } catch (error) {}
    }
  }
}
</script>
