<template>
  <el-row :gutter="20">
     <el-col :span="6" :xs="6"  >
        <el-date-picker
             v-model="value2"
             type="month"
             placeholder="选择月份数据统计">
           </el-date-picker>
      </el-col>
     <el-col :span="18" :xs="18"  style="text-align: right">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
         <el-form-item label="年级">
           <el-select v-model="formInline.gradeId" clearable placeholder="请选择">
               <el-option
                 v-for="item in grade"
                 :key="item.gradeId"
                 :label="item.gradeName"
                 :value="item.gradeId">
               </el-option>
             </el-select>
         </el-form-item>
         <el-form-item label="班级">
          <el-select v-model="formInline.classId" clearable placeholder="请选择">
              <el-option
                v-for="item in classOptions"
                :key="item.classId"
                :label="item.className"
                :value="item.classId">
              </el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="科目">
         <el-select v-model="formInline.subjectid" clearable placeholder="请选择">
             <el-option
               v-for="item in subjectOption"
               :key="item.subjectid"
               :label="item.subjectname"
               :value="item.subjectid">
             </el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="confirm">查询</el-button>
         </el-form-item>
       </el-form>
     </el-col>
     <el-col :span="24" :xs="24" style="text-align: center;" >
            <el-col :span="6" :xs="12"  style="margin-top:20px;margin-bottom:20px;position: relative;"    >
               <el-progress type="circle" :percentage="75" status="success" ></el-progress>
               <div style="position: absolute;top: 45px;width: 100%; left: 0;right: 0; font-size: 20px;">74人</div>
               <div style="margin-top:20px"  >学生登陆人数</div>
             </el-col>
             <el-col :span="6" :xs="12"  style="margin-top:20px;margin-bottom:20px;position: relative;"    >
                 <el-progress type="circle" :percentage="75" status="success" ></el-progress>
               <div style="position: absolute;top: 45px;width: 100%; left: 0;right: 0; font-size: 20px;">74人</div>
               <div style="margin-top:20px"  >学生看视频总时长</div>
              </el-col>
              <el-col :span="6" :xs="12"  style="margin-top:20px;margin-bottom:20px;position: relative;"    >
                 <el-progress type="circle" :percentage="75" status="success" ></el-progress>
               <div style="position: absolute;top: 45px;width: 100%; left: 0;right: 0; font-size: 20px;">74人</div>
               <div style="margin-top:20px"  >答题数</div>
              </el-col>
              <el-col :span="6" :xs="12"  style="margin-top:20px;margin-bottom:20px;position: relative;"    >
                 <el-progress type="circle" :percentage="75" status="success" ></el-progress>
               <div style="position: absolute;top: 45px;width: 100%; left: 0;right: 0; font-size: 20px;">74人</div>
               <div style="margin-top:20px"  >微课观看总时长</div>
              </el-col>
      </el-col>
   </el-row>
</template>

<script>

import { getUserProfile } from "@/api/system/user";
import {getSubjectsList} from "@/api/webApi/system";
export default {
  data() {
    return {
      value:'',
      value2:'',
      user:{},
      options:[],
      formInline:{},
      formInline:{
        gradeId:'',
        classId:''
      },
      grade:[],
      classOptions:[],
      subjectOption:[]
    };
  },
  watch:{
    'formInline.gradeId':function(value){
      this.formInline.classId = ''
      this.classOptions = []
      if(value){
          this.grade.forEach(item=>{
            if(value == item.gradeId){
              this.classOptions = item.clazz || []
            }
          })
      }
    }
  },
  created() {
       this.getUser();
       this.getSubjectsList()
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        if(response.data.busiSchool && response.data.busiSchool[0]){
          this.grade = response.data.busiSchool[0].grade || []
        }
      });
    },

    getSubjectsList(){
      getSubjectsList().then(response => {
        this.subjectOption = response.rows;
      });
    },
    confirm(){

    }
  }
};
</script>
<style :is="confirm()"scoped>
 /deep/ .el-progress__text{
    display:none
  }
</style>
