<script setup lang="ts">
import "./TotalAnalysis.scss"
import PauseCanvas from "@/views/BehaviorPage/component/PauseCanvas.vue";
import {onMounted, provide, reactive, ref, type Ref, watch} from "vue";
import HeatMap from "@/views/BehaviorPage/component/HeatMap.vue";
import {inject} from "vue-demi";
import useApis from "@/apis";
import {ElMessage} from "element-plus";

interface StatisticData{
  totalTime:number,
  pauseTimes:number,
  averagePauseTime:number,
  medianPauseTime:number,
  standardDeviation:number,
}
const currentEngagement = inject('currentEngagement') as Ref<any>;
const maxPauseTime = inject('maxPauseTime') as Ref<number>;

const threshold = ref(2000);
watch(currentEngagement,()=>{
  getStatisticData()
});

const data:Ref<StatisticData> = ref({
  totalTime:undefined,
  pauseTimes:undefined,
  averagePauseTime:undefined,
  medianPauseTime:undefined,
  standardDeviation:undefined
})
const dataLoading = ref(true);
const apis = useApis();
function getStatisticData(){
  //TODO
  if (!currentEngagement.value){
    return;
  }
  // threshold.value = 0;
  dataLoading.value = true;
  apis.getPauseStatisticData(currentEngagement.value.studentId,currentEngagement.value.assignmentId,threshold.value)
      .then((res:any) => {
        console.log(res);
        if (res && res.data &&res.data.code === 200){
          data.value.averagePauseTime = res.data.data.averagePauseTime;
          data.value.medianPauseTime = res.data.data.medianPauseTime;
          data.value.pauseTimes = res.data.data.pauseCount;
          data.value.standardDeviation = res.data.data.standardDeviation;
          data.value.totalTime = res.data.data.totalPauseTime;
          dataLoading.value = false;
        }
      })
      .catch((err:any) => {
        ElMessage.error("获取停顿统计数据失败");
        dataLoading.value = false;
      })
}

onMounted(()=>{
  getStatisticData();
})
</script>

<template>
  <el-card class="detail-card">
    <template #header>
      <div>
        <span class="card-title">
          停顿分析
        </span>
      </div>
    </template>
    <div id="threshold-container">
      <span class="threshold-title">停顿阈值</span>
      <el-slider v-model="threshold"
                 :min="0"
                 show-input
                 :disabled="dataLoading"
                 style="width: 50%;margin-left: 50px"
                 :format-tooltip="(value:number)=>{
                   return value+'ms';
                 }"
                 @change="getStatisticData"
                 :max="maxPauseTime"/>
    </div>
    <div class="statistic-container" v-loading="dataLoading">
      <el-statistic
          :value="data.totalTime"
          suffix="min"
          title="停顿总时长">
        <template #suffix>
          <span class="statistic-suffix" >ms</span>
        </template>
      </el-statistic>
      <el-divider direction="vertical" style="height: 50px;margin: 0"/>
      <el-statistic
          :value="data.pauseTimes"
          title="停顿总次数">
        <template #suffix>
          <span class="statistic-suffix" >times</span>
        </template>
      </el-statistic>
      <el-divider direction="vertical" style="height: 50px;margin: 0"/>
      <el-statistic
          :value="data.averagePauseTime"
          title="平均停顿时长">
        <template #suffix>
          <span class="statistic-suffix" >ms</span>
        </template>
      </el-statistic>
      <el-divider direction="vertical" style="height: 50px;margin: 0"/>
      <el-statistic
          :value="data.medianPauseTime"
          title="停顿时长中位数">
        <template #suffix>
          <span class="statistic-suffix" >ms</span>
        </template>
      </el-statistic>
      <el-divider direction="vertical" style="height: 50px;margin: 0"/>
      <el-statistic
          :value="data.standardDeviation"
          title="停顿时长标准差"/>
    </div>
    <div class="total-canvas-container">
      <PauseCanvas
          :split-number="10"
          :bar-width="20"
          :assignment-id="1"/>
    </div>
    <HeatMap/>
  </el-card>
</template>

<style scoped>
.statistic-suffix{
  font-size: 12px;
  color: var(--el-text-color-regular);
}
#threshold-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 20px 0 20px 0;
}
</style>
