<template>
  <div
    class="train-evealuation"
    id="train-evealuation"
    ref="printRef"
    v-loading="loading"
  >
    <div>
      <TrainInfo
        :trainList="trainList"
        :showFloorBar="true"
        :deviceAllOnline="deviceAllOnline"
        :trainInfo="trainInfo"
        :groupInfo="groupInfo"
        :groupIdList="groupIdList"
        @getTrainList="initData"
        @change="changeTrain"
        @trainControl="trainControl"
        @changeGroup="
          (key) => {
            checkedGroup = key;
          }
        "
      >
        <el-button
          size="mini"
          class="self-button"
          @click="$html2Pdf('train-evealuation')"
          >导出</el-button
        >
        <el-button
          size="mini"
          class="self-button"
          @click="$html2Pdf('train-evealuation', true)"
          >打印</el-button
        >
      </TrainInfo>
      <TrainScoreEvealuation
        :checkedGroup="checkedGroup"
        :trainId="trainInfo?.id"
      ></TrainScoreEvealuation>
    </div>
    <div>
      <TrainStepEvealuation
        :checkedGroup="checkedGroup"
        :trainId="trainInfo?.id"
      ></TrainStepEvealuation>
      <TrainStepDeatilEvealuation
        :checkedGroup="checkedGroup"
        :allData="stepInfo"
      ></TrainStepDeatilEvealuation>
    </div>
    <div>
      <TrainStepDuration
        :checkedGroup="checkedGroup"
        :allData="stepInfo"
      ></TrainStepDuration>
      <TrainStepClassify
        :checkedGroup="checkedGroup"
        :allData="stepInfo"
      ></TrainStepClassify>
    </div>
  </div>
</template>

