<template>
  <div class="class">
    <div class="form-block">
      <el-form label-width="90px" inline>
        <el-form-item label="期数">
          <el-cascader
            :options="goodsList"
            :props="{value:'id',label:'name'}"
            @active-item-change="handleItemChange"
            @change="changePeriods"
            v-model="selectedGoods"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="老师">
          <el-select v-model="teacher_id" placeholder="请选择" clearable>
            <el-option
              v-for="(data,index) in teacherList"
              :key="index"
              :label="data.teacher_name"
              :value="data.teacher_id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="getClassList">
            搜索
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button @click="onAdd" type="success" v-if="!$store.state.readonly">+添加班级</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="classList && classList.length > 0">
      <el-form label-width="90px" inline>
        <el-form-item label="期数">{{title.title}}</el-form-item>
        <el-form-item label="开始时间">{{title.start_at}}</el-form-item>
        <el-form-item label="结束时间">{{title.over_at}}</el-form-item>
        <el-form-item label="可看课包数">{{title.watch_num }}</el-form-item>
        <el-form-item label="已看课包数">{{title.has_watch_num }}</el-form-item>
      </el-form>
    </div>
    <div v-if="!classList || classList.length === 0">
      <el-form label-width="300px" inline>
        <el-form-item label="暂无期数信息，请先选择期数"></el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        :data="classList"
        style="width: 100%">
        <el-table-column
          prop="teacher_name"
          label="班主任">
        </el-table-column>
        <el-table-column
          prop="max_join_num"
          label="最大人数">
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建于">
        </el-table-column>
        <el-table-column
          prop="join_num"
          label="现有人数">
        </el-table-column>
        <el-table-column
          width="250"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="showUser(scope.row)" size="mini" type="primary">班级成员</el-button>
            <el-button @click="editClass(scope.row)" size="mini" v-if="!$store.state.readonly" type="warning">编辑</el-button>
            <el-button @click="delClass(scope.row)" size="mini" v-if="!$store.state.readonly" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange"/>
    <class-dialog :dialogObj="dialogObj" @reflash="getClassList"></class-dialog>
    <user-list :userObj="userObj" @reflash="getClassList"/>
  </div>
</template>
<script>
  import {getGoodsListApi,getPeriodsApi,getClassListApi,getPeriodsTeacherApi,delClassApi} from "../../service/api";
  import classDialog from './dialog'
  import UserList from './userList'
  import page from '../framework/page'
  export default {
    data(){
      return {
        nowPage: 1,
        total: 0,
        limit: 10,
        periodsId:null,
        goodsList:[],
        teacher_id:'',
        classList:[],
        title:'',
        teacherList:[],
        userObj:{
          classId:'',
          title:'',
          show:false,
        },
        dialogObj:{
          show:false,
          title:'添加班级',
          periodsId:'',
          type:0,
          id:0
        },
        selectedGoods: []
      }
    },
    components:{
      UserList,
      classDialog,
      page
    },
    mounted(){
      this.initPage();

    },
    methods:{
      initQuery(){
        let _query = this.$route.query;
        if (_query && _query.goods_id && _query.periods_id) {
          this.selectedGoods = [parseInt(_query.goods_id),parseInt(_query.periods_id)];
          getPeriodsApi({goods_id:this.selectedGoods[0]}).then(res=>{
            res.list.forEach(i=>{i.name = i.title});
            this.goodsList.find(i=>{return i.id === this.selectedGoods[0]}).children = res.list
            let nowGoods = this.goodsList.find(i=>{return i.id === this.selectedGoods[0]});
            this.periods = nowGoods.children.find(i=>{return i.id === this.selectedGoods[1]});
            this.teacher_id = '';
            this.getClassList()
          })
        } else {
          getPeriodsApi({goods_id:this.goodsList[0].id}).then(res=>{
            res.list.forEach(i=>{i.name = i.title});
            this.goodsList[0].children = res.list;
            this.periods = res.list[0]
          })
        }
      },
      initPage(){
        getGoodsListApi().then(res=>{
          res.list.forEach(i=>{
            i.children = [];
          });
          this.goodsList = res.list;
          this.initQuery();
        });
      },
      showUser(data){
        this.userObj={
          classId:data.id,
          show:true,
          title:`${data.teacher_name}班级用户列表`
        }
      },
      getTeacher(){
        getPeriodsTeacherApi(this.periods.id).then(res=>{
          this.teacherList = res
        })
      },
      changePeriods(data){
        if(data.length>1){
          let nowGoods = this.goodsList.find(i=>{return i.id === data[0]});
          this.periods = nowGoods.children.find(i=>{return i.id === data[1]});
          this.teacher_id = '';
          this.getTeacher()
        }
      },
      onPageChange(val){
        this.nowPage = val;
        this.getClassList();
      },
      getClassList(){
        this.getTeacher();
        let json = {
            limit: this.limit,
            page: this.nowPage
        }
        if (this.teacher_id) {
            json.teacher_id = this.teacher_id
        }
        getClassListApi(this.periods.id,json).then(res=>{
          this.title = res.periods;
          this.classList = res.list;
          this.total = res.total;
        })
      },
      handleItemChange(val){
        getPeriodsApi({goods_id:val[0]}).then(res=>{
          res.list.forEach(i=>{i.name = i.title});
          this.goodsList.find(i=>{return i.id === val[0]}).children = res.list
        })
      },
      delClass(data){
        this.$confirm('此操作将删除该班级?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delClassApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
          this.getClassList()
        });
      },
      onAdd(){
        this.dialogObj = {
          show:true,
          title:'添加班级',
          periodsId:this.periods ? this.periods.id : '',
          type:0,
        }
      },
      editClass(data){
        this.dialogObj = {
          show:true,
          title:'编辑班级',
          periodsId:this.periods.id,
          type:1,
          id:data.id
        }
      }
    }
  }

</script>

<style scoped lang="less">
  .class{
    padding: 20px 0;
  }
</style>