<template>
  <el-row :gutter="20" style="margin:10px" v-loading="loading">
    <el-card v-if="totalList.login && userInfo!==null ">
      <div slot="header" style="display: flex;justify-content: space-between;">
        <span style="color:#47C6A2">{{title}} - {{ isFrontStudent?userInfo.userName:userInfo.customer.name }}</span>
        <el-button v-if="!isFrontStudent" type="primary" @click="goBack">返回</el-button>
      </div>
      <el-col :span="24" :xs="18" style="text-align: right;margin-bottom: 10px;">
        <el-date-picker @change="changeTime" v-model="value" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </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 @click="detailList('login')">
              <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 @click="detailList('login')">
              <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 @click="detailList('video')">
              <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 @click="detailList('video')">
              <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 @click="detailList('questions')">
              <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 @click="detailList('questions')">
              <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 @click="detailList('microClass')">
              <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 @click="detailList('microClass')">
              <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-card>
  </el-row>
</template>

<script>
import { getUserProfile } from "@/api/system/user";
import { getUserStatsSummary } from "@/api/webApi/person";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      title: "学生使用详情",
      value: "",
      loading: false,
      totalList: {},
      selectParams: {
        end: "",
        begin: "",
        customerCode: "",
      },
      userInfo: {},
    };
  },
  computed: {
    ...mapGetters(["isFrontStudent", "currentUser", "studentParams"]),
  },
  created() {
    if (this.isFrontStudent) {
      //当前用户是学生
      this.userInfo = this.currentUser;
      this.selectParams.customerCode = this.currentUser.code;
    } else {
      //当前用户是老师或者校长
      if (this.studentParams.customerCode) {
        this.selectParams.customerCode = this.studentParams.customerCode;
        this.userInfo = this.studentParams;
      }
    }
    this.getUserStatsSummary();
  },
  methods: {
    goBack() {
      this.$router.push({ path: "/user/record" });
    },
    changeTime() {
      if (this.value) {
        this.selectParams.begin = this.getDateDetail(this.value[0]);
        this.selectParams.end = this.getDateDetail(this.value[1]);
      } else {
        this.selectParams.begin = "";
        this.selectParams.end = "";
      }
      this.getUserStatsSummary();
    },
    getUserStatsSummary() {
      this.loading = true;
      getUserStatsSummary(this.selectParams).then((res) => {
        this.totalList = res.data;
        this.loading = false;
      });
    },
    detailList(type) {
      this.$router.push({ name: "PersonInfo", params: { type: type } });
    },
    //将中国标准时间转化成年月日的形式
    getDateDetail(date) {
      const newDate = new Date(date);
      return (
        newDate.getFullYear() +
        "-" +
        (newDate.getMonth() + 1 > 9
          ? newDate.getMonth() + 1
          : "0" + (newDate.getMonth() + 1)) +
        "-" +
        (newDate.getDate() > 9 ? newDate.getDate() : "0" + newDate.getDate())
      );
    },
    confirm() {
      this.params.classId = this.formInline.classId;
      this.params.gradeId = this.formInline.gradeId;
    },
  },
};
</script>
<style>
</style>


