<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="请选择" @change="getClassList" 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="title && title.title " class="intro">
      <el-form label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="期数名称">{{title.title}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="可看课包数">{{title.watch_num }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已看课包数">{{title.has_watch_num }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开始时间">{{title.start_at}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="老师数量">{{countObj.count_teacher_num}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计学员总数">{{countObj.count_max_join_num}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学员总数">{{countObj.count_join_num}}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="结束时间">{{title.over_at}}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-if="!title || !title.title">
      <el-form label-width="300px" inline>
        <el-form-item label="暂无期数信息，请先选择期数"></el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
        @expand-change="changeRow"
        :data="classList"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table
              :data="[scope.row]"
              style="width: 100%">
              <el-table-column
                label="到课率">
                <template slot-scope="scope2">
                  <span>{{ scope2.row.arrive_course_rate  | percent}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="看课率">
                <template slot-scope="scope2">
                  <span>{{ scope2.row.watch_course_rate  | percent}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="完课率">
                <template slot-scope="scope2">
                  <span>{{ scope2.row.over_course_rate  | percent}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="作业率">
                <template slot-scope="scope2">
                  <span>{{ scope2.row.work_rate  | percent}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="全勤作业率">
                <template slot-scope="scope2">
                  <span>{{ scope2.row.over_work_rate  | percent}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="打卡率">
                <template slot-scope="scope2">
                  <span>{{ scope2.row.clock_rate  | percent}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="全勤打卡率">
                <template slot-scope="scope2">
                  <span>{{ scope2.row.over_clock_rate  | percent}}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="转化率">
                <template slot-scope="scope2">
                  <span>{{ scope2.row.transform_rate  | percent}}</span>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
         <el-table-column
          label="班级名称">
          <template slot-scope="scope">
            {{scope.row.class_name}}
          </template>
        </el-table-column>
        <el-table-column
          prop="teacher_name"
          label="班主任">
        </el-table-column>
        <el-table-column
          label="班级类型">
          <template slot-scope="scope">
            {{scope.row.type | classTypeFilter}}
          </template>
        </el-table-column>
        
        <el-table-column
          prop="max_join_num"
          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.deletePermission && !$store.state.readonly" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <class-dialog :dialogObj="dialogObj" @reflash="onReflash"></class-dialog>
    <user-list :userObj="userObj" @reflash="getClassList"/>
  </div>
</template>
<script>
  import {getGoodsListApi,getPeriodsApi,getClassListApi,getPeriodsTeacherApi,delClassApi,getClassStatisticsApi,getDefaultPeriodsApi} from "../../service/api";
  import classDialog from './dialog'
  import {GOODSTYPE} from '../../util/wordbook';
  import UserList from './userList'
  import page from '../framework/page'
  export default {
    data(){
      return {
        nowPage: 1,
        total: 0,
        limit: 10,
        periodsId:null,
        goods_id:null,
        goodsList:[],
        teacher_id:'',
        classList:[],
        title:'',
        countObj: '',
        teacherList:[],
        userObj:{
          classId:'',
          title:'',
          show:false,
          goods_id:null
        },
        dialogObj:{
          show:false,
          title:'添加班级',
          periodsId:'',
          type:0,
          id:0
        },
        selectedGoods: []
      }
    },
    components:{
      UserList,
      classDialog,
      page
    },
    filters: {
      classTypeFilter(val){
        let _val = parseInt(val);
        if (_val === 1) {
            return '带班班级'
        } else if (_val === 2) {
          return '观摩班级'
        } else {
            return ''
        }
      },
      percent(val){
        return (val * 100).toFixed(2)+'%'
      }
    },
    mounted(){
      this.initPage();
      
    },
    methods:{
      changeRow(data,b){
        if(b.indexOf(data)>-1){
          getClassStatisticsApi(data.periods_id,data.id).then(res=>{
            data.arrive_course_rate = res.arrive_course_rate;
            data.watch_course_rate = res.watch_course_rate;
            data.over_course_rate = res.over_course_rate;
            data.work_rate = res.work_rate;
            data.over_work_rate = res.over_work_rate;
            data.clock_rate = res.clock_rate;
            data.over_clock_rate = res.over_clock_rate;
            data.transform_rate = res.transform_rate;
          })
        }
      },
      initQuery(){
        let _query = this.$route.query;
        if (_query && _query.goods_id && _query.periods_id) {
          this.goods_id = _query.goods_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 {
          getDefaultPeriodsApi().then(res=>{
            if(res){
              this.goods_id = res.goods_id;
              this.selectedGoods = [parseInt(res.goods_id),parseInt(res.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()
              });
            }
        })
        }
      },
      initPage(){
        let json = {
          page: 1,
          limit: 100,
          goods_type:'1,2'
        };
        getGoodsListApi(json).then(res=>{
          res.list.forEach(i=>{
            i.name = '[' + GOODSTYPE[i.goods_type] + ']' + '[' +i.current_price / 100 + '元]' + i.name
            i.children = [];
          });
          this.goodsList = res.list;
          this.initQuery();
        });
      },
      showUser(data){
        this.userObj={
          classId:data.id,
          periods_id:data.periods_id,
          show:true,
          goods_id:this.goods_id,
          title:`${data.teacher_name}班级用户列表`,
          teacherId: data.teacher_id,
          class_name:data.class_name
        }
      },
      getTeacher(){
        if (!this.periods) return;
        getPeriodsTeacherApi(this.periods.id).then(res=>{
                let obj = {};        //班级老师去重
                res = res.reduce(function(item, next) {
                  obj[next.teacher_id] ? '' : obj[next.teacher_id] = true && item.push(next);
                  return item;
                }, []);
          this.teacherList = res
        })
      },
      changePeriods(data){
        if(data.length>1){
          this.goods_id = data[0];
          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();
          this.getClassList();
        }
      },
      onPageChange(val){
        this.nowPage = val;
        this.getClassList();
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getClassList();
      },
      onReflash(periods){
        this.periods = periods;
        this.selectedGoods = [periods.goods_id, periods.id];
        this.getClassList();
      },
      getClassList(){
        if (!this.periods) return;
        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=>{
          res.list.forEach(data=>{
            data.arrive_course_rate = 0;
            data.watch_course_rate = 0;
            data.over_course_rate = 0;
            data.work_rate = 0;
            data.over_work_rate = 0;
            data.clock_rate = 0;
            data.over_clock_rate = 0;
            data.transform_rate = 0;
          });
          this.title = res.periods;
          this.countObj = res.count ? res.count : '';
          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:'添加班级',
          type:0,
          teacherList: this.teacherList ? this.teacherList: []
        };
        if (this.periods) {
          this.dialogObj.periods = this.periods;
          this.dialogObj.periodsId = this.periods.id
        }
      },
      editClass(data){
        this.dialogObj = {
          show:true,
          title:'编辑班级',
          type:1,
          id:data.id,
          teacherList: this.teacherList ? this.teacherList: []
        };
        if (this.periods) {
          this.dialogObj.periods = this.periods;
          this.dialogObj.periodsId = this.periods.id
        }
      }
    }
  }

</script>

<style scoped lang="less">
  .class{
    padding: 20px 0;
  }
  .intro .el-form-item{
    margin-bottom: 0;
  }
</style>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>