
<template>
  <div class="app-head-warpper">
    <!-- 一级导航栏 -->
    <!-- <el-row :gutter="20" class="app-header" type="flex" align="cneter">
      <el-col :span="6" class="title">创新示范绩效评价</el-col>
      <el-col
        v-for="(item, index) in navList"
        :key="item.name"
        :span="4"
        class="nav-item"
        :class="{
          'active-nav': index === activeIndex,
        }"
      >
        <div class="rote-link-item" @click="navClick(item, index)">
          <el-icon color="#333" class="no-inherit" />
          <nav>{{ item.name }}</nav>
        </div>
      </el-col>
    </el-row> -->

    <div class="container">
      <!-- 二级导航栏 -->
      <el-row
        v-if="(secodndList || []).length > 0"
        class="second-nav"
        :gutter="20"
      >
        <el-col v-for="(item, index) in secodndList" :key="index" :span="4">
          <el-card
            shadow="hover"
            :class="{
              'second-active-nav': index === secondIndex,
            }"
            @click="secondHandle(item, index)"
          >
            {{ item.name }}
          </el-card>
        </el-col>
      </el-row>

      <!-- 行动轨迹记录 -->
      <div v-if="curRouteHistoy.length > 0" class="proceed-record">
        <el-row class="pointer" @click="$router.go(-1)" align="middle">
          <el-icon><ArrowLeftBold /></el-icon>
          返回
          <el-divider direction="vertical"></el-divider>
        </el-row>

        <el-row>
          <div
            v-for="(item, index) in curRouteHistoy"
            :key="item"
            class="proceed-item"
            :class="{
              'lignht-color': index === curRouteHistoy.length - 1,
            }"
            @click="toPage(item)"
          >
            <el-icon
              v-if="index > 0"
              :color="index === curRouteHistoy.length - 1 ? '#409EFC' : ''"
              ><CaretRight
            /></el-icon>
            {{ item.label }}
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { getNavList } from "./service";
import { ArrowLeftBold, CaretRight } from "@element-plus/icons";
import { routes } from "@/route";

const ENV_PARAMS = import.meta.env; // 这是Vite官方指导获取环境变量的方式

export default defineComponent({
  components: {
    ArrowLeftBold,
    CaretRight,
  },
  data() {
    return {
      navList: [],
      secodndList: [],
      activeIndex: 0,
      secondIndex: 0,
      curRouteHistoy: [],
    };
  },
  created() {},
  async mounted() {
    const { data: navList } = await getNavList();
    this.navList = navList || [];

    // @ts-ignore
    this.secodndList = navList[this.activeIndex]?.children || [];
  },
  watch: {
    $route() {
      const { meta, path } = this.$route;
      const { VITE_SYSTEM_NAMR = "创新示范绩效评价" } = ENV_PARAMS;
      const routHistroy = [];
      meta.person &&
        routHistroy.push({
          path: meta.person.path,
          label: meta.person.label,
        });

      this.curRouteHistoy = [
        {
          path: "/",
          label: VITE_SYSTEM_NAMR,
        },
        ...routHistroy,
        {
          path,
          label: meta.label,
        },
      ];
    },
  },
  methods: {
    navClick(item: {}, index: number) {
      // const { link, children = [] } = item;
      // this.activeIndex = index;
      // this.secondIndex = 0;
      // this.secodndList = children;
      // this.$router.push(link);
    },

    secondHandle(item: {}, index: number) {
      // this.secondIndex = index;
      // this.$router.push(item.link);
    },
    toPage(item) {
      console.log("item-", item);
      this.$router.push(item.path);
    },
  },
});
</script>
<style lang="scss" scoped>
.pointer{
  cursor: pointer;
  &:hover{
    color: #4198ff
  }
}
.app-head-warpper {
  background: #f5f9fb;
  box-sizing: border-box;

  .container {
    // padding: 0 20px;
    box-sizing: border-box;
  }
  //   一级导航栏
  .app-header {
    background: linear-gradient(to right, #0655bc, #317bdd);
    height: 85px;
    margin: 0 0 20px !important;
    box-sizing: border-box;
    .title {
      font-size: 26px;
      display: flex;
      align-items: center;
      font-weight: bold;
      color: #fff;
      letter-spacing: 5px;
    }
    .nav-item {
      display: flex;
      align-items: center;
      justify-content: center;
      .rote-link-item {
        display: flex;
        align-items: center;
        color: #fff;

        nav {
          font-size: 20px;
          cursor: pointer;
          &:hover {
            color: #4198ff;
          }
        }
      }
    }
    .active-nav {
      background: #06489e;
    }
  }

  //   二级导航栏
  .second-nav {
    box-sizing: border-box;
    margin-bottom: 20px;
    cursor: pointer;
    .el-card {
      text-align: center;
    }
    .second-active-nav {
      color: #fff;
      background: #4198ff;
    }
  }

  // 行动轨迹记录
  .proceed-record {
    margin-bottom: 20px;
    padding: 0 20px;
    background: #fff;
    border-radius: 5px;
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 14px;
    color: #999;
    .proceed-item {
      color: #999;
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-left: 5px;
      cursor: pointer;
      &:hover {
        color: #4198ff;
      }
      .el-icon {
        margin-right: 2px;
      }
    }

    .lignht-color {
      color: #4198ff;
    }
  }
}
</style>
