<template>
  <el-tabs
    type="border-card"
    v-loading="loading"
    class="subject-evealuation"
    v-model="subjectId"
    id="subject-evealuation"
  >
    <el-tab-pane
      :label="subject.name"
      v-for="subject in subjectList"
      :key="subject.id"
      :name="`${subject.id}`"
    >
      <div class="subject-main" v-if="+subjectId === subject.id">
        <div>
          <TeamgroupAverageScores
            :subjectId="subjectId"
          ></TeamgroupAverageScores>
          <TeamGroupDurationVue :subjectId="subjectId"></TeamGroupDurationVue>
        </div>
        <div>
          <PositionStepOperation
            :baseData="item"
            v-for="item in positionOperationData"
            :key="item.posId"
          ></PositionStepOperation>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { pagingGetSubjectApi } from "@/api/training/subject";
import { positionGroupOpeartionApi } from "@/api/training/train-evealuation";
import PositionStepOperation from "./components/PositionStepOperation.vue";
import TeamgroupAverageScores from "./components/TeamgroupAverageScores.vue";
import TeamGroupDurationVue from "./components/TeamGroupDuration.vue";
export default {
  components: {
    TeamgroupAverageScores,
    TeamGroupDurationVue,
    PositionStepOperation,
  },
  data() {
    return {
      loading: true,
      subjectList: [],
      subjectId: null,
      positionOperationData: [],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    // 初始化数据获取训练列表
    async initData() {
      this.loading = true;
      const { data } = await pagingGetSubjectApi({
        currentPage: 0,
        pageSize: 0,
      });
      this.subjectList = data.data;
      this.subjectId = data.data[0].id.toString();
      this.loading = false;
    },
    async getPositionOperationList() {
      const baseData = {};
      const { data } = await positionGroupOpeartionApi(this.subjectId);
      data.forEach((item) => {
        if (baseData[item.posId]) {
          baseData[item.posId].push(
            ...[
              { ...item, value: +item.okCount, type: "正确操作步骤" },
              { ...item, value: +item.failCount, type: "错误操作步骤" },
            ]
          );
        } else {
          baseData[item.posId] = [
            { ...item, value: +item.okCount, type: "正确操作步骤" },
            { ...item, value: +item.failCount, type: "错误操作步骤" },
          ];
        }
      });
      this.positionOperationData = baseData;
    },
  },
  watch: {
    subjectId() {
      this.getPositionOperationList();
    },
  },
};
</script>

<style lang="scss" scoped>
.subject-evealuation {
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-tabs__content {
    flex: 1;
    height: 100%;
  }
}
.subject-main {
  flex: 1;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  height: 100%;
  display: flex;
  > :first-child {
    max-width: 500px;
  }
  > div {
    flex: 1;
    flex-direction: row;
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
    flex-grow: 1;
    > div {
      flex: 1;
      .train-chunk-box {
        height: 100%;
      }
    }
  }
}
</style>
