<template>
  <div>
    <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"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="老师">
          <el-select v-model="teacher_id" placeholder="请选择">
            <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 size="" @click="getClassList">
            搜索
          </el-button>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button @click="onAdd">+添加班级</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>
      <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="200"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="editClass(scope.row)">编辑</el-button>
            <el-button @click="delClass(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <class-dialog :dialogObj="dialogObj" @reflash="getClassList"></class-dialog>

    <!--<page :total="total" v-model="nowPage"/>-->
  </div>
</template>
<script>
  import {getGoodsListApi,getPeriodsApi,getClassListApi,getPeriodsTeacherApi,delClassApi} from "../../service/api";
  import classDialog from './dialog'
  export default {
    data(){
      return {
        periodsId:null,
        goodsList:[],
        teacher_id:'',
        classList:[],
        title:'',
        teacherList:[],
        dialogObj:{
          show:false,
          title:'添加班级',
          periodsId:'',
          type:0,
          id:0
        },
      }
    },
    components:{
      classDialog
    },
    mounted(){
      this.initPage()
    },
    methods:{
      initPage(){
        getGoodsListApi().then(res=>{
          res.list.forEach(i=>{
            i.children = [];
          });
          this.goodsList = res.list;
          if(!this.periods) {
            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]
            })
          }
          if(this.periods){
            getClassListApi()
          }
        });
      },
      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]});
          getPeriodsTeacherApi(this.periods.id).then(res=>{
            this.teacherList = res
          })
        }
      },
      getClassList(){
        getClassListApi(this.periods.id,{teacher_id:this.teacher_id}).then(res=>{
          this.title = res.periods;
          this.classList = res.list;
        })
      },
      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(){
        if(this.periods){
          this.dialogObj = {
            show:true,
            title:'添加班级',
            periodsId:this.periods.id,
            type:0,
          }
        }else{
          this.$message.error('请先选择期数');
        }
      },
      editClass(data){
        this.dialogObj = {
          show:true,
          title:'编辑班级',
          periodsId:this.periods.id,
          type:1,
          id:data.id
        }
      }
    }
  }

</script>

<style scoped lang="less">
  .form-block{
    padding: 10px;
  }
</style>
