<template>
  <el-row :gutter="20" style="margin:10px">
    <el-card v-if="totalList.login">
      <div slot="header" class="clearfix">
        <span style="color:#47C6A2">{{title}} </span>
      </div>
      <el-col :span="6" :xs="6"  >
        <span>{{user.busiSchool && user.busiSchool[0].schoolName}}</span>
      </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>
            <el-button type="primary" @click="confirm">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" :xs="24"  >
        <el-col :span="6" :xs="6"  style="margin-bottom:20px"  >
          <el-card style="padding:30px;text-align: center;" >
            <div>
              <img src="@/assets/images/icon_login.png" alt="">
              <div style="margin-top:20px;margin-bottom:10px"><span style="font-size:32px;font-weight:bold;">{{totalList.login.times}}</span>次</div>
              <div>登陆次数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="6"   style="margin-bottom:20px"   >
          <el-card style="padding:30px;text-align: center;"  >
            <div>
              <img src="@/assets/images/icon_login.png" alt="">
              <div style="margin-top:20px;margin-bottom:10px"><span style="font-size:32px;font-weight:bold;">{{Math.round(totalList.login.time/60)}}</span>分钟</div>
              <div>登陆时长</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="6"   style="margin-bottom:20px"   >
          <el-card style="padding:30px;text-align: center;"  >
            <div>
              <img src="@/assets/images/icon_video.png" alt="">
              <div style="margin-top:20px;margin-bottom:10px"><span style="font-size:32px;font-weight:bold;">{{totalList.video.times}}</span>次</div>
              <div>视频观看次数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="6"  style="margin-bottom:20px"    >
          <el-card style="padding:30px;text-align: center;"  >
            <div>
              <img src="@/assets/images/icon_video.png" alt="">
              <div style="margin-top:20px;margin-bottom:10px"><span style="font-size:32px;font-weight:bold;">{{Math.round(totalList.video.time/60)}}</span>分钟</div>
              <div>视频观看时长</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="6"    style="margin-bottom:20px"  >
          <el-card style="padding:30px;text-align: center;"   >
            <div>
              <img src="@/assets/images/icon_zuoti.png" alt="">
              <div style="margin-top:20px;margin-bottom:10px"><span style="font-size:32px;font-weight:bold;">{{totalList.questions.times}}</span>题</div>
              <div>做题数量</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="6"    style="margin-bottom:20px"  >
          <el-card style="padding:30px;text-align: center;" >
            <div>
              <img src="@/assets/images/icon_zuoti.png" alt="">
              <div style="margin-top:20px;margin-bottom:10px"><span style="font-size:32px;font-weight:bold;">{{Math.round(totalList.questions.time/60)}}</span>分钟</div>
              <div>做题时长</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="6"   style="margin-bottom:20px"   >
          <el-card style="padding:30px;text-align: center;"  >
            <div>
              <img src="@/assets/images/icon_weike.png" alt="">
              <div style="margin-top:20px;margin-bottom:10px"><span style="font-size:32px;font-weight:bold;">{{totalList.microClass.times}}</span>次</div>
              <div>微课观看次数</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6" :xs="6"    style="margin-bottom:20px"  >
          <el-card style="padding:30px;text-align: center;"  >
            <div>
              <img src="@/assets/images/icon_weike.png" alt="">
              <div style="margin-top:20px;margin-bottom:10px"><span style="font-size:32px;font-weight:bold;">{{Math.round(totalList.microClass.time/60)}}</span>分钟</div>
              <div>微课观看时长</div>
            </div>
          </el-card>
        </el-col>
      </el-col>
      <el-table :data="tableData" border fit>
        <el-table-column label="科目" align="center" prop="subject"></el-table-column>
        <el-table-column label="使用人数" align="center" prop="person"></el-table-column>
        <el-table-column label="视频观看人数" align="center" prop="videoPerson"></el-table-column>
        <el-table-column label="观看时长" align="center" prop="videoTime" :formatter="formatter"></el-table-column>
        <el-table-column label="答题人数" align="center" prop="quesPerson"></el-table-column>
        <el-table-column label=答题数 align="center" prop="quesCount"></el-table-column>
        <el-table-column label="正确率" align="center" prop="quesRate"></el-table-column>
      </el-table>
    </el-card>
  </el-row>
</template>

<script>

  import { getUserProfile } from "@/api/system/user";
  import {getSysStatsForCourse,getSysStats} from '@/api/webApi/person';
  export default {
    data() {
      return {
        title:'',
        value:'',
        user:{},
        options:[],
        formInline:{
          gradeId:'',
          classId:''
        },
        grade:[],
        classOptions:[],
        params:{
          begin:'',
          end:'',
          courseId:'',
          classId:'',
          gradeId:''
        },
        totalList:{},
        tableData:[]
      };
    },
    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.title = this.$route.path=='/user/info/usageLog'?'学生使用详情':'系统使用记录'
      this.getUser();
      this.getSysStatsForCourse()
      this.getSysStats()
    },
    methods: {
      getSysStatsForCourse(){
        getSysStatsForCourse(this.params).then(res=>{
          this.totalList=res.data
        })
      },
      getSysStats(){
        getSysStats(this.params).then(res=>{
          this.tableData=res.data
        })
      },
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data;
          if(response.data.busiSchool && response.data.busiSchool[0]){
            this.grade = response.data.busiSchool[0].grade || []
          }
        });
      },
      confirm(){
        this.params.classId=this.formInline.classId
        this.params.gradeId=this.formInline.gradeId
        this.getSysStatsForCourse()
        this.getSysStats()
      },
      formatter(row, column, seconds, index){
        let day = parseInt(seconds / 60 / 60 / 24)
        let hr = parseInt(seconds / 60 / 60 % 24)
        let min = parseInt(seconds / 60 % 60)
        let sec = parseInt(seconds % 60)

        day = day > 9 ? day : '0' + day
        hr = hr > 9 ? hr : '0' + hr
        min = min > 9 ? min : '0' + min
        sec = sec > 9 ? sec : '0' + sec

        let result ;
        if(day>0){
          result = `${day}天 ${hr}:${min}:${sec}`;
        }else if(hr>0){
          result = `${hr}:${min}:${sec}`;
        }else if(min>=0){
          result = `${min}:${sec}`;
        }

        return result;
      }
    }
  };
</script>
<style>
</style>


