<template>
  <div style="margin-top: -30px;padding: 10px;">
      <el-button type="text" @click="setValueNull()" > 选择所有部门 </el-button>
      <div>
        <h4 align="center" class="p10" style="font-size: 25px;"> 机关各科室 </h4>
        <el-row>
          <el-col :span="8" v-for="item in userDepartments"  v-if="item.menuId==0" :key="item.departmentId">
            <el-button  type="text" @click="selectDepartment(item)"   >
              <span :class="'leader_'+item.isLeader" class="el-icon-rank"></span>
              {{ item.department}}
            </el-button>
          </el-col>
        </el-row>
      </div>
      <div>
        <h4 align="center" class="p10" style="font-size: 25px;"> 局属各单位 </h4>
        <el-row>
          <el-col :span="8" v-for="item in userDepartments"  v-if="item.menuId==1" :key="item.departmentId">
            <el-button  type="text" @click="selectDepartment(item)"  >
              <span :class="'leader_'+item.isLeader" class="el-icon-rank" ></span>
              {{ item.department}}
            </el-button>
          </el-col>
        </el-row>
      </div>
  </div>
</template>
<script>
  import {  mapGetters } from "vuex";

export default {
  name: "dropSelect",
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters("user", ["userDepartments"])
  },
  methods: {
    setValueNull() {
      this.$emit("select", { departmentId: 0, department: "" });
    },
    selectDepartment(item){
      this.$emit("select", item );
    }

  },
};
</script>
<style>
.el-scrollbar {
  display: block !important;
}
.el-select {
  display: inline;
}
.leader_0{ color: white;}
.leader_1{ color: blue; }
.leader_2{ color: orange; }
.leader_3{ color: red; }
</style>
