<template>
  <div class="train-step">
    <el-tabs v-model="activeName" @tab-click="handleClick()">
      <span class="search-input">
        <el-input-number
          v-model="navigateStep"
          size="mini"
          controls-position="right"
          :min="0"
        ></el-input-number>
        <el-button
          type="primary"
          @click="navigateToStep"
          size="mini"
          style="padding: 3px; margin-left: 10px"
          >确定</el-button
        >
      </span>
      <el-tab-pane label="总体" name="all">
        <ul
          style="list-style: none; padding: 0"
          :class="{ 'train-step-item-box': true, stepInfoBox: true }"
        >
          <li
            v-for="(step, index) in groupInfo?.steps"
            :key="step.id"
            :id="`all-step-${index + 1}`"
            :class="{
              'step-item': true,
              'step-item-pending': step.status === 3,
              'step-item-executed': step.status === 1,
              'step-item-test': index === 35 + 1,
            }"
          >
            <div class="step-content ellipsis-1">
              <h2 class="step-name ellipsis-1">
                <i class="step-index">
                  <span>{{ index + 1 }}</span> </i
                >步骤{{ index + 1 }}
              </h2>
              <div class="step-info ellipsis-1">
                详情：训练人员【{{ step.userInfo.name }}】,{{step.operationInfo.name}}【{{
                  step.deviceInfo.name
                }}】终端，【{{ step.partInfo.name }}】按钮
              </div>
              <div
                style="display: flex; margin-top: 10px"
                v-if="
                  trainInfo.status === 1 && groupInfo.nowStep?.id === step.id
                "
              >
                {{ step.timeline?.status }} ({{Math.round(step.timeline?.count)}}/{{step.timeline?.awaitTime}}秒)
              <span
                  v-if="step.timeline?.status !== '已超时'"
                  style="flex: 1; display: flex; align-items: center"
                  >：
                  <el-progress
                    style="flex: 1"
                    :show-text="false"
                    :percentage="step.timeline?.value"
                  ></el-progress>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
      <el-tab-pane
        :label="user.name"
        :name="`${user.id}${user.deviceInfo.deviceInfo.id}`"
        v-for="user in groupInfo?.usersArray"
        :key="user.id"
      >
        <ul
          style="list-style: none; padding: 0"
          class="stepInfoBox train-step-item-box"
        >
          <li
            v-for="(step, index) in user.step"
            :stepId="step.stepInfo.sort"
            :id="`${user.id}-step-${index + 1}`"
            :key="step.id"
            :class="{
              'step-item': true,
              'step-item-pending': step.status === 3,
              'step-item-executed': step.status === 1,
            }"
          >
            <i class="step-index"
              ><span>{{ index + 1 }}</span></i
            >
            <div class="step-content ellipsis-1">
              <h2 class="step-name ellipsis-1">步骤{{ index + 1 }}</h2>
              <div class="step-info ellipsis-1">
                详情：训练人员【{{ step.userInfo.name }}】,按下【{{
                  step.deviceInfo.name
                }}】终端，【{{ step.partInfo.name }}】按钮
              </div>
              <div
                style="display: flex; margin-top: 10px"
                v-if="
                  trainInfo.status === 1 && groupInfo.nowStep?.id === step.id
                "
              >
                {{ step.timeline.status }}
                <span
                  v-if="step.timeline.status !== '已超时'"
                  style="flex: 1; display: flex; align-items: center"
                  >：
                  <el-progress
                    style="flex: 1"
                    :percentage="step.timeline.value"
                  ></el-progress>
                </span>
              </div>
            </div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    settings: {
      type: Array,
      default: () => [],
    },
    trainInfo: {
      type: Object,
      default: () => {},
    },
    groupInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      activeName: "all",
      showStepList: [],
      navigateStep: 0,
    };
  },
  methods: {
    handleClick(e) {},
    navigateToStep(e) {
      const id = `${this.activeName}-step-${this.navigateStep}`;
      const ele = document.getElementById(id);
      ele && ele.scrollIntoView({ behavior: "smooth", block: "start" });
      console.log(ele);
    },
  },
};
</script>

<style lang="scss" scoped>
.train-step {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0 10px 10px 10px;
  ::v-deep .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .el-tabs__header {
      padding-right: 180px;
    }
    .el-tab-pane {
      height: 100%;
      overflow: hidden;
    }
    .el-tabs__content {
      height: 100%;
      flex: 1;
      overflow: auto;
      position: unset;
    }
    .search-input {
      position: absolute;
      right: 0px;
      top: 3px;
    }
  }
  .step-item {
    width: 100%;
    display: flex;
    margin-bottom: 5px;
    transition: 0.2s all;
    cursor: pointer;
    user-select: none;
    color: #999898;
    padding: 5px;
    .step-name {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 16px;
    }
    .step-index {
      min-width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      border: 2px solid #c3c6c7;
      background-color: #999999;
      color: white;
      margin-right: 5px;
    }
    .step-content {
      flex: 1;
    }
  }

  .step-item-error {
    .step-index {
      // border: 2px solid #81d0d7;
      background-color: #208ac6;
    }
  }
  .step-item-executed {
    color: #ccc;
    .step-index {
      // border: 2px solid #81d0d7;
      background-color: #ccc;
    }
  }
  .step-item-pending {
    color: #208ac6;
    .step-index {
      // border: 2px solid #81d0d7;
      background-color: #208ac6;
    }
  }
  .step-item:hover {
    background-color: rgba(204, 204, 204, 0.171);
    padding: 10px;
  }
  .train-step-item-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
