<script setup lang="ts">
import "./TotalAnalysis.scss"
import TotalCanvas from "@/views/BehaviorPage/component/TotalCanvas.vue";
import {onMounted, type Ref, ref, watch} from "vue";
import useApis from "@/apis";
import {inject} from "vue-demi";
import * as echarts from "echarts";
import {type TableColumnCtx} from "element-plus";

let tableData = ref([])
const apis = useApis();

const currentEngagement = inject('currentEngagement') as Ref<any>;
watch(currentEngagement,()=>{
  getBehaviorData()
},{deep:true})

function getTagType(type:string){
  if (type === "insert"){
    return "primary"
  }
  else if (type === "cursor_move"){
    return "success"
  }
  else if (type === "delete"){
    return "danger"
  }
}
interface Event {
  Id:number,
  EventType:string,
  Output:string|null|undefined,
  Position:number,
}

function getBehaviorData(){
  //TODO
  // tableData.value = [
  //   {Id:0,EventType:"focus",Output:"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
  //   {Id:1,EventType:"mouse",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
  //   {Id:2,EventType:"keyboard",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
  //   {Id:3,EventType:"focus",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
  //   {Id:4,EventType:"focus",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
  //   {Id:5,EventType:"mouse",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
  //   {Id:6,EventType:"keyboard",Output:"xxxx",Position:"12",DocLength:"12",StartTime:"00:00:00",EndTime:"00:01:05"},
  // ];
  if (!currentEngagement.value){
    return;
  }
  apis.getBehaviorRecordAll(currentEngagement.value.studentId,currentEngagement.value.assignmentId)
    .then((res: any) => {
      if (res && res.data && res.data.code === 200){
        let rowData = res.data.data
        console.log("行为数据",res)
        tableData.value = res.data.data.events.map((item:any,index:number) => {
          return {
            Id:index,
            EventType:item.type,
            Output:item.insert,
            Position:item.retain,
          }
        })
        console.log("tableData",tableData)
      }
    })
}
const filterHandler = (
    value: string,
    row: Event,
    column: TableColumnCtx<Event>
) => {
  const property = column['property']
  return row[property] === value
}


onMounted(()=>{
  getBehaviorData();
})


</script>

<template>
  <el-card class="detail-card">
    <template #header>
      <div>
        <span class="card-title">
          总体分析
        </span>
      </div>
    </template>
    <div class="total-canvas-container">
      <TotalCanvas
          :assignment-id="1"/>
    </div>
    <div class="table-container">
      <el-table :data="tableData" style="width: 90%" max-height="500">
        <el-table-column prop="Id" label="Id" width="120" sortable/>
        <el-table-column prop="EventType"
                         :filters="[
                             {text:'insert',value:'insert'},
                             {text:'delete',value:'delete'},
                             {text:'cursor_move',value:'cursor_move'}]"
                         :filter-method="filterHandler"
                         label="Event Type" >
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.EventType)">{{ scope.row.EventType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="Output" label="Output" show-overflow-tooltip width="160"/>
        <el-table-column prop="Position" label="Position"  />
<!--        <el-table-column prop="DocLength" label="DocLength" />-->
<!--        <el-table-column prop="StartTime" label="StartTime"/>-->
<!--        <el-table-column prop="EndTime" label="EndTime" />-->
      </el-table>
    </div>
  </el-card>
</template>

<style scoped>

</style>
