<template>
  <div class="left-menus scroll3">
    <div class="dept-list">
      <div
        class="dept-item"
        :class="{ active: isActive === i }"
        v-for="(v, i) in deptList"
        :key="v.deptCode"
        @click="changeDept(v.deptCode, i)"
      >
        <div class="dept-name">
          {{ v.deptAbb ? v.deptAbb : v.name }}
        </div>
        <div class="line"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getdeptList } from "@/api";
export default {
  data() {
    return {
      deptList: [],
      isActive: 0,
    };
  },
  created() {
    this.getdeptList();
  },
  methods: {
    // 获取部门列表
    async getdeptList() {
      let obj = { deptCode: "", name: "全部部门" };
      let res = await getdeptList();
      if (res.data.code === 1) {
        let { deptMap } = res.data.data;
        let arr = Object.keys(deptMap).map((key) => {
          return {
            deptCode: key,
            name: deptMap[key],
          };
        });
        this.deptList = [obj, ...arr];
      }
    },
    changeDept(deptCode, index) {
      this.isActive = index;
      this.$emit("click", deptCode);
    },
  },
};
</script>

<style lang="less" scoped>
.left-menus {
  width: 300px;
  height: 100%;
  padding-bottom: 15px;
  background: #ffffff;
  box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.07);
}
.dept-list {
  width: 100%;
  // height: calc(100vh - 110px);
  // padding-bottom: 15px;
}
.dept-item {
  text-align: center;
  font-size: 26px;
  color: #333333;
  cursor: pointer;
  .dept-name {
    padding: 20px 6px;
    line-height: 40px;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
}
.line {
  height: 1px;
  width: 100%;
  background-image: linear-gradient(to right, #fff, #ccc 50%, #fff);
}
.active {
  background: linear-gradient(
    270deg,
    var(--main-assist-color),
    var(--main-theme-color)
  );
  font-family: Source Han Sans CN;
  color: #ffffff;
}
</style>
