<template>
  <div class="index_box">
    <div class="content_box">
      <div class="top-ste">
        <el-steps
          :active="activeIndex"
          space="20px"
          align-center
          style="margin-top: 18px"
        >
          <el-step
            v-for="(item, index) in routeList"
            :key="index"
            :title="item.taskTypeName"
            @click.native="handIdx(index, item)"
            :description="desIndex == index ? '此处' : ''"
            :class="desIndex == index?'active':''"
          ></el-step>
        </el-steps>
      </div>
    </div>

  </div>
</template>

<script>
import { getTaskInstanceList } from '@/api/produce/job';

export default {
  components: {
  
  },
  data() {
    return {
     activeIndex:0,
     routeList:[],
     desIndex: 0,
    };
  },

  computed: {
   
  },

  created() {
    this.init()
    this.getTaskFn();
  },
  methods: {
    //  折叠悬浮中样式调整
    init() {
      this.$store.dispatch('theme/setCollapse', true);
    },

    //工序步骤条数据
    getTaskFn() {
      let workid=this.$route.query.workOrderId
      getTaskInstanceList(workid).then((res) => {
        this.routeList = res;

        // 使用findIndex方法查找
        // const index = this.routeList.findIndex(
        //   (item) => Number(item.taskId) == Number(this.workOrderInfo.taskId)
        // );

        
        // this.desIndex = index;
        console.log(this.routeList,'888888');
        // this.newId = this.routeList[this.desIndex].taskId||'';

        // if (this.workOrderInfo.taskId != -2) {
        //   this.curTaskObj = JSON.parse(JSON.stringify(this.routeObj));
        // } else {
        //   this.curTaskObj = JSON.parse(JSON.stringify(this.routeList[0]));
        //   this.desIndex = 0;
        // }
        // this.activeIndex = index;
      });
    },
    
  },

  mounted() {
    this.$nextTick(() => {
      const targetElements =
        document.getElementsByClassName('ele-admin-tabs');

      if (targetElements.length > 0) {
        // 遍历所有具有 'ele-admin-tabs' 类的元素
        Array.from(targetElements).forEach((element) => {
          // 对每个元素添加 'new-ele-admin-tabs' 类
          element.classList.add('new-ele-admin-tabs');
        });
      }
    });
  },

  destroyed() {
    this.$nextTick(() => {
      const targetElements =
        document.getElementsByClassName('ele-admin-tabs');
      if (targetElements.length > 0) {
        Array.from(targetElements).forEach((element) => {
          element.classList.remove('new-ele-admin-tabs');
        });
      }
    });
  }
};
</script>

<style>
.content_box {
  width:100%;
  height: 100%;
  background-color: #fff;
}



.footBtn {
  position: absolute;
  bottom: 20px;
  left: 0;
}

.new-ele-admin-tabs {
  display: none !important;
}

.c_title {
  color: #157a2c;
  font-size: 16px;
  font-weight: bold;
}

.tableZ_box {
  border: 1px solid #e3e5e5;
  margin: 6px 0;

  &:last-child {
    border-bottom: none;
  }

  .row {
    width: 100%;
    display: flex;
  }

  .col {
    width: calc(100% / 5);
    display: flex;
    align-items: center;
    min-width: 200px;
    min-height: 32px;
    border-bottom: 1px solid #e3e5e5;
    border-right: 1px solid #e3e5e5;

    &:last-child {
      border-right: none;
    }

    .name {
      display: flex;
      align-items: center;
      padding: 4px;
      width: 80px;
      height: 100%;
      background-color: #d0e4d5;
      color: #000;
    }

    .content {
      padding: 4px 6px;
      color: #000;
    }
  }

  .pd6 {
    padding: 0 6px;
  }
}
</style>
<style lang="scss" scoped>
.seek-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
}

.right_main_box {
  background-color: #fff;
  height: 100%;
  box-sizing: border-box;
}

.index_box {
  padding: 10px;
  padding-bottom: 0;
  width: 100%;
  box-sizing: border-box;
  min-width: 1280px !important;
  height: calc(100vh - 60px);
  // overflow-x: auto;
  /* 当内容超出宽度时，允许水平滚动 */
  white-space: nowrap;
  /* 防止内部文本换行，确保所有内容都在一行显示 */
  scrollbar-width: thin;
  /* 设置滚动条宽度（浏览器兼容性可能有所不同） */
  scrollbar-color: #40a9ff transparent;
  /* 设置滚动条颜色和轨道颜色（同样，浏览器兼容性） */
}

.main {
  width: 100%;
  min-width: 1280px;

  height: calc(100vh - 70px - 50px - 80px);
  display: flex;
  justify-content: space-between;
}

.left_main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  min-width: 640px;

  .top {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  // .bottom {
  //   width: 100%;
  //   min-height: calc((100vh - 70px - 50px - 80px - 20px) / 2);
  //   overflow: hidden;
  // }
}

::v-deep .el-tabs__item.is-active {
  background-color: #DFFADE;
  /* 蓝色背景 */
  color: #333;
}

::v-deep .is-active {
  color: #DFFADE;
}


.right_main {
  min-width: 640px;
  padding-bottom: 12px;
  height: calc((100vh - 70px - 50px - 80px - 12px));
  background: #f0f3f3;
}

//工单报工样式
.top-ste{

}
</style>
