<template>
  <div class='t-container'>
    <!-- 头部展示 -->
    <!-- <div class="headWrap" style="padding:0;">
      
    </div> -->

    <!-- 搜索类型 -->
    <el-form :inline="true"
             class="searchForm"
             v-model.trim="searchForm">
      <!-- <el-form-item>
        <el-select v-model.trim="searchForm.status"
                   placeholder="合奏班">
          <el-option v-for='(item,index) in mixCourseList'
                     :key="index"
                     :value="item.id"
                     :label="item.name"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-input placeholder="老师姓名 编号 手机号"
                  v-model.trim="searchForm.search"></el-input>
      </el-form-item>
      <el-form-item>
        <div class="searchBtn"
             @click="search">搜索</div>
      </el-form-item>
      <el-form-item style="float: right;">
        <div class="right newBand"
             style="margin-bottom: 0;"
             @click="gotoRecord"> 上课记录 </div>
      </el-form-item>
    </el-form>

    <!-- 列表 -->
    <div class="tableWrap">
      <el-table :data='tableList'
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align='center'
                         prop="teacherId"
                         label="老师编号">
        </el-table-column>
        <el-table-column align='center'
                         prop="teacherName"
                         label="老师姓名">
        </el-table-column>
        <el-table-column align='center'
                         prop="teacherPhone"
                         label="联系电话">
        </el-table-column>
        <el-table-column align='center'
                         prop="jobNature"
                         label="工作类型">
          <template slot-scope="scope">
            <div>
              {{ scope.row.jobNature|jobNature}}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align='center'
                         prop="name"
                         label="合奏班">
        </el-table-column> -->
        <el-table-column align='center'
                         prop="classGroupName"
                         label="执教班级">
        </el-table-column>
        <el-table-column align='center'
                         prop="num"
                         label="出勤次数">
        </el-table-column>
        <!-- <el-table-column align='center'
                         label="操作">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         size="small">全职</el-button>
              <el-button type="text"
                         size="small">兼职</el-button>
              <el-button type="text"
                         size="small">全职试用</el-button>
              <el-button type="text"
                         size="small">兼职试用</el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination :total="rules.total"
                  :page.sync="rules.page"
                  :limit.sync="rules.limit"
                  :page-sizes="rules.page_size"
                  @pagination="getList" />
    </div>
  </div>
</template>
<script>
import pagination from '@/components/Pagination/index'
import { getTeamTeacherList, getAllClass } from '@/api/buildTeam'
export default {
  name: 'tteacherList',
  data () {
    return {
      searchForm: { // 搜索框
        status: '', // 工作类型
        teachingClass: '', // 合奏班
        attendance: '', // 出勤次数
        search: ''
      },
      searchLsit: [],
      tableList: [], //
      mixCourseList: [],
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 30, 40] // 选择限制显示条数
      },
    }
  },
  components: {
    pagination
  },
  mounted () {
    this.teamid = this.$route.query.id;
    this.getList();
    getAllClass({ musicGroupId: this.teamid }).then(res => {
      if (res.code == 200) {
        this.mixCourseList = res.data;
      }
    })
  },
  activated () {
    this.teamid = this.$route.query.id;
    this.getList();
    // getAllClass({ musicGroupId: this.teamid }).then(res => {
    //   if (res.code == 200) {
    //     this.mixCourseList = res.data;
    //   }
    // })
  },
  methods: {
    search () {
      this.rules.page = 1;
      this.getList();
    },
    getList () {
      // this.teamid
      // 'classGroupName': '',
      //  'jobNature': '',
      getTeamTeacherList({

        'musicGroupId': this.teamid,
        page: this.rules.page,
        rows: this.rules.limit,
        search: this.searchForm.search || null

      }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data.rows;
          this.rules.total = res.data.total;
        }
      })
    },
    gotoRecord () {
      this.$router.push({
        path: `/business/teamTeacherRecord`,
        query: {
          id: this.teamid,
          status: this.$route.query.status,
          name: this.$route.query.name
        }
      })
    }
  }
}
</script>
<style lang="scss" scope>
.t-container {
  .topFrom {
    margin: 20px 30px 0;
    width: 1000px;
  }
  // .searchForm {
  // }
}
</style>