<template>
  <div class="mainContentBox" style="padding: 0 24px">
    <el-row :gutter="20">
      <el-col :span="4" class="elColClasss boxStyle">
        <!-- 侧边栏盒子 -->
        <Jiluxiang />
      </el-col>
      <el-col :span="20" class="elColClasss">
        <div class="container">
          <div class="typeContainer">
            <template v-for="(item, index) in stepComponents" :key="index">
              <router-link :to="{ name: item.name }">
                <div :class="getNameClass(index)" class="typeBox" @click="setSelectIndex(index)">
                  <div class="svgIcon">
                    <svg-icon :icon-class="item.iconName" size="30" />
                  </div>
                  <div class="name">{{ item.compentName }}</div>
                </div>
              </router-link>
            </template>
          </div>
          <!-- 二级路由盒子 -->
          <!-- 页面适配宽度：calc((100vw / 6 * 5) - 50px) -->
          <el-scrollbar class="routerView">
            <router-view v-slot="{ Component, route }">
              <keep-alive
                include="Dianjian,Jiluxiang,Duomeiticaiji,Esop,Jingu,Mingpaibangding,Shebeijilu,Tiaoshipipei,Wuliaocaiji">
                <component :is="Component" :key="route.fullPath" />
              </keep-alive>
            </router-view>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import Jiluxiang from "@/views/pro-steps/Jiluxiang.vue";
import { useProcessStore } from "@/store";
import { getOpCompent } from "@/api/prosteps";
const store = useProcessStore();
defineOptions({ name: "ProSteps" });
const route = useRoute();
const loading = ref(false);
//配置标签信息Data
const stepComponents = ref([]);
const defaultComponents = [
  {
    compentName: "物料采集",
    iconName: "wuliaocaiji",
    path: "wuliaocaiji",
    name: "Wuliaocaiji",
  },
  {
    compentName: "记录项",
    iconName: "jiluxiang",
    path: "jiluxiang",
    name: "Jiluxiang",
  },
  {
    compentName: "多媒体采集",
    iconName: "duomeiticaiji",
    path: "duomeiticaiji",
    name: "Duomeiticaiji",
  },
  {
    compentName: "ESOP",
    iconName: "ESOP",
    path: "esop",
    name: "Esop",
  },
  {
    compentName: "点检",
    iconName: "dianjian",
    path: "dianjian",
    name: "Dianjian",
  },
  {
    compentName: "设备记录",
    iconName: "shebeijilu",
    path: "shebeijilu",
    name: "Shebeijilu",
  },
  {
    compentName: "紧固",
    iconName: "jingu",
    path: "jingu",
    name: "Jingu",
  },
  {
    compentName: "调试配对",
    iconName: "tiaoshipipei",
    path: "tiaoshipipei",
    name: "Tiaoshipipei",
  },
  {
    compentName: "铭牌绑定",
    iconName: "mingpai",
    path: "mingpaibangding",
    name: "Mingpaibangding",
  },
];
//当前路由在setpComponents中的index
const selectIndex = ref(0);

//配置data固定路由参数等
const setStepComponents = (data) => {
  let resData = [];
  data.forEach((item) => {
    defaultComponents.forEach((obj) => {
      if (item.compentName === obj.compentName) {
        resData.push({ ...item, ...obj });
      }
    });
  });
  return resData;
};
const getNameClass = (index) => {
  return index === selectIndex.value ? "typeBoxSelected" : "typeBoxNormal";
};
//获取当前tags列表
const getOpCompentArray = async () => {
  const { data } = await getOpCompent("/129/12");
  stepComponents.value = setStepComponents(data);
};
//设置标签是否被选中
const setSelectIndex = (index) => {
  selectIndex.value = index;
};
const setSelectTag = () => {
  const nowRouteName = route.name;
  stepComponents.value.forEach((item, index) => {
    if (item.name == nowRouteName) {
      setSelectIndex(index);
    }
  });
};
onMounted(() => {
  getOpCompentArray();
  setSelectTag();
});
onActivated(() => {
  setSelectTag();
});
</script>

<style lang="scss" scoped>
.boxStyle {
  height: calc(100vh - 80px);
}

.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 80px);

  .typeContainer {
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: flex-start;

    .svgIcon {
      @include flex;
    }
  }
}

.routerView {
  display: flex;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

.typeBox {
  height: 80px;
  width: 135px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .name {
    height: 16px;
    font-weight: 500;
    font-size: $f20;
    line-height: 20px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: $p10;
  }
}

.typeBoxNormal {
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
}

.typeBoxSelected {
  background: $select-hover;
  color: white;
}
</style>
