
<template>
  <div class="app-head-warpper">
    <div class="header-bg">
      <a class="generate creditRating" @click="goxypj">
        信用评价体系
      </a>
      <a class="generate" @click="getCycleId" v-if="curDataType == '2022Two'">
        <img src="@/assets/img/generate.png" alt=""> 生成本季度报告
      </a>
    </div>
    <!-- 一级导航栏 -->
    <!-- <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="17">
          <el-row class="pointer" @click="$router.go(-1)" align="middle" v-if="$route.path !== '/dataCenter/map'">
            <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 ? '#00daf6' : ''">
                <CaretRight />
              </el-icon>
              <span :class="{
                'lignht-color': index === curRouteHistoy.length - 1,
              }">{{ item.label }}</span>
            </div>
          </el-col>
        </el-col>

        <!-- 年度 -->
        <el-col class="year-items">
          <div class="years" align="middle">
            <el-button class="left" @click="pageNum--" :disabled="pageNum == 0">
              <img src="@/assets/img/left.png" v-if="pageNum == 0" alt="">
              <img src="@/assets/img/leftAct.png" v-else alt="">
            </el-button>
            <div class="yearBox">
              <div class="yearLi" :style="{ left: '-' + 25 * pageNum + '%' }">
                <span v-for="(item, index) in years" :key="item.label" :class="{
                  active: index === curYearIndex,
                  disabed: item.disabed,
                }" @click="yearHandle(item, index)">{{ item.label }}</span>
              </div>
            </div>
            <el-button class="right" @click="pageNum++" :disabled="pageNum == 1">
              <img src="@/assets/img/right.png" v-if="pageNum == 1" alt="">
              <img src="@/assets/img/rightAct.png" v-else alt="">
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { getNavList } from "./service";
import NavList from "./navList.json";
import { ArrowLeftBold, CaretRight } from "@element-plus/icons";
import { mapState } from "vuex";
import { downLoadWps } from './download.js'
import axios from "axios"
//使用

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

export default defineComponent({
  components: {
    ArrowLeftBold,
    CaretRight,
  },
  data() {
    return {
      navList: [],
      secodndList: [],
      activeIndex: 0,
      secondIndex: 0,
      curRouteHistoy: [],
      pageNum: 1,
      years: [
        {
          label: "2021年第二季度",
          value: "typeTwo",
          year: '2021',
          quarter: '2',
          disabed: false,
        },
        {
          label: "2021年第三季度",
          value: "typeThree",
          year: '2021',
          quarter: '3',
          disabed: false,
        },
        {
          label: "2021年第四季度",
          value: "typeFour",
          year: '2021',
          quarter: '4',
          disabed: false,
        },
        {
          label: "2022年第一季度",
          value: "2022One",
          year: '2022',
          quarter: '1',
          disabed: false,
        },
        {
          label: "2022年第二季度",
          value: "2022Two",
          year: '2022',
          quarter: '2',
          disabed: false,
        },
      ],
      curYearIndex: 4,
      token: '',
    };
  },
  created() {
    // 获取token
    const url = window.location.href;
    const str = url.split('?token=')[1] || '';
    const token = str.split(this.$route.href)[0];
    this.token = token;
    this.years.map((item, index) => {
      if (index == this.curYearIndex) {
        this.$store.commit("SET_CUR_DATA_TYPE", item.value);
        this.$store.commit("SET_CUR_DATA_LABEl", item.label);
      }
    })
  },
  computed: {
    ...mapState({
      curDataType: (state) => state.curDataType,
    }),
  },
  async mounted() {
    // @ts-ignore
    this.navList = NavList || [];
    // @ts-ignore
    this.secodndList = NavList[this.activeIndex]?.children || [];

    this.init();
  },
  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: {
    //跳转到信用评价
    goxypj() {
      const { xypjUrl = "" } = window.baseURL || {};
      if(xypjUrl){
        //window.location.href = xypjUrl;
        window.open(xypjUrl, "_blank");
      }
    },
    // 查询当前选择年月日对应的周期id
    getCycleId() {
      const activeData = this.years.filter(item => item.value == this.curDataType)[0];
      let url = window.baseURL.devUrl || "";
      axios({
        method: 'get',
        url: `${url}/calculation/getCycleIdByYearAndQuarter/${activeData.year}/${activeData.quarter}`,
        headers: { 'Authorization': 'Bearer ' + this.token }
      }).then(res => {
        this.downloadFile(res.data.data);
      })
    },
    // 文件下载 流文件下载
    downloadFile(cycleId) {
      if (cycleId) {
        downLoadWps('全省军民融合创新示范建设情况分析.wps', cycleId, this.token);
      } else {
        console.log(cycleId, '周期id不存在');
      }
    },

    init() {
      const { meta, path } = this.$route;
      const { VITE_SYSTEM_NAMR = "创新示范绩效评价" } = ENV_PARAMS;
      this.curRouteHistoy = [
        {
          path: "/",
          label: VITE_SYSTEM_NAMR,
        },
        {
          path,
          label: meta.label,
        },
      ];
    },
    yearHandle(item: {}, index: Number) {
      if (item.disabed) return;

      this.$store.commit("SET_CUR_DATA_TYPE", item.value);
      this.$store.commit("SET_CUR_DATA_LABEl", item.label);
      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) {
      this.$router.push(item.path);
    },
  },
});
</script>
<style lang="scss" scoped>
.generate {
  // background-color: initial;
  background-image: url('../assets/img/butbg.png') !important;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  border: none;
  padding: 14px 18px;
  top: 16px;
  // right: 10px;
  right: 160px;
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  img {
    width: 31px;
    height: 27px;
    margin-right: 8px;
  }
}

