<template>
  <div>
    <div class="tabTopWrap">
      <el-table :data="musicGroupInfo"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}">
        <el-table-column align="center"
                         prop="musicGroupId"
                         label="乐团编号"></el-table-column>
        <el-table-column align="center"
                         prop="joinMusicGroupDate"
                         label="入团时间">
          <template slot-scope="scope">{{ scope.row.joinMusicGroupDate | dateForMinFormat }}</template>
        </el-table-column>
        <el-table-column align="center"
                         prop="musicGroupName"
                         label="乐团名称"></el-table-column>
        <el-table-column align="center"
                         label="乐团状态">
          <template slot-scope="scope">{{ scope.row.musicGroupStatus | musicGroupType }}</template>
        </el-table-column>
        <el-table-column align="center"
                         prop="subjectName"
                         label="专业"></el-table-column>
        <el-table-column align="center"
                         prop
                         label="乐器来源">
          <template slot-scope="scope">{{ scope.row.kitPurchaseMethod | instrumentType }}</template>
        </el-table-column>
        <el-table-column align="center"
                         label="学员状态">
          <template slot-scope="scope">
            {{ scope.row.userMusicGroupStatus | musicGroupStudentType }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="退团时间"
                         prop="quitMusicGroupDate">
          <template slot-scope="scope">
            <span v-if="scope.row.userMusicGroupStatus == 'QUIT'">
              {{ scope.row.quitMusicGroupDate | formatTimer }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="所选乐器">
          <template slot-scope="scope">
            <span v-for="good in scope.row.userGoodsDtos"
                  :key="good.goodsId">{{ good.goodsName | joinArray(',') }}</span>
            {{ scope.row.kitPurchaseMethod == 'LEASE' ? '(租赁：' + scope.row.depositFee + ')' : '' }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="操作">
          <template slot-scope="scope">
            <el-button @click="onCourse(scope.row)"
                       v-permission="'studentManage/findStudentCourses'"
                       type="text">排课详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      :visible.sync="coursesShow"
      title="排课详情"
      width="1000px"
    >
    <template>
      <!-- 搜索类型 -->
      <el-form v-if="coursesShow"
              :inline="true"
              class="searchForm"
              v-model.trim="searchForm">
        <el-form-item>
          <el-select v-model.trim="searchForm.classGroupType"
                    clearable
                    filterable
                    placeholder="课程类型">
            <el-option v-for="(item, index) in courseArray"
                      :key="index"
                      :label="item.label"
                      :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model.trim="searchForm.courseStatus"
                    clearable
                    filterable
                    placeholder="课程状态">
            <el-option v-for="(item, index) in courseStatus"
                      :key="index"
                      :label="item.label"
                      :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="班级名称"
                    @keyup.enter.native="search"
                    v-model.trim="searchForm.classGroupName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="老师姓名"
                    @keyup.enter.native="search"
                    v-model.trim="searchForm.teacherName"></el-input>
        </el-form-item>
        <el-form-item>
          <div @click="search"
              class="searchBtn">搜索</div>
        </el-form-item>
      </el-form>
      <!-- 查询列表 -->
      <!-- <div v-if="coursesShow" class="searchWrap">
        <p>查询条件:</p>
        <div class="searchItem"
            @click="closeSearch(item)"
            v-for="(item,index) in searchLsit" :key="index">
          {{ item.key }}
          <i class="el-icon-close"></i>
        </div>
      </div>-->
        <div v-if="coursesShow"
            class="tableWrap">
          <el-table :data="coursesInfo"
                    :header-cell-style="{background:'#EDEEF0',color:'#444'}">
            <el-table-column align="center"
                            prop="classGroupId"
                            label="编号"></el-table-column>
            <el-table-column align="center"
                            prop="courseDate"
                            label="时间">
              <template slot-scope="scope">{{ scope.row.courseDate | dateForMinFormat }}</template>
            </el-table-column>
            <el-table-column align="center"
                            prop="classGroupName"
                            label="班级名称"></el-table-column>
            <el-table-column align="center"
                            label="课程类型">
              <template slot-scope="scope">{{ scope.row.classGroupType | coursesType }}</template>
            </el-table-column>
            <el-table-column align="center"
                            label="课程状态">
              <template slot-scope="scope">{{ scope.row.courseStatus | coursesStatus }}</template>
            </el-table-column>
            <el-table-column align="center"
                            prop="teacherName"
                            label="老师姓名"></el-table-column>
          </el-table>
          <pagination :total="pageInfo.total"
                      :page.sync="pageInfo.page"
                      :limit.sync="pageInfo.limit"
                      :page-sizes="pageInfo.page_size"
                      @pagination="getStudentCourses" />
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import {musicCourseType} from "@/utils/searchArray"

import {
  findStudentMusicGroups,
  findStudentCourses
} from "@/api/studentManager";
export default {
  name: "teamAndcourse",
  components: { pagination },
  data () {
    return {
      userId: null,
      musicGroupInfo: [], // 乐团列表
      coursesInfo: [], // 排课列表
      coursesShow: false, // 排课列表是否显示
      searchLsit: [],
      searchForm: {
        studentId: null,
        musicGroupId: null,
        classGroupType: null,
        courseStatus: null,
        classGroupName: null,
        teacherName: null
      },
      courseArray: musicCourseType,
      courseStatus: [
        { value: "NOT_START", label: "未开始" },
        { value: "UNDERWAY", label: "进行中" },
        { value: "OVER", label: "已结束" }
      ],
      pageInfo: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      }
    };
  },
  mounted () {
    this.userId = this.$route.query.userId;
    this.searchForm.studentId = this.$route.query.userId;
    this.__init();
  },
  activated () {
    this.userId = this.$route.query.userId;
    this.searchForm.studentId = this.$route.query.userId;
    this.__init();
  },
  methods: {
    __init () {
      findStudentMusicGroups({ userId: this.userId }).then(res => {
        if (res.code == 200) {
          this.musicGroupInfo = res.data;
        }
      });
    },
    onCourse (row) {
      this.coursesShow = true;
      this.searchForm = {
        studentId: this.$route.query.userId,
        musicGroupId: row.musicGroupId,
        classGroupType: null,
        courseStatus: null,
        classGroupName: null,
        teacherName: null
      };
      this.getStudentCourses();
    },
    search () {
      this.pageInfo.page = 1;
      this.getStudentCourses();
    },
    getStudentCourses () {
      let params = this.searchForm;
      params.rows = this.pageInfo.limit;
      params.page = this.pageInfo.page;
      findStudentCourses(params).then(res => {
        if (res.code == 200) {
          this.coursesInfo = res.data.rows;
          this.pageInfo.total = res.data.total;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.tabTopWrap {
  margin-bottom: 30px;
}
</style>
