<template>
  <div class="inner-container">
    <!-- <el-col :span="3"> -->
    <div class="box">
      <span
        :class="item.sts ? 'spanbox bg' : 'spanbox'"
        v-for="(item, index) in menuList"
        :key="index"
        :name="item.path"
        :label="item.label"
        @click="handleClick(item)"
      >
        <el-badge :value="item.num" :max="99" :hidden="item.num == 0">
          <span>{{ item.label }}</span>
        </el-badge>
      </span>
    </div>
    <!-- <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
				<el-tab-pane v-for="(item, index) in menuList" :key="index" :name="item.path" :label="item.label">
				</el-tab-pane>
			</el-tabs> -->
    <!-- </el-col> -->
    <div style="padding-left: 15px">
      <el-row>
        <div style="height: 100%">
          <router-view />
        </div>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "",
      showList: [],
      routerList: [
        {
          label: "月度部门预算",
          path: "/monthExcel",
          name: "monthExcel",
          sts: 1,
          num: 0,
        },
        {
          label: "季度部门预算",
          path: "/quarterExcel",
          name: "quarterExcel",
          sts: 0,
          num: 0,
        },
        {
          label: "年度部门预算",
          path: "/yearExcel",
          name: "yearExcel",
          sts: 0,
          num: 0,
        },
        {
          label: "采购部门预算",
          path: "/projectExcel",
          name: "projectExcel",
          sts: 0,
          num: 0,
        },
        // {
        // 	label: "预算回复",
        // 	path: "/recallAdmin",
        // 	name: "recallAdmin",
        // 	sts:0,
        // 	num:0
        // },
        {
          label: "预算模板管理",
          path: "/budgetList",
          name: "budgetList",
          sts: 0,
          num: 0,
        },
        {
          label: "下发管理",
          path: "/issueList",
          name: "issueList",
          sts: 0,
          num: 0,
        },
      ],
    };
  },
  computed: {
    menuList: function () {
      let arr = [];
      this.routerList.map((item) => {
        // arr.push(item);
        this.showList.map((row) => {
          if (item.path == row.jspUrl && row.systemflag == "1") {
            arr.push(item);
          }
        });
      });
      return arr;
    },
  },
  methods: {
    handleClick(val) {
      this.activeName = val.path;
      for (let i = 0; i < this.routerList.length; i++) {
        this.routerList[i].sts = 0;
      }
      val.sts = 1;
      if (this.$route.path != this.activeName) {
        this.$router.push(this.activeName);
      }
      this.getnunm();
    },
    getnunm() {
      this.$http({
        url: "/market/preTask/queryTaskToDoNumByFunc",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].funcCode == "1000") {
            this.routerList[2].num = res.data[i].taskNum;
          }
          if (res.data[i].funcCode == "1001") {
            this.routerList[0].num = res.data[i].taskNum;
          }
          if (res.data[i].funcCode == "1003") {
            this.routerList[3].num = res.data[i].taskNum;
          }
          if (res.data[i].funcCode == "1004") {
            this.routerList[1].num = res.data[i].taskNum;
          }
        }
      });
    },
  },
  mounted() {
    this.activeName = this.$route.path;
  },
  created() {
    JSON.parse(sessionStorage.childrenMenus).map((item) => {
      this.showList.push(item);
    });
    this.getnunm();
  },
  watch: {
    $route(to, from) {
      this.activeName = this.$route.path;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-tabs__content {
  display: none;
}

.box {
  display: inline-block;
  padding-left: 10px;
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
  .spanbox {
    display: inline-block;
    text-align: center;
    width: 166px;
    height: 36px;
    margin: 10px;
    line-height: 36px;
    background: #d8eaf6;
    color: #000;
  }
  .bg {
    color: white;
    background: #0583cd;
  }
}
</style>
