<script setup lang="ts">

import router from "@/router";
import TotalCanvas from "@/views/BehaviorPage/component/TotalCanvas.vue";
import PauseCanvas from "@/views/BehaviorPage/component/PauseCanvas.vue";
import EditCanvas from "@/views/BehaviorPage/component/EditCanvas.vue";
import ProcessCanvas from "@/views/BehaviorPage/component/ProcessCanvas.vue";

function toDetail(index:number){
  if ( index === 1){
    router.push("/home/behavior/total")
  }
  else if ( index === 2){
    router.push("/home/behavior/pause")
  }
  else if ( index === 3){
    router.push("/home/behavior/edit")
  }
  else{
    router.push("/home/behavior/process")
  }
}

</script>

<template>
<div class="behavior-main">
  <el-card class="small-card">
    <template #header>
      <div class="small-card-header">
        <span class="card-title">
          总体分析
        </span>
        <span
            @click="toDetail(1)"
            class="card-text-button">
          查看详情
        </span>
      </div>
    </template>
    <div style="width: 100%;height: 350px">
      <TotalCanvas
          :assignment-id="1"/>
    </div>
  </el-card>
  <el-card class="small-card">
    <template #header>
      <div class="small-card-header">
        <span class="card-title">
          停顿分析
        </span>
        <span
            @click="toDetail(2)"
            class="card-text-button">
          查看详情
        </span>
      </div>
    </template>
    <div style="width: 100%;height: 350px">
      <PauseCanvas
          :split-number="3"
          :bar-width="10"
          :assignment-id="1"/>
    </div>
  </el-card>
  <el-card class="small-card">
    <template #header>
      <div class="small-card-header">
        <span class="card-title">
          修改分析
        </span>
        <span
            @click="toDetail(3)"
            class="card-text-button">
          查看详情
        </span>
      </div>
    </template>
    <div style="width: 100%;height: 350px">
      <EditCanvas
          :split-number="4"
          :assignment-id="1"/>
    </div>
  </el-card>
  <el-card class="small-card">
    <template #header>
      <div class="small-card-header">
        <span class="card-title">
          写作过程
        </span>
        <span
            @click="toDetail(4)"
            class="card-text-button">
          查看详情
        </span>
      </div>
    </template>
    <div style="width: 100%;height: 350px">
      <ProcessCanvas
          :split-number="4"
          :assignment-id="1"/>
    </div>
  </el-card>
</div>
</template>

<style scoped>
.behavior-main{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  width: 70%;
  min-width: 700px;
}
.small-card{
  width: 100%;
  border-radius: 16px;
}
.small-card-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.canvas{
  width: 100%;
  height: 300px;
}
.card-title{
  font-size: 16px;
  font-weight: bold;
}
.card-text-button{
  font-size: 16px;
}
.card-text-button:hover{
  color: var(--main-color);
  cursor: pointer;
}
</style>
