<script setup lang="ts">
import "./TotalAnalysis.scss"
import EditCanvas from "@/views/BehaviorPage/component/EditCanvas.vue";
import {onMounted, type Ref, ref, watch} from "vue";
import {inject} from "vue-demi";
import * as echarts from "echarts";
import useApis from "@/apis";
let tableData = ref([])

const currentEngagement = inject('currentEngagement') as Ref<any>;
watch(currentEngagement,()=>{
  getTableData();
});

const apis = useApis();

function formatTimeWithMilliseconds(stamp:number ){
  const date = new Date(stamp);
  date.setHours(date.getHours()+16)
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');
  const milliseconds = date.getMilliseconds().toString().padStart(3, '0');
  return `${hours}:${minutes}:${seconds}.${milliseconds}`;
}

function getTableData() {
  tableData.value = [
    {
      revision: 0,
      type: "Normal Production",
      content: "This is a test",
      edits: "???",
      start: "125",
      end: "145",
      duration: "10s",
      beginPos: "0",
      endPos: "10",
      length: "10",
    },
    {
      revision: 1,
      type: "Delete",
      content: "This is a test",
      edits: "???",
      start: "125",
      end: "145",
      duration: "10s",
      beginPos: "0",
      endPos: "10",
      length: "10",
    },
    {
      revision: 0,
      type: "Normal Production",
      content: "This is a test",
      edits: "???",
      start: "125",
      end: "145",
      duration: "10s",
      beginPos: "0",
      endPos: "10",
      length: "10",
    },
    {
      revision: 2,
      type: "Insert",
      content: "This is a test",
      edits: "???",
      start: "125",
      end: "145",
      duration: "10s",
      beginPos: "0",
      endPos: "10",
      length: "10",
    },

  ]
  if (!currentEngagement.value){
    return;
  }
  let studentId = currentEngagement.value.studentId;
  let assignmentId = currentEngagement.value.assignmentId;
  apis.getBehaviorRecordAll(studentId,assignmentId)
      .then((res:any) => {
        if (res && res.data && res.data.code === 200){
          let rowData = res.data.data.events as any[];
          console.log("行为数据",rowData);
          tableData.value.length = 0;
          rowData.forEach((item:any,index:number) => {
            if (item.type === 'insert'){
              tableData.value.push({
                revision: index,
                type: "Normal Production",
                content: item.insert,
                start: formatTimeWithMilliseconds(item.startStamp),
                end: formatTimeWithMilliseconds(item.endStamp),
                duration: item.pauseTime/1000,
                beginPos: item.retain,
                endPos: item.retain+1,
                length: item.docLength,
              })
            }
            else if (item.type === 'delete'){
              tableData.value.push({
                revision: index,
                type: "Delete",
                content: item.delete,
                start: formatTimeWithMilliseconds(item.startStamp),
                end: formatTimeWithMilliseconds(item.endStamp),
                duration: item.pauseTime/1000,
                beginPos: item.retain,
                endPos: item.retain+1,
                length: item.docLength,
              })
            }
          })
        }
      })
}
onMounted(()=>{
  getTableData()
})
</script>

<template>
  <el-card class="detail-card">
    <template #header>
      <div>
        <span class="card-title">
          修改分析
        </span>
      </div>
    </template>
    <div class="total-canvas-container">
      <EditCanvas
          :split-number="10"
          :assignment-id="1"/>
    </div>
    <div class="table-container">
      <el-table
          empty-text="暂无数据"
          :data="tableData" style="width: 90%" max-height="500">
        <el-table-column prop="revision" label="#Revision" width="95"/>
        <el-table-column prop="type" label="Type" width="100">
        </el-table-column>
        <el-table-column prop="content" label="content" show-overflow-tooltip width="110"/>
<!--        <el-table-column prop="edits" label="Edits"  />-->
        <el-table-column prop="start" label="Start" />
        <el-table-column prop="end" label="End"/>
        <el-table-column prop="duration" label="Duration" />
        <el-table-column prop="beginPos" label="BeginPos" width="90"/>
        <el-table-column prop="endPos" label="EndPos"/>
        <el-table-column prop="length" label="Length" />
      </el-table>
    </div>
  </el-card>
</template>

<style scoped>

</style>