<script>
import TrainScoreEvealuation from "./components/ScoreEvealuation.vue";
import TrainStepEvealuation from "./components/StepEvealuation.vue";
import TrainStepDeatilEvealuation from "./components/StepDetailEvealuation.vue";
import TrainStepDuration from "./components/StepDurationEvealuation.vue";
import TrainStepClassify from "./components/StepClassifyEvealuation.vue";
import TrainInfo from "@/views/training/training/components/train-info.vue";
import {
  getTrainListApi,
  getTrainDetailsApi,
  getTrainStepApi,
} from "@/api/training/train";
import { getDevicesInfoApi } from "@/api/training/device";
export default {
  components: {
    TrainInfo,
    TrainScoreEvealuation,
    TrainStepEvealuation,
    TrainStepDeatilEvealuation,
    TrainStepDuration,
    TrainStepClassify,
  },
  data() {
    return {
      trainList: [],
      trainInfo: {},
      loading: false,
      checkedGroup: null,
      stepInfo: [],
      groupInfo: {},
      groupIdList: [],
      everyGroupNowTrainStep: {},
      nowTrainStep: null,
      prevStepTime: null,
      trainDeviceInfo: null,
      trainUserInfo: null,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    printx() {
      if (window.printElement) {
        window.printElement.remove();
      }
      window.printElement = document.createElement("iframe");
      window.printElement.style = "display:none;";
      window.printElement.onload = () => {
        const printBody = window.printElement.contentWindow.document.body;
        printBody.appendChild(document.head.cloneNode(1));
        printBody.style = "-webkit-print-color-adjust:exact;background:#fff;";
        printBody.appendChild(this.$refs.printRef.cloneNode(1));
        window.printElement.contentWindow.print();
      };
      document.body.appendChild(window.printElement);
    },
    // 初始化数据获取训练列表
    async initData() {
      this.loading = true;
      const { data } = await getTrainListApi(3);
      if (!data || !data.length) {
        this.$message.error("暂无训练数据");
        return;
      }
      this.trainList = data;
    },
    async getStepData(id) {
      const { data } = await getTrainStepApi(id);
      this.stepInfo = data;
    },
    // 切换训练
    async changeTrain(id) {
      this.loading = true;
      await this.getTrainDetail(id);
      if (id !== +this.$route.query?.id) {
        this.$router.push({ path: this.$route.path, query: { step: 3, id } });
      }
      // await this.getTrainStepApi(id)
      this.loading = false;
    },
    trainControl(key) {
      if (key === 5) {
        this.$router.push({
          path: "/train/training?step=1",
          query: { anewId: this.trainInfo?.id },
        });
        location.reload();
      }
    },
    // 获取训练详情
    async getTrainDetail(id) {
      this.getStepData(id);
      const { data } = await getTrainDetailsApi(id);
      data.rule = JSON.parse(data.rule);
      const group = {};
      data.settings.forEach((device) => {
        if (group[device.group]) {
          group[device.group].push(device);
        } else {
          group[device.group] = [device];
        }
      });
      // 获取参加训练的设备信息包括部件等
      this.getTrainDeviceInfo(data.settings.map((item) => item.deviceInfo?.id));
      // 获取参加训练的用户信息
      this.trainUserInfo = data.settings.map((item) => {
        return {
          userInfo: item.userInfo,
          device: item,
        };
      });
      data.settings = Object.values(group);
      // 初始化组信息
      for (const k in group) {
        this.groupInfo[k] = this.$set(this.groupInfo, k, {
          usersObject: {},
          usersArray: [],
          devicesArray: [],
          devicesObject: {},
          steps: [],
          nowStep: null,
          nowStepIndex: 0,
          prevStepTime: null,
          pause: null,
          messageList: null,
          // completeStepCount: 0
        });
        group[k].forEach((device) => {
          device.userInfo = { ...device.userInfo, deviceInfo: device };
          this.groupInfo[k].devicesObject[device.deviceInfo?.id] = device;
          this.groupInfo[k].devicesArray.push(device);
          this.groupInfo[k].usersObject[device.userInfo?.id] = device.userInfo;
          this.groupInfo[k].usersArray.push(device.userInfo);
        });
      }
      this.groupIdList = Object.keys(this.groupInfo);
      this.$set(this, "groupIdList", Object.keys(this.groupInfo));
      this.$set(this, "trainInfo", data);
      this.$set(this.trainInfo, "suspend", 0);
      if (this.client) {
        this.getOnlineClients();
      }
    },
    /** */
    async getTrainDeviceInfo(ips) {
      const { data } = await getDevicesInfoApi(ips);
      this.trainDeviceInfo = data;
    },
    /**
     * 获取训练步骤信息
     * @param {number} id  训练ID
     */
    // async getTrainStepApi (id) {
    //   const { data } = await getTrainStepApi(id)
    //   // 分组
    //   // 处理分组步骤信息 处理用户步骤信息
    //   for (const key in this.groupInfo) {
    //     const base = this.groupInfo[key]
    //     if (!base.steps) {
    //       this.$set(base, 'steps', [])
    //     }
    //     const groupData = data.filter((item) => {
    //       return item.settingInfo.group === +key
    //     })
    //     groupData.forEach((step) => {
    //       base.steps.push(step)
    //       if (base.usersObject[step.userInfo?.id]?.step) {
    //         base.usersObject[step.userInfo?.id].step.push(step)
    //       } else {
    //         base.usersObject[step.userInfo?.id].step = [step]
    //       }
    //       // completeStepCount
    //       // if (step.status === 1 || step.status === 2) {
    //       //   base.completeStepCount++
    //       // }
    //     })
    //     // if (base.completeStepCount >= base.steps.length - 1) {
    //     //   base.isOver = true
    //     // }
    //   }
    //   // 查到当前正在执行的数据

    //   for (const key in this.groupInfo) {
    //     const base = this.groupInfo[key]
    //     let nowGroupIndex = -1
    //     for (let i = base.steps.length - 1; i >= 0; i--) {
    //       if (base.steps[i]?.status === 1 || base.steps[i]?.status === 2) {
    //         nowGroupIndex = i
    //         break
    //       }
    //     }
    //     if (nowGroupIndex === -1) {
    //       base.nowStepIndex = 0
    //       base.nowStep = base.steps[0]
    //     } else {
    //       base.nowStepIndex = nowGroupIndex + 1
    //       base.nowStep = base.steps[nowGroupIndex + 1]
    //     }
    //     base.nowStep && (base.nowStep.status = 3)
    //   }
    // }
  },
};
</script>

<style lang="scss" scoped>
.train-evealuation {
  flex: 1;
  display: flex;
  overflow: auto;
  flex-wrap: wrap;
  user-select: none;
  > div {
    min-width: 530px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 300px;
    height: 100%;
  }
}
</style>
