<template>
  <div style="margin-top: -30px;padding: 10px;">
      <el-button type="text" @click="setValueNull()" > 选择所有部门 </el-button>
      <div>
        <h1 align="center"> 机关各科室 </h1>
        <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 v-if="item.isLeader==1">[经] </span>
              <span v-else-if="item.isLeader==2">[科] </span>
              <span v-else-if="item.isLeader==3">[分] </span>
              {{ item.department}}
            </el-button>
          </el-col>
        </el-row>
      </div>
      <div>
        <h1 align="center"> 局属各单位 </h1>
        <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 v-if="item.isLeader==1">[经] </span>
              <span v-else-if="item.isLeader==2">[科] </span>
              <span v-else-if="item.isLeader==3">[分] </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;
}
</style>
