
<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>

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

          <el-col class="nav-history-item" :span="18">
            <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-col>
        </el-col>

        <!-- 年度 -->
        <el-col class="year-items">
          <div class="years" align="middle">
            <span
              v-for="(item, index) in years"
              :key="item"
              :class="{
                active: index === curYearIndex,
              }"
              @click="yearHandle(index)"
              >{{ item }}年</span
            >
          </div>
        </el-col>
      </el-row>
    </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: [],
      years: [2019, 2020, "2021上半"],
      curYearIndex: 2,
    };
  },
  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: {
    yearHandle(index: number) {
      this.curYearIndex = index;
    },
    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;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    font-size: 14px;
    height: 40px;
    color: #999;
    .nav-history {
      padding-left: 10px;
      width: 100%;
      background: #fff;
      display: flex;
      align-items: center;
      height: 40px;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 2px 2px 10px #eee;
      .nav-history-item {
        display: flex;
        height: 100%;
        .proceed-item {
          color: #999;
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-left: 5px;
          cursor: pointer;
          &:hover {
            color: #4198ff;
          }
          .el-icon {
            margin-right: 2px;
          }
        }
      }
    }
    .year-items {
      display: flex;
      width: 100%;
      margin-left: 16px;
      border-radius: 5px;
      overflow: hidden;
      flex: 1;
      height: 40px;
      background: #fff;
      box-shadow: 2px 2px 10px #eee;
      .years {
        display: flex;
        align-items: center;

        height: 40px;
        flex: 1;
        overflow: hidden;
        span {
          width: 100%;
          display: flex;
          align-items: center;
          padding: 0 12px;
          font-size: 12px;
          height: inherit;
          color: #949494;
          justify-content: center;
          cursor: pointer;
        }
        .active {
          background-color: #4198ff;
          color: #fff;
        }
      }
    }

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