.creditRating {
  right: 2px;
}

.pointer {
  cursor: pointer;
  margin-left: 10px;
  color: #d4f7ff;

  &:hover {
    color: #00daf6;
  }
}

.nav-history::after {
  content: "";
  width: 11px;
  height: 42px;
  position: absolute;
  left: 0px;
  background-color: rgba(25, 125, 237, 20%);
}

.nav-history::before {
  content: "";
  width: 11px;
  height: 42px;
  position: absolute;
  // left: 0px;
  right: 0px;
  background-color: rgba(25, 125, 237, 20%);
}

.app-head-warpper {
  // background: #f5f9fb;
  box-sizing: border-box;

  .header-bg {
    height: 84px;
    width: 100%;
    // border: 1px solid;
    background-image: url(../assets/img/header_bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 5px;
    position: relative;
  }

  .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-image: url(../assets/img/header_two.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      height: 40px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;

      .nav-history-item {
        display: flex;
        height: 100%;

        .proceed-item {
          color: #d4f7ff;
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-left: 5px;
          cursor: pointer;

          &:hover {
            color: #00daf6;
          }

          .el-icon {
            margin-right: 2px;
          }
        }
      }
    }

    .year-items {
      display: flex;
      width: 100%;
      margin-left: 16px;
      // overflow: hidden;
      flex: 1;
      height: 40px;

      .years {
        display: flex;
        align-items: center;

        height: 42px;
        flex: 1;
        // overflow: hidden;

        .left,
        .right {
          width: 20px;
          padding: 0 2px;
          border: 0;
          height: 100%;
          padding: 5px 2px;
          background-color: rgba(25, 125, 237, 60%);
          position: relative;
          border-radius: 2px;

          img {
            width: 60%;
            height: 60%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
          }
        }

        .right.is-disabled,
        .left.is-disabled {
          // #197ded不透明度20%未选中
          background-color: rgba(25, 125, 237, 20%);
        }

        .yearBox {
          height: 100%;
          flex: 1;
          overflow: hidden;
          position: relative;
          border: 1px solid #125caf;
          background: rgba(25, 125, 237, 15%);
          border-radius: 5px;
          margin: 0 6px;
        }

        .yearLi {
          width: 100%;
          display: flex;
          flex: 1;
          height: 100%;
          position: absolute;
          top: 0;
        }

        span {
          // width: 100%;
          min-width: 25%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          padding: 0 3px;
          font-size: 14px;
          height: inherit;
          color: #d4f7ff;
          justify-content: center;
          cursor: pointer;
          border-right: 1px solid #125caf;
        }

        // span:first-child{
        //   border: ;
        // }
        .active {
          background-color: #197ded;
          color: #fff;
        }
      }
    }

    .lignht-color {
      color: #00daf6;
    }
  }

  .disabed {
    // background:#f5f5f5 !important;
    cursor: not-allowed !important;
    color: #ccc !important;
  }
}
</style>
