<template>
  <div class="layouts flex flexc aic">
    <Header></Header>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          ><a :href="portalUrl + '/#/home/dataManagement/dataAdmin'"
            >政务一体化平台</a
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a :href="portalUrl + '/#/home/siteArrange'"
            >站点编排</a
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item
          v-for="bread in breads"
          :key="bread.title"
          :to="bread.to"
          >{{ bread.title }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="out-box flex1">
      <router-view></router-view>
    </div>
    <div class="footer tac">Copyright &copy;2021 ICZER 信宏翔科技有限公司</div>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import { getdeptList } from "@/api/department";
import { mapMutations } from "vuex";
import local from "@/utils/local";
export default {
  components: {
    Header,
  },
  data() {
    return {
      portalUrl: process.env.VUE_APP_API_portal_URL,
      breads: [],
    };
  },
  created() {
    this.calcBreads();
    this.getdeptList();
  },
  watch: {
    "$route.path"() {
      this.calcBreads();
    },
  },
  computed: {},
  methods: {
    ...mapMutations(["SET_deptList"]),
    // 计算面包屑
    calcBreads() {
      let temp = [{ to: "/basicsset", title: "数字样表系统" }];
      //  过滤出路由数据
      let r = this.$route.matched
        .filter((v) => v.meta.title)
        .map((v) => {
          return { to: v.path, title: v.meta.title };
        });
      // 赋值给面包屑渲染
      this.breads = [...temp, ...r];
    },

    // 获取部门列表
    async getdeptList() {
      let res = await getdeptList({
        siteId: local.getLocal("sampleSiteId")
          ? local.getLocal("sampleSiteId")
          : "",
      });
      let { code, data } = res.data;
      if (code === 1) {
        this.SET_deptList(data.data);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.layouts {
  width: 100%;
  height: 100%;
  .crumbs {
    margin: 10px 0px;
    width: 98%;
  }
  .out-box {
    width: 98%;
    border-radius: 4px;
    background-color: #fff;
    overflow-y: auto;
  }
  .footer {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>