<template>
  <TrainChunkBox style="min-height: 350px" :title="title">
    <template #title-left>
      <slot></slot>
    </template>
    <div class="info-item">
      <div class="info-item-label">训练详情</div>
      <div class="info-item-main-box">
        <div class="info-item-main">
          <div class="info-item-main-label">训练名称：</div>
          <div class="info-item-main-content">
            <el-select
              size="mini"
              :disabled="trainInfo.status === 1"
              @change="changeTrain"
              v-model="value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in trainList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <div
                  class="train-item"
                  v-if="
                    item.id !== trainInfo.id &&
                    (!$route.query.step || $route.query.step == 3)
                  "
                >
                  <div class="train-item-name">{{ item.name }}</div>
                  <div
                    class="train-item-delete el-icon-delete del-icon"
                    @click.stop="deleteTrain(item.id)"
                  ></div>
                </div>
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="info-item-main">
          <div class="info-item-main-label">训练类型：</div>
          <div class="info-item-main-content ellipsis-1">
            {{ trainInfo?.tyepName }}
          </div>
        </div>
        <div class="info-item-main">
          <div class="info-item-main-label">训练科目：</div>
          <div class="info-item-main-content ellipsis-1">
            {{ trainInfo.subjectInfo?.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="info-item">
      <div class="info-item-label">操作详情</div>
      <div class="info-item-main-box">
        <el-tabs
          @tab-click="handleClick"
          v-model="activeGroup"
          tab-position="left"
          ref="fuckOff"
          style="height: 145px"
        >
          <el-tab-pane
            v-for="(groupId, i) in groupIdList"
            :label="`第 ${groupId} 组`"
            :key="i"
            :name="`${groupId}`"
          >
            <div
              class="device-item"
              v-for="(user, index) in groupInfo[groupId].usersArray"
              :key="index"
            >
              <!-- <div class="device-item-position">{{ index + 1 }}</div> -->
              <div class="device-item-name">
                <span class="item-label">操作人员：</span>
                <el-tooltip
                  effect="dark"
                  :content="user.deviceInfo.deviceInfo.name"
                  placement="top"
                >
                  <span style="">{{ user.name }}</span>
                </el-tooltip>
                <span
                  class="ellipsis"
                  style="
                    padding-left: 10px;
                    width: 150px;
                    color: #208ac6;
                    font-weight: bold;
                    overflow: hidden;
                  "
                >
                  【{{ user.deviceInfo.deviceInfo.name }}】</span
                >
              </div>
              <div class="device-item-ip ellipsis" v-if="showFloorBar">
                <i
                  v-if="user.deviceInfo?.alive"
                  class="el-icon-success"
                  style="color: #01cf7b; font-size: 14px; padding-right: 5px"
                ></i>
                <i
                  v-else
                  class="el-icon-error"
                  style="color: red; font-size: 14px; padding-right: 5px"
                ></i>
                <span style="width: 100px">{{ user.deviceInfo?.ip.ip }}</span>
                <!-- <span style="padding-left: 10px"
                  >延迟:
                  <span v-if="user.deviceInfo.alive" style="color: #01cf7b"
                    >{{ user.deviceInfo.delay }}ms</span
                  >
                  <span v-else style="color: red">离线</span></span
                > -->
                <el-tooltip
                  placement="right"
                  :content="
                    user.deviceInfo.alive
                      ? user.deviceInfo.delay + 'ms'
                      : '设备未上线'
                  "
                >
                  <span style="padding: 0 10px">
                    <svg
                      v-if="user.deviceInfo.alive"
                      t="1688368915192"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="5493"
                      width="14"
                      height="14"
                    >
                      <path
                        d="M60.8 1024c-33.6 0-60.8-27.2-60.8-60.8v-243.2c0-33.6 27.2-60.8 60.8-60.8s60.8 27.2 60.8 60.8v243.2c0 33.6-27.2 60.8-60.8 60.8zM361.6 1024c-33.6 0-60.8-27.2-60.8-60.8v-473.6c0-33.6 27.2-60.8 60.8-60.8s60.8 27.2 60.8 60.8v473.6c0 33.6-27.2 60.8-60.8 60.8zM662.4 1024c-33.6 0-60.8-27.2-60.8-60.8v-678.4c0-33.6 27.2-60.8 60.8-60.8s60.8 27.2 60.8 60.8v678.4c0 33.6-27.2 60.8-60.8 60.8zM963.2 1024c-33.6 0-60.8-27.2-60.8-60.8V60.8c0-33.6 27.2-60.8 60.8-60.8s60.8 27.2 60.8 60.8v902.4c0 33.6-27.2 60.8-60.8 60.8z"
                        fill="rgb(1, 207, 123)"
                        p-id="5494"
                      ></path></svg
                  ></span>
                </el-tooltip>
              </div>
              <div class="device-item-ip ellipsis" v-else>
                <span class="item-label"
                  >操作设备：
                  <el-tooltip
                    effect="dark"
                    :content="user.deviceInfo.deviceInfo.name"
                    placement="top"
                  >
                    <span style="color: #208ac6">{{
                      user.deviceInfo.deviceInfo.name
                    }}</span>
                  </el-tooltip>
                </span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="info-floor" v-if="showFloorBar">
      <el-button
        size="mini"
        :disabled="!deviceAllOnline"
        round
        type="primary"
        v-show="!trainInfo.status"
        @click.prevent="$emit('trainControl', 1)"
        >开始训练</el-button
      >
      <el-button
        size="mini"
        round
        plain
        type="primary"
        v-show="trainInfo.status == 3 && $route.query.step != 3"
        @click.prevent="$emit('trainControl', 6)"
        >查看成绩</el-button
      >
      <el-button
        size="mini"
        round
        type="primary"
        v-show="trainInfo.status == 3"
        @click.prevent="$emit('trainControl', 5)"
        >重新训练</el-button
      >
      <el-button
        size="mini"
        round
        type="danger"
        :loading="allRemoveLoading"
        v-show="
          trainInfo.status == 3 &&
          $store.user.baseRole === 1 &&
          (!$route.query.step || $route.query.step == 3)
        "
        @click.prevent="deleteAllTrain"
        >删除所有训练</el-button
      >
      <el-button
        size="mini"
        round
        type="primary"
        @click.stop="$emit('trainControl', 2)"
        v-show="
          trainInfo.status &&
          trainInfo.status !== 2 &&
          !trainInfo.suspend &&
          trainInfo.status !== 3
        "
        >暂停训练</el-button
      >
      <el-button
        size="mini"
        round
        plain
        type="primary"
        @click.prevent="$emit('trainControl', 3)"
        v-show="trainInfo.status && trainInfo.status !== 2 && trainInfo.suspend"
        >恢复训练</el-button
      >
      <el-button
        v-show="trainInfo.status && trainInfo.status !== 3"
        size="mini"
        @click.prevent="$emit('trainControl', 4)"
        round
        type="danger"
        >结束训练</el-button
      >
    </div>
  </TrainChunkBox>
</template>

<script>
import TrainChunkBox from "./train-chunk-box.vue";
import { getSubjectTypeApi } from "@/api/training/subject";
import { deleteTrainApi, deleteAllTrainApi } from "@/api/training/train";
export default {
  name: "训练基本信息",
  components: { TrainChunkBox },
  props: {
    title: {
      type: String,
      default: "训练基本信息",
    },
    trainInfo: {
      type: Object,
      default: () => {},
    },
    trainList: {
      type: Array,
      default: () => [],
    },
    deviceAllOnline: {
      type: Boolean,
      default: true,
    },
    groupInfo: {
      type: Object,
      default: () => {},
    },
    groupIdList: {
      type: Array,
      default: () => [],
    },
    showFloorBar: {
      type: Boolean,
      default: true,
    },
  },
  created() {
    this.value = +this.$route.query.id || null;
    this.getTrainType();
  },

  data() {
    return {
      value: null,
      subjectTypeList: [],
      activeGroup: "1",
      allRemoveLoading: false,
    };
  },
  methods: {
    changeTrain(e) {
      console.log(this.groupInfo);
      this.$emit("change", e);
      this.activeGroup = "1";
      this.$emit("changeGroup", 1);
    },
    async getTrainType() {
      const { data } = await getSubjectTypeApi();
      this.subjectTypeList = data.toTree().tree;
      // 定义递归 获取当前训练类型信息
    },
    deleteTrain(id) {
      this.$confirm("确认删除当前训练及所有训练数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        // eslint-disable-next-line prefer-promise-reject-errors
      })
        .then(async () => {
          await deleteTrainApi(id);
          this.$message.success("训练删除成功");
          this.$emit("getTrainList");
        })
        .catch((_) => {});
    },
    async deleteAllTrain() {
      this.$confirm("确认删除所有训练数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          this.$message.warning("删除所有训练耗时可能较久，请耐心等待！");
          this.allRemoveLoading = true;
          await deleteAllTrainApi();
          this.$message.success("训练所有删除成功");
          this.$router.push('/train/training?step=1')
          location.reload()
          // this.$emit("getTrainList");
          this.allRemoveLoading = false;
        })
        .catch((_) => {});
    },
    handleClick(e, x) {
      this.$emit("changeGroup", +e.name);
    },
    async getTrainTypeName(tree, targetId) {
      const deep = (tree, targetId, parents) => {
        parents || (parents = []);
        for (const node of tree) {
          if (node.id === targetId) {
            // 找到目标节点，返回节点及其父级
            return [...parents, node];
          }

          if (node?.children.length > 0) {
            // 递归查找子级节点
            const result = deep(node.children, targetId, [...parents, node]);
            if (result) {
              // 如果找到了目标节点及其父级，则直接返回结果
              return result;
            }
          }
        }
        // 没有找到目标节点
        return null;
      };
      const names = deep(tree, targetId, []);
      this.$set(
        this.trainInfo,
        "tyepName",
        names?.map((i) => i.name).join("-") || ""
      );
    },
  },
  watch: {
    trainList: {
      deep: true,
      handler(n, o) {
        if (!this.value) {
          const id = n[n.length - 1].id;
          this.value = id;
          this.changeTrain(id);
        } else {
          this.changeTrain(this.value);
        }
      },
    },
    trainInfo: {
      handler(n, o) {
        this.getTrainTypeName(this.subjectTypeList, n.type);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .train-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.info-item {
  display: flex;
  ::v-deep .el-tabs__item {
    padding: 0 10px !important;
  }

  .info-item-label {
    height: 80px;
    width: 70px;
    font-weight: 700;
    color: #208ac6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-right: 2px solid #208ac6;
    margin: 10px 0;
    margin-right: 5px;
    padding-right: 10px;
  }
  .info-item-main-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;
    padding: 10px 10px 5px 0;
  }
  .info-item-main {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: 30px;
    .info-item-main-label {
      color: black;
      font-weight: 700;
    }
    .info-item-main-content {
      flex: 1;
    }
  }
  .el-tabs {
    background-color: #f5f5f5;
  }
  ::v-deep .el-tabs__header {
    background-color: #f0f4ff;
    padding: 10px 0;
    .el-tabs__item {
      font-size: 14px;
      font-weight: bold;
      padding: 0 10px;
    }
  }
  ::v-deep .el-tabs__content {
    padding: 10px 0;
  }
  .device-item {
    display: flex;
    margin-bottom: 15px;
    white-space: nowrap;
    > div {
      display: flex;
      align-items: center;
      // width: 50%;
    }
    .device-item-name {
      min-width: 230px;
    }
    .device-item-ip {
      // line-height: 16px;
      width: 140px;
    }
    .device-item-position {
      border: 2px solid #208ac6;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #208ac6;
      font-size: 14px;
      margin-right: 10px;
    }
    .item-label {
      font-weight: bold;
    }
  }
}
.info-floor {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
