<template>
  <div class="left-menus">
    <div class="dept-list">
      <div
        class="dept-item"
        :class="{ active: isActive === i }"
        v-for="(v, i) in deptList"
        :key="v.id"
        @click="changeDept(v.id, 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 = { id: "", name: "全部部门" };
      let res = await getdeptList();
      let { data } = res.data.data;
      this.deptList = [obj, ...data];
    },
    changeDept(id, index) {
      this.isActive = index;
      this.$emit("click", id);
    },
  },
};
</script>

<style lang="less" scoped>
.left-menus {
  width: 300px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 5px 15px 3px rgba(0, 0, 0, 0.07);
}
.dept-list {
  width: 100%;
  height: calc(100vh - 100px);
  padding: 15px 0px;
  overflow-y: auto;
}
.dept-item {
  height: 70px;
  text-align: center;
  font-size: 26px;
  line-height: 70px;
  color: #333333;
  cursor: pointer;
  .dept-name {
    padding: 0px 6px;
    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-color1),
    var(--main-theme-color1)
  );
  font-family: Source Han Sans CN;
  color: #ffffff;
}
</style>